Product Design Training from the Experts at ZURB

 
 
prism

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.

The HTML is simple enough

/* All you need is one element to style. */
 
<div id="rainbow"></div>

The CSS is where the fun begins

/* Get some basic styles down */
 
div.rainbow {
  width: 500px
  height: 500px
  -webkit-border-radius: 30px
  -moz-border-radius: 30px
         
  /* Now for some shadow action */
  -webkit-box-shadow: 1px -1px #b2492c, 2px -2px #b2492c, 3px -3px #b2492c, 4px -4px #b2492c, 5px -5px #b2492c, 6px -6px #b2492c, 7px -7px #b2492c, 8px -8px #b2492c, 9px -9px #b2492c, 10px -10px #b2492c, ...
  11px -11px #b2492c, ...
  21px -21px #ea5f24, ...
  31px -31px #ea5f24, ...
  41px -41px #f8c617, ...
  51px -51px #f8c617, ...
  61px -61px #068e8c, ...
  71px -71px #068e8c, ...
  81px -81px #0bc3b8, ...
  91px -91px #0bc3b8, ...
  100px -100px #0bc3b8;
         
  -moz-box-shadow: 1px -1px #b2492c, ...
  100px -100px #0bc3b8;
}

Example 2:

Periodic Table

How it's done

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.

This should come in handy while you're tracking down and killing an alien race.

The HTML

<ul class="peri-boxes" id="alkali-metals">
  <li>
    <a class="green box gas" href="#"> H </a>
  </li>
  <li>
    <a class="orangellow box" href="#"> Li </a>
  </li>
  <li>
    <a class="orangellow box liquid" href="#"> Fr </a>
  </li>
</ul>

The CSS is where the fun begins

/* Get some basic styles down */
         
ul.peri-boxes li {
  float: left;
  width: 52px
  height: 52px
  margin: 0px
}
         
ul.peri-boxes li a {
  float: left;
  width: 52px
  height: 37px
  font-size: 16px
}
         
ul.peri-boxes li a.box {
  background-color: #1b2a34;
  color: #fff
  border: 1px solid #000
  -webkit-box-shadow: 1px 1px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000, 5px 5px #000, 6px 6px #000, 7px 7px #000, 8px 8px #000;
  -moz-box-shadow: 1px 1px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000, 5px 5px #000, 6px 6px #000, 7px 7px #000, 8px 8px #000;
  -webkit-transition: ll 0.12s ease-out
  -moz-transition: ll 0.12s ease-out
}
         
ul.peri-boxes li a.box:hover {
  background-color: #2daebf;
  left: -23px;
  top: -23px;
  width: 62px;
  height: 47px;
  z-index: 1;
  font-size: 1.5em;
  border: 1px solid #2daebf
         
  -moz-box-shadow: 1px 1px #007d9a, 2px 2px #007d9a, 3px 3px #007d9a, 4px 4px #007d9a, 5px 5px #007d9a, 6px 6px #007d9a, 7px 7px #007d9a, 8px 8px #007d9a;
         
  -webkit-box-shadow: 1px 1px #007d9a, 2px 2px #007d9a, 3px 3px #007d9a, 4px 4px #007d9a, 5px 5px #007d9a, 6px 6px #007d9a, 7px 7px #007d9a, 8px 8px #007d9a;
         
  -webkit-animation-name: boxPulse;
  -webkit-animation-duration: .7s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .12s;
}

Set up our animation

To give our periodoc table that extra little something. We make a -webkit animation that makes them float in the air.

@-webkit-keyframes boxPulse {
  from {
    width: 62px;
    height: 47px;
    left: -23px;
    top: -23px;
    -webkit-animation-timing-function: ease-out;
  }
  50% {
    width: 58px;
    height: 45px;
    top: -19px;
  }
  to {
    width: 62px;
    height: 47px;
    left: -23px;
    top: -23px;
    -webkit-animation-timing-function: ease-out;
  }
}

Example 3:

Love Potion No. 9

How it's done

Get that lovin' feelin' back

We've all been there. The person you love most doesn't love you back. While we don't suggest you give them a "floorie", you can create a nifty love potion with CSS bubbles.

For our little concoction, we use a simple image for the beaker and then creat the bubbles entirely with markup and CSS.

The HTML for our bubble

<div id="beaker">
  <span class="bubble">
    <span class="glow"> </span>
  </span>
</div>

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.

Set up our animations

@-webkit-keyframes bubbleFloat {
  from {
    bottom: 110px; -webkit-transform: scale(.3); opacity: 0; -webkit-animation-timing-function: ease-in-out;
  }
  1% {
    bottom: 110px; -webkit-transform: scale(.3); opacity: 0; -webkit-animation-timing-function: ease-in-out;
  }
  30% {
    bottom: 110px; -webkit-transform: scale(.8); opacity: 1; -webkit-animation-timing-function: ease-in-out;
  }
  95% {
    bottom: 545px; -webkit-transform: scale(.3); opacity: 1; -webkit-animation-timing-function: ease-in-out;
  }
  99% {
  bottom: 550px; -webkit-transform: scale(3); opacity: 0; -webkit-animation-timing-function: ease-in-out;
  }
  to {
    bottom: 110px; -webkit-transform: scale(.9); opacity: 0; -webkit-animation-timing-function: ease-in-out;
  }
}
@-webkit-keyframes redPulse {
  from { -webkit-box-shadow: 0 0 30px #eb1c2a;}
  50% { -webkit-box-shadow: 0 0 80px #c91a26; }
  to { -webkit-box-shadow: 0 0 30px #eb1c2a;}
}

Now just rinse and repeat to create all your bubbles!

These are just a few examples of how you can use CSS box shadows to create some cool effects. Let us know how you're using them to make the web more awesome.

Make 'em look bubbly

div#beaker {
  height: 700px;
  position: relative;
}
div#beaker span.bubble {
  width: 100px;
  height: 100px;
  position: absolute;
  display: block;
  left: 120px;
  bottom: 110px;
  -webkit-border-radius: 200px;
  background: -webkit-gradient(radial, center center, 0, center center, 100, from(rgba(239,29  ,43,.2)), to(rgba(255,255,255,.7)));
  -webkit-animation-name: bubbleFloat;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
}
div#beaker span.glow {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  -webkit-border-radius: 200px;
  -webkit-animation-name: redPulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}
        the beaker

Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.

×

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×