cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

Basic box-shadow how-to


  1. This is so awesome!

  2. @TimPietrusky thanks! I always find myself looking up box-shadow's usage when I need a specific look, so this was handy for me

  3. I was originally linked to #stats and didn't scroll up to the pen properly, and triggered a bug - the animations ran properly, but the first offset just incremented continuously forever. It was over 200px when I reloaded the page, wondering what was up. ^_^

  4. @TabAtkins ah looks like I'll need to debug my setTimeouts. Thanks for the feedback!

  5. Maybe you could add multiple shadows?

  6. Very nice! Agree with Geoff that you should maybe add a mention of multiple shadows.

  7. Nice! I too found that the first two numbers just incremented forever :)

  8. So rad. I wonder if it would be easy to add a mini-step for negative spread? That's tremendously useful I find for one-sided shadows.

  9. @leemark @geoffyuen thanks for the feedback! I added a mention for multiple shadows. good suggestion!

  10. This is brilliant, I didn't realise that you could add a size property after the blur :)

  11. @ryanmcnz it looks like the timeouts just weren't getting cleared when leaving the screen. Also, Chrome (not sure about other browsers) slows down timeouts to one call per second. thanks for the feedback!

  12. @chriscoyier great suggestion! I added a little mini-step to cover it. thanks, Chris!

  13. Man, Brian's pen is always cool. Very entertaining and educating. :D

  14. Great pen! One of my colleagues wants to learn a bit more about CSS, this is definitely one of the pens I am going to show him. Thanks :)

  15. @thomasdobber thanks! glad to hear it

  16. Really cool and helpful!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.