Code-Snippet: Cross-Browser CSS3 Box-Shadow

How to create a cross-browser CSS3 Box-Shadow.
Use -moz for Mozilla, -webkit for Chrome and Safari and -o for Opera:

.box-shadow {
  -moz-box-shadow: 10px 10px 10px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
  -o-box-shadow: 10px 10px 10px #000; /* Opera */
  box-shadow: 10px 10px 10px #000; /* CSS3 */
}
    • Yanko Ivanov
    • November 10th, 2011

    Opera supports box shadow as well, _since v10.5_. Actually, they support two flavours: -o-box-shadow and box-shadow. Works either way. 🙂

      • tdeuling
      • November 10th, 2011

      Thanks for that notice. 🙂 I just add these..

  1. Cross browser == across ALL browsers

    The major browsers at this moment include IE7 & IE8. This ain’t working for both of them.

      • tdeuling
      • November 10th, 2011

      You’re right Robin.. I hate the IE 🙁
      But i currently found a nice solution: http://fetchak.com/ie-css3/
      A script to provide Internet Explorer support for some new styles available in the upcoming CSS3 standard.
      Try it 🙂

  1. No trackbacks yet.