Blog Of A Boston Web Designer.

Thoughts, Experiments, Processes & Insight.

September 9th, 2009

CSS Entire Image Flexible Drop Shadows

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:

css entire image drop shadow
Share this Post:
  • RSS
  • Twitter
  • Facebook
  • LinkedIn
  • Digg
  • del.icio.us
  • Google Bookmarks
  • FriendFeed
  • Reddit
  • StumbleUpon
  • Technorati
  • email
Posted in Experiments, HTML & CSS, Tutorials, Web Design
36 Comments
Leave a Comment

Spam Protection by WP-SpamFree