May 27
CSS Decorative Gallery
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).
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").
Basic Concept (see demo)
You need to insert an extra <span> tag within the <div> tag, with which we’ll apply a background image to create the overlaying effect. If you don’t like to have an empty span tag, you can append the span tag by Javascript (I’ll show you how later in this tutorial). Here is how it works:
Then in the CSS, the key point you have to remember is: specify the div element to position:relative and the span element to position:absolute. You can position the span element anywhere you want by using the top and left property.
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 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]-->
Look and Feel
To change the look and feel, simply edit the CSS specifications of the span element. Click the image below to see the demos I have. To show you how flexible it is, I’ve created 15 different styles (notice the HTML markup is same).
The jQuery Solution (see demo)
I know some of you (particularly the web accessibility fans) don’t like to have an empty span tag in the markup. Well, I’ve solved this issue by using jQuery to append the span tag to the source code. Insert the following code in between the <head> tag:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//prepend span tag
$(".photo a").prepend("<span></span>");
});
</script>
#1. Simple Gallery (see demo)
Let’s take the technique from the previous step and apply it to create a photo gallery.
#1b. Mini Icons (see demo)
This example shows you how to position different icons on top of each photo (note: an extra CSS class name is required in the span tag).
#2. Photo With Text (see demo)
This example shows you how to create a gallery with linking text (em tag).
#2b. Popup Text (see demo)
#3. Mini Paper Clip (see demo)
#4. Cork Board Gallery (see demo, IE6 version)
sIFR Version (Flash Text Replacement) (see sIFR demo)
This example uses sIFR to replace the em text with a handwritten font (notes: in this demo, the span tag is appended by jQuery)
#4b. Cork Board With Masking Tape (see demo, IE6 version)
#5. Art Gallery - Black Frame (see demo)
#5b. Art Gallery - Gold Frame (see demo)
#6. Grungy Watercolor (see demo)
sIFR Version (see sIFR demo)
#7. Glossy Style (see demo)
#8. Wood Panel Gallery (see demo)
Finally, this example demonstrates how you can apply the background image to all elements to create a wood panel gallery: ul, li, and em.
Final Remarks
As you can see, this CSS trick is very flexible. So, be creative! Feel free to incorporate the graphic images and CSS styles in this tutorial to create your own.
3D Wall Component Giveaways 2008 Design Trends
Comments
Pages: 46 45 44 43 42 41 40 39 38 37 36 … 1 » Show All
There are 460 comments (+Add)
Pages: 46 45 44 43 42 41 40 39 38 37 36 … 1 » Show All
Loading ...
460 christian http://www.st-bock.de/v3test/
August 30th, 2010 at 3:32 pm
BODYCODE:
*div class=”image_container”*
*a href=”#” rel=”lightbox” title=”"*
*span class=”cut_corner_ol”* */span*
*span class=”cut_corner_or”**/span*
*span class=”cut_corner_ul”**/span*
*span class=”cut_corner_ur”**/span*
*img src=”images/3.jpg” width=”300″ height=”200″ alt=”" /*
*/a*
*/div*
–> without the * of course… works like a charm
459 christian http://www.st-bock.de/v3test/
August 30th, 2010 at 3:29 pm
hey i used sample 6 (the one with the yellow car here), just modified the non-javascript version, so you can use it for any size for any picture. So what i basically did is, cutting 4 cut edges (ol=oben links=upper left; or=oben rechts=upper right; ul=unten links=down left; ur=unten rechts=down right) as single images and include each of them in a seperate span tag placing them absolute:
CSS:
.image_container {
margin: 10px;
position: relative;
float: left;
}
.image_container img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.image_container img:hover {
border: solid 1px #999;
}
.cut_corner_ol {
display: block;
position: absolute;
width:25px;
height:25px;
top: -5px;
left: -5px;
background: url(images/cut_corner_ol.png) no-repeat;
}
.cut_corner_or {
display: block;
position: absolute;
width:25px;
height:25px;
top: -5px;
right: -5px;
background: url(images/cut_corner_or.png) no-repeat;
}
.cut_corner_ul {
display: block;
position: absolute;
width:25px;
height:25px;
bottom: 15px;
left: -5px;
background: url(images/cut_corner_ul.png) no-repeat;
}
.cut_corner_ur {
display: block;
position: absolute;
width:25px;
height:25px;
bottom: 15px;
right: -5px;
background: url(images/cut_corner_ur.png) no-repeat;
}
BODYCODE:
–> without the * of course… works like a charm
458 grinding mill http://www.mill-for-sale.net/
August 23rd, 2010 at 3:33 am
Is the css compatible with IE6 and firefox???
457 EasyLifeTerm.com http://EasyLifeTerm.com
August 19th, 2010 at 2:08 pm
My web designer recommended that I take a look at your article and list. I am so glad that I did. Thanks for your research and list.
456 crusher machine http://www.crushermachine3.com
August 14th, 2010 at 9:02 pm
WO,It’s so Beautiful! But some picture I don’t konw the mean
455 CAROLAY ORTEGA
August 12th, 2010 at 7:07 pm
ESTAN DIVINS
454 Joy http://www.dollarcade.com
August 11th, 2010 at 2:09 am
Hello,
I represent http://www.dollarcade.com - an online game site. This site is made with css and without the help of
table.
Please review our website and consider it to feature it on your site.
Thanking you for your time.
With Regards
Joy
453 West Coast Designer http://penupdesigns.com
August 3rd, 2010 at 6:12 pm
wonderful techniques! Thank you very much for the tutorial!
452 Claudio
July 27th, 2010 at 10:00 am
Hi guys, I need your advise, I have 30 galleries in nextgen gallery with 8 different TAGS and i want to use the mini icons gallery in wich the icons shows according to the tag I assign to gallery or photo. I was thinking in create different templates for the different galleries, but I don’t know how to make the icons appear. I ‘m using wp 3 and ngg 1.5.5.
Thanks for any help.
(Sorry for my english)
451 angel http://melyanao06.student.ipb.ac.id
July 23rd, 2010 at 9:28 am
very interesting post, thanks for sharing..