Drop shadows with CSS
The Georgia O'Keeffe painting on this page was given a drop shadow using CSS. This technique lets you give photos and other illustrations a neat drop shadow without having to manipulate them in PhotoShop (or whatever). This technique is documented on A List Apart, among other places. Use a transparent .PNG with the drop shadow in it as a background image to the DIV containing the picture. Use negative margin settings on the image itself to reveal the drop shadow underneath. You need to float the DIV so it is not full width: you can float left or right.
Because some Internet Explorer doesn't support transparent PNGs, you can give them a GIF instead by exploiting the fact that IE also does not recognise
!important.
If this is too much trouble, it is possible to do
drop shadows without an image for the shadow in CSS alone.
The CSS:
.shadowed {
float:right;
background: url(drop-shadow.png) no-repeat bottom right !important;
background: url(drop-shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.shadowed img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #999;
margin: -6px 6px 6px -6px;
padding: 4px;
}
The HTML:
<div class="shadowed" >
<img src="img/FromTheLake.jpg">
</div>
You can do the same sort of thing with blockquotes.
When, in the chronicles of wasted time, I see prescriptions of the fairy lights... There is a ant hill far away, without a pretty ball. Away into danger, a quid for a bed the little lordly bus was slaying them dead. How is the crime for all good men to run to the paid of the arty?
There's a problem with Internet Explorer and negative margins, so exploit the
!important hack again. No! Don't hack! Use conditional comments (see CSS Notesto give Intrenet Explorer its own stylesheet.
.shadowed blockquote {
display: block;
font-weight:bold;
position: relative;
background-color: #ffc;
border:1px solid #999;
margin: -6px 6px 6px -6px !important;
margin: 0px 6px 6px 0px;
padding: 10px;
max-width: 800px;
}
The HTML:
<div class="shadowed" >
<blockquote>Nonsense</blockquote>
</div>