Posted By

blueocto on 01/03/11


Tagged

drop-shadow


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

neex123
konkas


Drop shadow with CSS for all web browsers


 / Published in: CSS
 

Believe me or not, but all of these web browsers we can offer shadows with CSS:

* Firefox 3.5+
* Safari 3+
* Google Chrome
* Opera 10.50
* Internet Explorer 5.5

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.

(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.)

So, this code makes it work in all those web browsers:

  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  

You need to login to post a comment.