Return to Snippet

Revision: 38444
at January 3, 2011 07:41 by blueocto


Initial Code
.shadow {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Initial URL


Initial Description
<p>Believe me or not, but all of these web browsers we can offer shadows with CSS:</p>

<pre><code>* Firefox 3.5+
* Safari 3+
* Google Chrome
* Opera 10.50
* Internet Explorer 5.5
</code></pre>

<p>The first value describes the x-offset (could be a negative value as well), the second the y-offset, the third the radius of the shadow and the fourth the color of it. Opera 10.50 (currently only available on Windows) is the first web browser to have an implementation without a vendor-prefix, whereas Firefox, Safari and Google Chrome all need it for now.</p>

<p>(The problem with the DropShadow filter is that the shadow is solid, and not fluffy as desired, although it offers easy values for X and Y. The Shadow filter on the other hand offers a nice shadow, but instead of x and y offset, we need to specify direction and strength the set the length of the shadow.)</p>
<p> So, this code makes it work in all those web browsers:</p>

Initial Title
Drop shadow with CSS for all web browsers

Initial Tags


Initial Language
CSS