How to CSS3 Box Shadow

An other cool CSS3 feature is the Box Shadow.

The only diference between Box Shadow and Text Shadow.

The Box Shadow is used for boxes and the Text Shadow for texts ๐Ÿ˜›

Ok ok let me explain myself.

Today we're going to use this 3 styles:

  • box-shadow: Xpx Ypx Zpx Color;
  • -moz-box-shadow: 5px 5px 5px #888;
  • -webkit-box-shadow: 5px 5px 5px #888;

Where each parameter means:

X = horizontal offset
Y = vertical offset
Z = blur
Color = shadow color

Code

And the div

Example

You should see a cool div below...

Developer's Blog

Image

And how it looks like if your browser can't process the div above:

Code it Yourself

Take my example and start playing with it. Like you saw I used also the border-radius and the text-shadow.

Combine 'em all ๐Ÿ˜‰

2 comments
  • I thought it was weird my Google Chrome doesn’t round those corners, but actualy it’s because you didn’t place the : Properly:

    [code]
    -webkit-border-radius : 10px;
    [/code]

    Take a look at it ๐Ÿ˜‰

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*