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!

About Desi Reuben-Sealey

Desi is a UXC currently doing UX/UI Black Ops for applications, mobile and web, is a enthusiastic PADI scuba diver, a retired pro UK basketball player, Neo Soul music lover, an enthusiastic charity worker who likes to give to others is various ways.

Short URL:
QR Code:

Leave a Reply