Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

TIP: Getting to Know Box Shadow CSS

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.

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

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

    • NC for Hire

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

  • You made this so simple! Thanks!

  • this should work with 3.0 

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

  • So far it will only  let me do it to buttons

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

dark fear updated their profile
4 hours ago
dark fear liked Gerry Regan's blog post Ability to feature and unfeature lost, as is My Network page
5 hours ago
Suzie Nielsen replied to Suzie Nielsen's discussion
Why 3.0?
"I appreciate your honesty... it is not all that I pictured either so it is OK...
The merge sorta…"
8 hours ago
Suzie Nielsen replied to Suzie Nielsen's discussion
Why 3.0?
"Sorry, KOS I forgot to mention you! You are like my right arm, Tech and listens to my rants!"
9 hours ago
Rosas † Negras replied to Suzie Nielsen's discussion
Why 3.0?
"the welcome page is ok the rest looks like a paper to write"
11 hours ago
Rosas † Negras replied to Suzie Nielsen's discussion
Why 3.0?
12 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
i managed to build my mp3 player .. now i need you webmaster
"you are a genius, i knew i could count on you ... thank you very much dear friend"
12 hours ago
Bizz replied to Rosas † Negras's discussion
i managed to build my mp3 player .. now i need you webmaster
"To have a scrollbar show up you need to set a max height to the playlist and then set the…"
13 hours ago
Cindy Dean Mccoy replied to Cindy Dean Mccoy's discussion
approve group members
"Let me know what you found.  I would love a more accurate list.  maybe Ning will use it as a go-by…"
13 hours ago
Suzie Nielsen replied to Suzie Nielsen's discussion
Why 3.0?
"May I see your site?"
13 hours ago
Suzie Nielsen replied to Cindy Dean Mccoy's discussion
approve group members
"Thanks! Glad you made a list! I was working on it!"
13 hours ago
Suzie Nielsen replied to Suzie Nielsen's discussion
Why 3.0?
"What do you mean? I created the network and I hired JFarrow to design my welcome page... please…"
13 hours ago
More…

Meanwhile, you can check our social media channels