Loading
..................
Box-Shadow Demonstration
Description
Basic box-shadow how-to
Created
//
Updated
Tags
Comments
Leave a Comment Markdown supported.
- 22294 Views
- 17 Comments
- 253 Hearts
Loading...
Loading...
This is so awesome!
@TimPietrusky thanks! I always find myself looking up
box-shadow's usage when I need a specific look, so this was handy for meI 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. ^_^
@TabAtkins ah looks like I'll need to debug my
setTimeouts. Thanks for the feedback!Maybe you could add multiple shadows?
Very nice! Agree with Geoff that you should maybe add a mention of multiple shadows.
Nice! I too found that the first two numbers just incremented forever :)
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.
@leemark @geoffyuen thanks for the feedback! I added a mention for multiple shadows. good suggestion!
This is brilliant, I didn't realise that you could add a size property after the blur :)
@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!
@chriscoyier great suggestion! I added a little mini-step to cover it. thanks, Chris!
Man, Brian's pen is always cool. Very entertaining and educating. :D
@monkeyraptor much appreciated!
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 :)
@thomasdobber thanks! glad to hear it
Really cool and helpful!