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.

five + seven =

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

You May Also Like

Detect screen size with jQuery and apply a CSS style

Sometimes we need to format the content differently according to the screen resolution of the user. One of the ways to do this is to simply detect the screen width using the screen.width property and change the stylesheet.

CSS-Only Tooltips With Hint.css

Hint.css is a tooltip library that is built with SASS and only uses CSS + HTML. The library uses data attribute, content property, pseudo elements and CSS3 transitions.

CSS Compression

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

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.