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 😉

Tags:

2 Responses to “How to CSS3 Box Shadow”

  1. JMLeon May 18, 2010 at 4:27 pm #

    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 😉

    • quicoto May 18, 2010 at 7:54 pm #

      Damn!

      I was missing “:” before the “10px” 🙁

      Thanks JMLeon 😉

Leave a Reply

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