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

    • NC for Hire

      did you get it rockin yet?

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

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

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

Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"⚡JFarrow⌁  
I'm working on the stories and I don't have time to work on the video call you just…"
Sunday
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"if you want I'll give you the codes privately and we'll see if the two of us can make it perfect"
Friday
Eva and ⚡JFarrow⌁ are now friends
NC for Hire
Jun 25
⚡JFarrow⌁ replied to Eva's discussion
For three days now, my networks, Ning 2.0 and Ning 3.0, are incorrectly visible
"Ug... thats not right..  ill send you my phone number in messages and we'll talk it over."
Jun 24
Eva replied to Eva's discussion
Help Help Help
" I just started a test network on Ning. I'm having the same problems there too! No photos, in…"
Jun 21
Eva posted a discussion
Jun 21
Eva posted a discussion
For three days now, my two networks, Ning 2.0 and Ning 3.0, have been displayed incorrectly, they…
Jun 21
⚡JFarrow⌁ replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"looks interesting"
Jun 20
⚡JFarrow⌁ updated their profile photo
Jun 16
Kenny Craig updated their profile
Jun 8
Isabella Wilson updated their profile
Jun 5
Eva liked ⚡JFarrow⌁'s discussion What is going on with Ning? What Do We have to Look Forward To?
Jun 2
More…

Meanwhile, you can check our social media channels