CSS3 Shadow - Box Shadows Tutorial
Share this Dreamweaver Article:
Discover how to render shadows around your images and your div tags using CSS3 box shadows. Just like CSS3 rounded Corners, achieving a shadow around an image or a div tag would have required another image to be placed as a background or to have a pre-rendered image from Photoshop or Fireworks made. That was a laborious task. Now you can apply a box shadow in a matter of seconds using the CSS3 box shadow attribute.
1. The CSS3 Drop Shadow Code
The code for the shadow using css is a very simple line of code although it does requite some explanation. You will need to use the Moz prefix for Firefox and SeaMonkey and the Webkit prefix to get the CSS3 box shadows to work in Chrome and Safari.
-moz-box-shadow: 10px 10px 5px #000; -webkit-box-shadow: 10px 10px 5px #000;
So the basic css shadows syntax is ‘box-shadow’. That’s simple enough but you will need to specify the location of the css shadow. In other words, do you want the css shadow box on the left or the right? Do you want the CSS shadow on the top or the bottom?
Firstly, you must set the horizontal offset for the CSS shadow. If for instance you were to set a horizontal offset of 8 pixels, the css shadows will naturally sit to the right of the attribute being manipulated like a div or an image. If you were to set a minus figure of -8 pixels, the CSS box shadow will be set to the left of the attribute.
For the vertical offset, a positive figure of 8 pixels will set the CSS shadow box to the bottom of the attribute. Setting a CSS3 shadow with a negative figure of -8 pixels will set the box shadow at the top of the attribute. Take a look at this CSS3 shadows illustration:
The third figure for setting a shadow with CSS is for the blur radius of the box shadow. Setting the blur radius to 0 pixels will make a sharp shadow with no lowered opacity or blending. The higher you set the figure for the blur radius, the blurrier or more smudged the CSS3 shadow will become.
Lastly you need to set the shadow color with CSS. You can either use RGB colors or Hexadecimal colors. All of the examples used on this page are using hexadecimal web safe colors.
Take a look at the shadow CSS3 guide below so you will be able to set the right CSS3 box shadows or drop shadows for you images or div tags.
Firefox and SeaMonkey
-moz-box-shadow: 8px 8px 5px #333;
Bottom and Right
-moz-box-shadow: -8px 8px 5px #39F;
Bottom and left
-moz-box-shadow: 8px -8px 5px #993;
Top and Right
-moz-box-shadow: -8px -8px 5px #000;
Top and Left
Apple Safari -and- Google Chrome
-webkit-box-shadow: 8px 8px 5px #333;
Bottom and Right
-webkit-box-shadow: -8px 8px 5px #39F;
Bottom and left
-webkit-box-shadow: 8px -8px 5px #993;
Top and Right
-webkit-box-shadow: -8px -8px 5px #000;
Top and Left
If you would like to download a free CSS3 box shadow guide including some practice Exercise Files then click on the download exercise files button. The practice files are inside of a zipped file folder and you can extract the folder to your desktop and will allow you to practice making a shadow using CSS.
Related Tutorials:
CSS3 Box Shadows - Video Tutorial
CSS3 Rounded Corners - Article Tutorial
CSS3 Rounded Corners - Video Tutorial
CSS3 Text Shadows - Video Tutorial