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


box-shadow for modern browsers (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 */
}

If you are using an up to date version of Firefox, Safari or Chrome, it’s enough to use just this CSS:

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

box-shadow for Internet Explorer

Download the ie-css3.htc file, put it in the same place where your CSS file, and then use this CSS code for Internet Explorer to make

box-shadow

:

.box-shadow {
behavior: url(ie-css3.htc);
}

It’s reasonable to connect this CSS through conditional comments.

0 Shares:
Leave a Reply

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

nineteen − eleven =

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

You May Also Like

Create CSS3 dropdown menu

how to create your own CSS3 dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup.

CSS Compression

In this article we provided two practical methods for compressing CSS documents.

Border-radius: create rounded corners with CSS!

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.

Text Resizing With jQuery

Want to allow visitors to increase or decrease the text size (font size) on your website? I’m going to show you how - using jQuery (a great JavaScript library).