Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Follow Us on Twitter Our YouTube.com Channel Facebook Page

CSS3 Shadow - Box Shadows Tutorial


Share this Dreamweaver Article:

image with a shadow

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:


box shadow css syntax


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



blog comments powered by Disqus

Dreamweaver Website Templates

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials

paypal