TIP: Getting to Know Box Shadow CSS

[⚡JFarrow⌁]

Over the past couple of weeks, I've had several other NCs ask me about CSS3 Box shadows, so i figured I'd give you all a few pointers I've learned over the past couple of years.

Understanding Values

Take a look at this example:

box-shadow: 3px 3px 10px 5px #000;

 

• A positive value for the horizontal offset draws a shadow that is offset to the right of the box, a negative length to the left.
• The second length is the vertical offset. A positive value for the vertical offset basically offsets the shadow down, a negative one up.
• You’re not allowed to use negative values for blur radius. The larger
  the value, the more the shadow’s edge is blurred, as it can be seen above.
• Spread distance positive values cause the shadow shape to expand in all directions by the specified radius.
• Negative ones cause the shadow shape to contract.
• The color is the color of the shadow.
• The inset keyword (missing above), if present,changes the drop shadow from an outer shadow to an inner shadow

There are tons of Box Shadow Generators out there to help you with getting your box shadow just right, but i thought it might be helpful to understand the values being used.

[Randy L. Vollett]

Thanks for this tip. My head doesn't hurt anymore trying to figure this out. lol.

[⚡JFarrow⌁]

terrific!  this was the goal...glad you're getting some use of this tip!

[Sarah Landry]

You made this so simple! Thanks!

[Lady Shadow )0(]

this should work with 3.0 

[Lady Shadow )0(]

How would I put that in my NING 3.0 what would be the code?  I am using rounded corners

[Lady Shadow )0(]

So far it will only  let me do it to buttons

[⚡JFarrow⌁]

did you get it rockin yet?

[Lady Shadow )0(]

Nope  thanks. Not sure if cause I have  floating social media side bar, and  site curser .hmm Thanks

[Lady Shadow )0(]

http://blackmoonsociety.ning.com/ this is my site.  I have a bit of code only does buttons if I add anything else no work