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 *

eighteen − 16 =

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

You May Also Like

Useful CSS3 Tools

CSS3 getting more and more popularity in more and more websites. However, there are still those out there that are holding out on learning it and using it. This is probably due to the fact that it’s not fully supported yet in all browsers.

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.
Read More

HTML & CSS: A Beginner’s Guide

HTML & CSS: A Beginner's Guide teaches you with the aid of colourful screenshots and diagrams how to create web sites and style them using Cascading Style Sheets. This book offers practical guidance, examples and know how without the long boring technical fluff and how to apply it to related Web development issues.

5+ Great Responsive CSS Frameworks

Using responsive CSS frameworks developers can speed up the delivery and improve the quality of responsive CSS code. Since responsive web design is in high demand a lot of frameworks have been created to streamline the delivery of high quality mobile-ready websites.