Create expandable, flexible css dropshadows that go around an entire image, are standards compliant and fully tested on all of the major browsers.
This tutorial is a spin-off from A List Apart’s Onion Skinned Drop Shadows tutorial. If you wish to learn more about how this method works, please review A List Apart’s article. In their example they explain in great detail how it works but they only show you how to create a drop shadow on part of the image. In my example I will show you how to create an expandable, flexible, css drop shadow that goes around an entire image.
It may not be the prettiest method but it works and it sure beats adding a drop shadow to a pile of images. All of my drop shadow graphics are 4 pixels x 4 pixels and the selector .ds10’s padding is 4px. So if your drop shadow images are a different size all you need to adjust is the padding for selector .ds10 and you are all set.
Browsers Tested:
Internet Explorer (PC 6,7/Mac), Firefox (PC/Mac), Safari (Mac), Netscape Navigator (Mac) – feel free to add to the list.
CSS:
.ds1, .ds2, .ds3, .ds4, .ds5, .ds6, .ds7, .ds8, .ds9, .ds10 {
display:inline-table;
/* \*/display:block;/**/
}
.ds1 {
float:left;
}
.ds2 {
background:url(left.gif) left top repeat-y;
}
.ds3 {
background:url(bottom.gif) left bottom repeat-x;
}
.ds4 {
background:url(corner_bl.gif) left bottom no-repeat;
}
.ds5 {
background:url(top.gif) left top repeat-x;
}
.ds6 {
background:url(right.gif) right top repeat-y;
}
.ds7 {
background:url(corner_tl.gif) left top no-repeat;
}
.ds8 {
background:url(corner_tr.gif) right top no-repeat;
}
.ds9 {
background:url(corner_br.gif) right bottom no-repeat;
}
.ds10 {
padding: 4px;
}
.ds10 img {
display:block;
}
HTML:
<div class="ds1">
<div class="ds2"><div class="ds3"><div class="ds4">
<div class="ds5"><div class="ds6"><div class="ds7">
<div class="ds8"><div class="ds9"><div class="ds10">
<img src="images/teddy_bear.jpg" alt="CSS Dropshadow" />
</div></div></div>
</div></div></div>
</div></div></div>
</div>
Source Files:
Download HTML, CSS & Images
Example:
Wonderful blog! I truly love how it? s easy on my eyes as well as the data are well written. I am wondering how I can be notified whenever a new post has been made. I have subscribed to your rss feed which need to do the trick! Have a nice day!
Thank you for such a fantastic blog. Where else could anyone get that kind of info written in such a perfect way? I have a presentation that I am presently working on, and I have been on the look out for such information.
just a quick hello and congratulations to your nice website ! i’ll visit you again!
I am an awful newbie so forgive me if this is a silly question…just curious if I were to change the pixel size, would it be possible to use this as a slightly larger shadow around the edges of my blog. I’ve just switched hosting and I am STRUGGLING to figure this stuff out! Thanks for the tutorial…hopefully I’ll get there.
You can adjust the size of the drop shadow to whatever size you need. Just change the padding on the CSS class “ds10″. The padding size 4px creates a perfect square… so when you create your drop shadow graphics make sure you have them all in a square and just change the padding to the width of your new graphics.
Really nice posts. I will be checking back here regularly.
Great work Eric. I created some of my own shadow images in GIMP, changed the image to a div and it worked like a dream.
Awesome! Thanks for letting me know you found it useful.