CSS3 cross-browser box-shadow

September 4th, 2010 by Alex Leave a reply »

Time goes by and, finally, it’s time to use CSS3. The more you use it, the quicker it becomes a standard.
Now, we’ll take a look at the box-shadow property, it’s not a standard yet, but will be soon so take a look at the next code:

<style type='text/css'>
.box-shadow {
	margin: 10px auto;
	width: 300px;
	padding: 10px;
	font-family: Arial;
	text-align: center;
	border: 1px solid #5bc5c6;
	background: #e8ffff;
	box-shadow: 0 0 8px #006a6b;
	-webkit-box-shadow: 0 0 8px #006a6b;
	-moz-box-shadow: 0 0 8px #006a6b;
	-khtml-box-shadow: 0 0 8px #006a6b;
	-o-box-shadow: 0 0 8px #006a6b;
	-icab-box-shadow: 0 0 8px #006a6b;
}
</style>
<div class='box-shadow'>
<h2>CSS3 box-shadow</h2>
<p>Most modern browsers will display the shadow here nicely. If not, it's time to update your browser</p>
</div>

Looking at the following box, you’ll notice what the arguments of box-shadow mean:

CSS3 box-shadow

Most modern browsers will display the shadow here nicely. If not, it’s time to update your browser

First argument is the left to right offset of the shadow, second argument is the top to bottom offset of the shadow, third one is the shadow width and the last one is the color of the shadow.

Don’t forget to put all the box-shadow variants to be sure all the users can see the shadow.

This page can be found by searching for:

cross browser box shadowbox shadow androidandroid box-shadowbox-shadow androidandroid box shadowandroid browser box shadow



1 comment

  1. Raja says:

    I’m developing Blackberry app using jquery. whether the box-shadow will support or not..