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

FORUM

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

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.

Announcements

 

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

Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
Step-by-step migration guide
"Hi there!

We do not have such list at the moment, but I will advise with the migration manager if…"
13 hours ago
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
Why should I migrate?
"Hi Larry!

No, you can stay on 2.0 platform if you prefer, migration is not mandatory.

Bets regar…"
13 hours ago
Anastasia_Ning_Support replied to Lauren's discussion
Looking to Monetize and Improve Engagement
"Hello Lauren! 
I am very sorry to hear it. Unfortunately, there is no way to adjust the sensitivity…"
13 hours ago
Tag Molekulix, Chetan Kumbhar, mariusmv marius and 9 more joined Ning Creators Social Network
13 hours ago
Anna_Ning_Support replied to J.Ayvar's discussion
We need this in Ning 3.
"Hello,
We have the default welcome email that includes the name of the member and the features he o…"
23 hours ago
Naveen Jain updated their profile
Thursday
Linda Hertz liked Anastasia_Ning_Support's discussion Join our new webinar on August 22nd!
Wednesday
Stuart Alexander replied to Anastasia_Ning_Support's discussion
Migration FAQ
"Like Adrian, I am not finding the amount of storage I am using. It does not show up as in the examp…"
Wednesday
This Is bully replied to Lauren's discussion
Looking to Monetize and Improve Engagement
" LOL It happened to a very active member of mines every post they made sent it to spam so I created…"
Wednesday
Lauren posted a discussion
Hello,Please take a look at our page www.booktown.ning.com, we're looking for ways of increasing me…
Wednesday
Fred St Laurent replied to Anastasia_Ning_Support's discussion
Step-by-step migration guide
"I would like to see this list as well please."
Wednesday
COIFFURANCE, Gwendolyn LaFae, ICM Redactie and 7 more joined Ning Creators Social Network
Wednesday
More…

Meanwhile, you can check our social media channels