Shadow Experiments: Have Some Fun with CSS Shadows

Connor wrote this on in . It has 7 comments.

Shadows are cool. We started out having to create our shadows in Photoshop and attaching them as background images. Now our lives are made easier with CSS. But really, all we can do is add gratuitous amounts of box shadows to our elements, right? Or, we can only really add unnecessary shadows to our text, right? Wrong.

Using a little HTML and some CSS we take a trip to the dark side of the moon, create a periodic table and make a radioactive love concoction. We even throw some CSS animations in there to add to the party.

Check It Out ยป

See more Product Engineering and Design Jobs on Job Board from ZURB.

7 comments

Jason Spencer (ZURB) says

For some reason, I knew that you'd have some Unobtanium - the best named element ever - on the chart. I didn't expect it to be so big though. Also, it's amazing how well they downgrades for Firefox, but the real beauty shines in Safari.

Great work. Loving it. Thank you!


LazyAndroid (ZURB) says

Why do you need 20 shadows per color? When I replicate this experiment I only need 1 shadow per color (the biggest one in every color).

Am I missing something?


Mike Mai (ZURB) says

this is awesome! good work


Connor (ZURB) says

@Jason & Mike - Thanks guys! Be sure to let us know if you use these techniques in any future projects.

@LazyAndroid - Good catch! For larger elements your solution works great. Problems arise when you try to apply that technique to type, for example. The illusion of a solid block gets lost.


Jeno B. (ZURB) says

Nice effects, is like using magic...and really is...CSS magic.


ximi (ZURB) says

Hello! Your work is strong! I was impressed! Learn the CSS becomes so much fun! You should teach it in schools! See you soon Ximi


Mark Smith (ZURB) says

CSS newbie here. I think I have to study more before I start to implement this stuff... Well anyway I bookmarked this post for future reference. Thanks!



Get a job, nerd!

via Job Board from ZURB