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 *

ten + 12 =

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

You May Also Like

CSS3 Gradient Buttons

CSS3 Buttons – a set of scalable CSS3 gradient buttons created with pure CSS, without any image or Javascript.

How to design a beautiful CSS3 search form

Search box on site is one of the elements most frequently used. If you want to improve user experience in a simple way, and make it easy to search and find content for your users, then you have to add a search form on your website.

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.