Cross-browser CSS3 box-shadow

CSS3 box-shadow

.titanic { float: none; }

There is a simple way for creating cross-browser box-shadow in all modern and popular browsers including Internet Explorer (Opera only since 10.50 pre-alpha version).

CSS Box-shadow (except IE8)

You can use following code for Firefox, Safari, Chrome and Opera 10.50 pre-alpha:

.box-shadow {
-moz-box-shadow: 10px 10px 10px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
box-shadow: 10px 10px 10px #000; /* CSS3 */

You could use a htc file and reference that in your CSS files for IE8, however web sites generally do not load that fast using this method.

If using up to date browsers only

If you or the user requirements of the project you are working on only requires that you meet up to date browser versions of Firefox, Safari or Chrome. Using the following CSS rule should be sufficient:

.box-shadow {
  box-shadow: 10px 10px 10px #000; /* CSS3 */

Why only call the rule ‘.box-shadow’? It’s simple, you can add multiple classes to html elements so it’s easy to add the above class as a new class or existing class attribute.

Have fun!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.