Decorate Your Images (CSS)

This post will show you how to decorate your images
and photo galleries without editing the source images
for your blogspot post. It is very easy and flexible.
All you need is an extra <span> tag and apply a background
image to create the overlaying effect.

The Benefits Of This CSS Trick
You don’t have to manually create the decorative template in Photoshop and export the individual image.
You don’t have to worry about changing the design theme in the future.
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.

Preview :

image
image
image
image
image
image
image
image
image
image
image
image


And here is how it works:

Put this CSS codes on your template (Dashboard > Layout > Edit Html) :

/* ---------- DECORATE YOUR IMAGES ----------------------- */
.photo {
margin: 10px;
position: relative;
width: 180px;
height: 130px;
float: left;
}
.photo img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.photo span {
width: 20px;
height: 18px;
display: block;
position: absolute;
top: 12px;
left: 12px;
background: url(http://suspended.fileave.com/deelpe/images/digg-style.gif) no-repeat;
}
.photo a {
text-decoration: none;
}

.sample1 span {
width: 28px;
height: 21px;
display: block;
position: absolute;
top: -12px;
left: 90px;
background: url(http://suspended.fileave.com/deelpe/images/pin.png) no-repeat;
}

.sample2 span {
width: 77px;
height: 27px;
display: block;
position: absolute;
top: -12px;
left: 50px;
background: url(http://suspended.fileave.com/deelpe/images/tape.png) no-repeat;
}

.sample3 span {
width: 30px;
height: 60px;
display: block;
position: absolute;
top: -5px;
left: -2px;
background: url(http://suspended.fileave.com/deelpe/images/paper-clip.png) no-repeat;
}

.sample4 span {
width: 115px;
height: 32px;
display: block;
position: absolute;
top: -13px;
left: 30px;
background: url(http://suspended.fileave.com/deelpe/images/tape2.png) no-repeat;
}

.sample5 span {
width: 216px;
height: 166px;
display: block;
position: absolute;
top: -17px;
left: -18px;
background: url(http://suspended.fileave.com/deelpe/images/gold-frame.png) no-repeat;
}

.sample6 span {
width: 189px;
height: 137px;
display: block;
position: absolute;
top: -5px;
left: -5px;
background: url(http://suspended.fileave.com/deelpe/images/cut-corner.png) no-repeat;
}

.sample10 span {
width: 181px;
height: 134px;
display: block;
position: absolute;
top: -6px;
left: -6px;
background: url(http://suspended.fileave.com/deelpe/images/brush-border.png) no-repeat;
}
.sample10 img {
border: none;
padding: 0;
}

.sample11 span {
width: 122px;
height: 72px;
display: block;
position: absolute;
top: -22px;
left: -15px;
background: url(http://suspended.fileave.com/deelpe/images/floral-corner.png) no-repeat;
}

.sample12 span {
width: 186px;
height: 137px;
display: block;
position: absolute;
top: 2px;
left: 2px;
background: url(http://suspended.fileave.com/deelpe/images/watercolor-top.png) no-repeat;
}
.sample12 img {
border: none;
padding: 9px 12px 12px 11px;
background: url(http://suspended.fileave.com/deelpe/images/watercolor-bg.png) no-repeat;
}

.sample13 span {
width: 170px;
height: 120px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(http://suspended.fileave.com/deelpe/images/mask.png) no-repeat;
}
.sample13 img {
border: none;
padding: 0;
}

.sample14 span {
width: 170px;
height: 84px;
display: block;
position: absolute;
top: 5px;
left: 5px;
background: url(http://suspended.fileave.com/deelpe/images/glossy-gradient.png);
}
/*---------------- END of CODE -----------------*/

Then insert this code on your post :

<div class="photo">
<a href="http://alltelleringet.deviantart.com/art/fishy-island-127503441"><span></span><img src="http://img18.imageshack.us/img18/5346/decor1c.jpg" alt="image" /></a></div>
<div class="photo sample1">
<a href="http://www.maslov.com/photographers/skeleton/index.html?headquarters=19.html"><span></span><img src="http://img527.imageshack.us/img527/5277/decor2.jpg" alt="image" /></a></div>
<div class="photo sample2">
<a href="http://alltelleringet.deviantart.com/art/Go-your-own-road-111657665"><span></span><img src="http://img527.imageshack.us/img527/8009/decor3j.jpg" alt="image" /></a>
</div>
<div class="photo sample3">
<a href="http://alltelleringet.deviantart.com/art/roadworkers-coffee-break-113796265"><span></span><img src="http://img12.imageshack.us/img12/6518/decor4.jpg" alt="image" /></a>
</div>
<div class="photo sample4">
<a href="http://alltelleringet.deviantart.com/art/anlagd-oversvamning-111656788"><span></span><img src="http://img18.imageshack.us/img18/7341/decor5.jpg" alt="image" /></a>
</div>
<div class="photo sample5">
<a href="http://tarelkin.deviantart.com/art/Angry-39052630"><span></span><img src="http://img35.imageshack.us/img35/1667/decor6.jpg" alt="image" /></a>
</div>
<div class="photo sample6">
<a href="http://adsoftheworld.com/media/print/tampa_cargo_truck?size=_original"><span></span><img src="http://img35.imageshack.us/img35/2259/decor7.jpg" alt="image" /></a>
</div>
<div class="photo sample10">
<a href="http://www.flickr.com/photos/joshsommers/1190779838/"><span></span><img src="http://img23.imageshack.us/img23/1706/decor11.jpg" alt="image" /></a>
</div>
<div class="photo sample11">
<a href="http://www.behance.net/Gallery/Selfreflect/52768"><span></span><img src="http://img35.imageshack.us/img35/9387/decor12.jpg" alt="image" /></a>
</div>
<div class="photo sample12">
<a href="http://lsd.eu/Site/cars/page_c/saatchi-renault-tuareg.html"><span></span><img src="http://img35.imageshack.us/img35/6463/decor13.jpg" alt="image" /></a>
</div>
<div class="photo sample13">
<a href="http://www.behance.net/Gallery/mio-gps/113621"><span></span><img src="http://img35.imageshack.us/img35/2333/decor14.jpg" alt="image" /></a>
</div>
<div class="photo sample14">
<a href="http://lsd.eu/Site/vari/page_v/dlv-purina-pit.html"><span></span><img src="http://img18.imageshack.us/img18/7316/decor15.jpg" alt="image" /></a>
</div>

Credits to : WebDesignerWall
Share this article :
 

+ comments + 4 comments

October 4, 2009 at 3:24 AM

Hi Interesting one

October 4, 2009 at 1:50 PM

sundulan prend...$$$

October 10, 2009 at 5:29 AM

fantastic blog...link exchange please

October 25, 2009 at 7:20 PM

Cool tips Bro,n your tutorial is great for us, and I am here with some sundulan. $mile gituloh, so don't forget Ok. N Thanks For sharing.....

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. erastMedia - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger