Advanced Search

Drop shadow with CSS for all web browsers

/ Published in: CSS
Save to your folder(s)
<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>

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .shadow {
  2. 	-moz-box-shadow: 3px 3px 4px #000;
  3. 	-webkit-box-shadow: 3px 3px 4px #000;
  4. 	box-shadow: 3px 3px 4px #000;
  5. 	/* For IE 8 */
  6. 	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
  7. 	/* For IE 5.5 - 7 */
  8. 	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
  9. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.