Fandom

What's new, new media?

CSS Drop Shadow

467pages on
this wiki
Add New Page
Talk0 Share

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.


Raw Materials For Creating a Drop Shadow using CSSEdit

Use the images and code below to recreate this drop shadow effect right now.

ImagesEdit

CSS CodeEdit

<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>

XHTML CodeEdit

<body>
<div class="img-shadow">
<img src="Rothschild.gif" alt="Rothschild Photo">
</div>
</body>

Reference LinksEdit

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.