For a while now I’ve been used to creating a box with a shadow in Photoshop or Illustrator and using the images as the background of an element. I’d heard of a way to do it purely with css3 but I didn’t look into it too much until recently. Turns out it is really easy to implement.
First you need a box:
css:
.box{
background-color:#BBB;
height:100px;
width:100px;
margin:20px;
}
html:
<div class="box"></div>
Now, you need to add the css3 box-shadow property:
box-shadow:0px 0px 15px #888;
There are only a few things to know about this property. The property takes three length values, and a color. The length values are a horizontal offset, a vertical offset and a blur. The offsets move the shadow down and to the right, but negative numbers will move the box up and to the left. The blur determines how many pixels wide the shadow will appear. Higher numbers for this value makes the effect a bit more subtle. The color is simply the color of the shadow.
The only thing you need to add to this property is some browser specific code. For Firefox, you need to insert -moz- in front of the property. For Safari and Chrome, you need to insert -webkit-. Opera doesn’t require these prefixes, so I left a third version without them. Opera only supports this functionality in their latest version (10.5) which is currently only available for Windows. Also, for anyone who still cares, this effect does not work in IE. (If you are viewing this post in IE or an older browser version, you might not be able to see the shadow effects in the examples below.) Your final code should look something like this:
css:
.box{
background-color:#BBB;
height:100px;
width:100px;
margin:20px;
-moz-box-shadow:0px 0px 15px #888; /* Firefox */
-webkit-box-shadow:0px 0px 15px #888; /* Safari and Chrome */
box-shadow:0px 0px 15px #888; /* Opera */
}
html:
<div class="box"></div>
I’ll make some adjustments to the shadow now. I’ll move the shadow down and to the left, and decrease the blur to make it stand out more:
css:
.box{
background-color:#BBB;
height:100px;
width:100px;
margin:20px;
-moz-box-shadow:-5px 5px 5px #888; /* Firefox */
-webkit-box-shadow:-5px 5px 5px #888; /* Safari and Chrome */
box-shadow:-5px 5px 5px #888; /* Opera */
}
html:
<div class="box"></div>
