CSS Drop Shadow
From What's new, new media?
A drop shadow is a graphical effect that simulates the shadow of an object and gives the appearance of further dimensions. Though CSS does not have a 'Drop Shadow' property here's how it's possible to leverage style sheets to keep your images separate from their drop shadow. What follows is a tutorial for how to create a drop shadow using CSS. As is the nature of a wiki, please edit, refine and generally make this tutorial more accurate / easy to follow.
Contents |
[edit] Raw Materials For Creating a Drop Shadow using CSS
Use the images and code below to recreate this drop shadow effect right now.
[edit] Images
[edit] CSS Code
- <style type="text/css">
- .img-shadow {
- float:left;
- background: url(ShadowAlpha.png) no-repeat bottom right !important;
- background: url(Shadow.gif) no-repeat bottom right;
- margin: 10px 0 0 10px !important;
- margin: 10px 0 0 5px;
- }
- .img-shadow img {
- display: block;
- position: relative;
- background-color: #fff;
- border: 1px solid #a9a9a9;
- margin: -6px 6px 6px -6px;
- padding: 4px;
- }
- </style>
[edit] XHTML Code
- <body>
- <div class="img-shadow">
- <img src="Rothschild.gif" alt="Rothschild Photo">
- </div>
- </body>
