Posted By

kawohi on 09/18/10


Tagged

css CSS3 shadows


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

jearley
hmvrulz
devilsansclue
jplr
baczoni
droopysignal


Cross Browser CSS Box Shadows w/ RGBA


 / Published in: CSS
 

box-shadow is a new CSS3 Property that adds a drop shadow behind block elements.\r\nWith RGBA You can set the transparency of the CSS box shadows.

  1. .box-shadows {
  2. box-shadows: 2px 2px 5px rgba(0, 0, 0, .7); /* Future Proof & IE9 */
  3. -webkit-box-shadows: 2px 2px 5px rgba(0, 0, 0, .7); /* Webkit Browsers */
  4. -moz-box-shadows: 2px 2px 5px rgba(0, 0, 0, .7); /* Firefox */
  5. -o-box-shadows: 2px 2px 5px rgba(0, 0, 0, .7); /* Opera */
  6. /* The Ugly Code: For IE Browsers */
  7. -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* IE8 */
  8. filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); /* IE5 - 7 */
  9. }

Report this snippet  

You need to login to post a comment.