WebDesign&Such

Using Box-Shadow with CSS3

ilz

I showed in a previous post how to use text-shadow with CSS3. Now it’s time to move on to something that’s just about as exciting, using Box-Shadow with CSS3. Throw it on a div, on a table, on an image.. anything goes! Of course it doesn’t work in every browser, but then again not much I talk about on this site does!

Check out the demo to see some examples and then keep reading to find out how to use Box-Shadow.

View Demo

Below are the examples from the demo page, with the code below it which made the shadow. For each shadow, you need to declare the dimensions for -webkit-box-shadow: and -moz-box-shadow:, which takes care of any browser that supports the box-shadow at this point.

The three numbers are similar to using text-shadow with CSS3, the first number is how far right the shadow is from the “box”, the next number is how far below, and the final number is the amount of blur for the shadow. Finally, you declare the color of the shadow.

You’ll see on a couple of them I used the awesome border-radius to show how the shadow wraps around a rounded corner. If you need a refresher on the border-radius declarations, look here. If you want to check out some examples and code of text-shadow, look here.

{
-webkit-box-shadow: 2px 2px 4px #000;
-moz-box-shadow: 2px 2px 4px #000
}

{
-webkit-box-shadow: 6px 6px 6px #444;
-moz-box-shadow: 6px 6px 6px #444
}

{
-webkit-box-shadow: 4px 4px 6px #F6C;
-moz-box-shadow:4px 4px 6px #F6C
}

{
-webkit-box-shadow: 6px 6px 10px #000;
-moz-box-shadow: 6px 6px 10px #000;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border:15px solid #F90
}

{
-webkit-box-shadow: 6px 6px 10px #990;
-webkit-border-radius:12px;
-moz-box-shadow: 6px 6px 10px #990;
-moz-border-radius:12px;
border:12px solid #000
}

{
-webkit-box-shadow: 0px 0px 20px #6F0;
-moz-box-shadow: 0px 0px 20px #6F0
}

{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000
}

Related Posts:

• Using Text-Shadow with CSS3
• Rounded corners with CSS3 ~ border-radius
• Create a Navigation with an Unordered List & CSS3
• Simple form styling with CSS
• Internet Explorer Conditional Statements & Hacks

Share and Enjoy:

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Tags: Box-Shadow, CSS, CSS3

This entry was posted on Monday, November 23rd, 2009 at 4:20 pmand is filed under CSS, Code Snippets, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

8 Responses to “Using Box-Shadow with CSS3”

• When Everything need in Words » Blog Archive » Five Means to Keep Visitors Coming Back Says:
  November 24th, 2009 at 4:33 am

  [...] Using Box-Shadow with CSS3 | WebDesign & Such [...]
• Is Dreamweaver Acceptable for Me? | Dream Creature Says:
  November 24th, 2009 at 12:01 pm

  [...] Using Box-Shadow with CSS3 | WebDesign & Such [...]
• Photo Shop Training for Beginners | Dream Creature Says:
  November 25th, 2009 at 9:08 am

  [...] Using Box-Shadow with CSS3 | WebDesign & Such [...]
• Specialized Web Design for Businesses | Dream Creature Says:
  November 25th, 2009 at 12:28 pm

  [...] Using Box-Shadow with CSS3 | WebDesign & Such [...]
• What Would you do Without Dreamweaver. | Dream Creature Says:
  November 25th, 2009 at 3:38 pm

  [...] Using Box-Shadow with CSS3 | WebDesign & Such [...]
• The Benefits Of Technical Documentation | Dream Creature Says:
  December 2nd, 2009 at 2:00 am

  [...] Using Box-Shadow with CSS3 | WebDesign & Such [...]
• Your Business Needs To Reach Your Target Audience NOW! | Dream Creature Says:
  December 13th, 2009 at 1:47 am

  [...] Using Box-Shadow with CSS3 | WebDesign & Such [...]
• Free Webmaster Tool to Promote Your Website – Create a 468×60 Banner | Dream Creature Says:
  December 26th, 2009 at 12:57 am

  [...] Using Box-Shadow with CSS3 | WebDesign & Such [...]

Leave a Reply