CSS Decorative Gallery

Post Reply
User avatar
parthasarker
Insanely Distorted
Insanely Distorted
Posts: 2369
Joined: Mon Dec 01, 2008 5:17 pm
Full Name: Partha Sarker
Expertise: Web Design

Another CSS tutorial for designing decorative gallery... check it

Did you like my previous CSS tutorial on how to create gradient text effects? I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex).

Image

What Are The Benefits Of This CSS Trick?
  • Saves Time — You don’t have to manually create the decorative template in Photoshop and export the individual image.
    Keeps Original Source Images — So you don’t have to worry about changing the design theme in the future.
    Very Flexible — You can have a completely different look and feel by just editing the CSS.
    It Works on Any Site — This CSS trick works on any type of site, with any image size.
    Cross-Browser CompatIble — It has passed the test on most browsers (Firefox, Safari, Opera, and even the "buggy IE6").
View Demo Gallery http://www.webdesignerwall.com/demo/dec ... &width=840

Download link

Code: Select all

http://www.webdesignerwall.com/file/decorative-gallery-demo.zip
IE PNG Hack

To make the transparent PNG image work on IE6, I use this wonderful iepngfix.htc hack. Download a copy of iepngfix.htc(http://www.twinhelix.com/css/iepngfix/) and insert the following code in between the <head> tag:
<!--[if lt IE 7]>
<style type="text/css">

.photo span { behavior: url(iepngfix.htc); }

</style>
<![endif]-->


Post Reply

Return to “CSS”