|
Written by LIQID
|
|
Friday, 21 January 2005 |
Simple CSS Drop Shadow Tutorial!!!Below I have put compiled a CSS Drop Shadow tutorial with a little help from some other
site(s).
I use this functionality all over the place in my applications and there was a couple different ways that I was
handling this. The first way was if it was an image, I would just use a little Photoshop nudging to make it
produce what I needed. Another way that I made this happen was to use a multiple nested table quilt work reminiscent
of a Rube Goldberg speghetti convention.
But CSS has been there in the past to help me out of situations like this and
indeed its usefulness is still in good stead.
Implementation is very simple. In fact I have included the url of the shadow image
so that it will be easier for you to create. This will give some of your illustrations a subtle 3d accent that can liven up any party.
Before:
|
After:
|
<div class="drop_shadow">
<img src="some_image.png" width="" height="" alt="The Image" />
</div>
|
div.drop_shadow {
background: url('shadow.gif') no-repeat bottom right;
margin: 10px 5px;
padding: 0;
position: relative;
}
div.drop_shadow img {
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -5px 5px 5px -5px;
padding: 4px;
position: relative;
vertical-align: bottom;
}
|
|
|
Last Updated ( Monday, 24 January 2005 )
|
