Product Design Training from the Experts at ZURB

Shadow Experiments

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.

Note: Demo works best in Safari 4.x and Chrome. Firefox...not so much

What’s so great?

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.

The CSS box-shadow and text-shadow allow us to create some pretty cool design elements that don't even look like shadows. The key is to think about how CSS shadows work and use them to get the desired effect. Don't limit your thinking into only using them mere drop shadows.

The first example usage, seen above with the recreation of the Dark Side of the Moon album cover, may seems a little impractical but you can use these same techniques to create other design elements.

Any colour you like

For this example we'll use a single <div id="rainbow"> to act as our rainbow element.

The interesting part comes with the CSS. Now you'd think that each element on the page would only be allowed to use one shadow but that would just be silly. The truth is that you can add up to 999 shadows to a single element. Crazy huh?

To create our rainbow, we're going to only use 100 shadows. You just have to separate each shadow by a comma. In our code on the left we only show the first 10 shadows in full. Each color bar is made up of 20 shadows. Change up the colors!

Don't stop there!

You can use -webkit-transform or -moz-transform to rotate the new CSS rainbow and place it how ever you'd like. Also, don't hestiate to add in an image or two to complete whatever look you're going for.

She blinded me with science

So let's say you're a science teacher who is also an awesome designer. The only thing for you to do is make the the periodic table of elements with HTML and CSS! We made our grid of elements using a bunch of ul's but you can apply these rules to pretty much anything. Come to think of it, someone should create some super awesomer buttons using some killer box shadows.

The HTML for our bubble

With our bubbles all made, now we need them to act like bubbles. We could use Javascript but that's no fun. Just use CSS!

There are a few things we need to animate. The vertical postioning is obvious, but we also want to scale the bubbles as they travel up. Lastly, we need to account for the "popping." Take a look at bubbleFloat to see how we did it.

In addition to making the bubbles float up, we also need to make the bubles glow to give'em that radioactive look. Look at redPulse to see how we did it.

Check out other Playground experiments

Get started with finishing

Team up with our designers to see how our iterative design process can get your project going. Equipped with our Progressive Design process, visual skills, and the coding chops that brought you Foundation, ZURB Studios is ready to jump in and get your product out to the masses!