prism

How it’s done

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

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

The CSS is where the fun begins

  1. /* Get some basic styles down */
  2.  
  3. div.rainbow {
  4. width: 500px
  5. height: 500px
  6. -webkit-border-radius: 30px
  7. -moz-border-radius: 30px
  8.  
  9. /* Now for some shadow action */
  10. -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;
  11.  
  12. -moz-box-shadow: 1px -1px #b2492c, ...
    100px -100px #0bc3b8;
  13. }

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

  1. <ul class="peri-boxes" id="alkali-metals">
  2. <li>
  3. <a class="green box gas" href="#"> H </a>
  4. </li>
  5. <li>
  6. <a class="orangellow box" href="#"> Li </a>
  7. </li>
  8. <li>
  9. <a class="orangellow box liquid" href="#"> Fr </a>
  10. </li>
  11. </ul>

The CSS is where the fun begins

  1. /* Get some basic styles down */
  2.  
  3. ul.peri-boxes li {
  4. float: left;
  5. width: 52px
  6. height: 52px
  7. margin: 0px
  8. }
  9.  
  10. ul.peri-boxes li a{
  11. float: left;
  12. width: 52px
  13. height: 37px
  14. font-size: 16px
  15. }
  16.  
  17. ul.peri-boxes li a.box{
  18. background-color: #1b2a34;
  19. color: #fff
  20. border: 1px solid #000
  21. -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;
  22. -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;
  23. -webkit-transition: ll 0.12s ease-out
  24. -moz-transition: ll 0.12s ease-out
  25. }
  26.  
  27. ul.peri-boxes li a.box:hover{
  28. background-color: #2daebf;
  29. left: -23px;
  30. top: -23px;
  31. width: 62px;
  32. height: 47px;
  33. z-index: 1;
  34. font-size: 1.5em;
  35. border: 1px solid #2daebf
  36.  
  37. -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;
  38.  
  39. -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;
  40.  
  41. -webkit-animation-name: boxPulse;
  42. -webkit-animation-duration: .7s;
  43. -webkit-animation-iteration-count: infinite;
  44. -webkit-animation-delay: .12s;
  45. }

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

Set up our animation

  1. @-webkit-keyframes boxPulse {
  2. from {
  3. width: 62px;
  4. height: 47px;
  5. left: -23px;
  6. top: -23px;
  7. -webkit-animation-timing-function: ease-out;
  8. }
  9. 50% {
  10. width: 58px;
  11. height: 45px;
  12. top: -19px;
  13. }
  14. to {
  15. width: 62px;
  16. height: 47px;
  17. left: -23px;
  18. top: -23px;
  19. -webkit-animation-timing-function: ease-out;
  20. }
  21. }

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

  1. <div id="beaker">
  2. <span class="bubble">
  3. <span class="glow"> </span>
  4. </span>
  5. </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

  1. @-webkit-keyframes bubbleFloat {
  2. from {
  3. bottom: 110px; -webkit-transform: scale(.3); opacity: 0; -webkit-animation-timing-function: ease-in-out; }
  4. 1% {
  5. bottom: 110px; -webkit-transform: scale(.3); opacity: 0; -webkit-animation-timing-function: ease-in-out; }
  6. 30% {
  7. bottom: 110px; -webkit-transform: scale(.8); opacity: 1; -webkit-animation-timing-function: ease-in-out; }
  8. 95% {
  9. bottom: 545px; -webkit-transform: scale(.3); opacity: 1; -webkit-animation-timing-function: ease-in-out; }
  10. 99% {
  11. bottom: 550px; -webkit-transform: scale(3); opacity: 0; -webkit-animation-timing-function: ease-in-out; }
  12. to {
  13. bottom: 110px; -webkit-transform: scale(.9); opacity: 0; -webkit-animation-timing-function: ease-in-out; }
  14. }
  15. @-webkit-keyframes redPulse {
  16. from { -webkit-box-shadow: 0 0 30px #eb1c2a;}
  17. 50% { -webkit-box-shadow: 0 0 80px #c91a26; }
  18. to { -webkit-box-shadow: 0 0 30px #eb1c2a;}
  19. }

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

  1. div#beaker {
  2. height: 700px;
  3. position: relative;
  4. }
  5. div#beaker span.bubble {
  6. width: 100px;
  7. height: 100px;
  8. position: absolute;
  9. display: block;
  10. left: 120px;
  11. bottom: 110px;
  12. -webkit-border-radius: 200px;
  13. background: -webkit-gradient(radial, center center, 0, center center, 100, from(rgba(239,29,43,.2)), to(rgba(255,255,255,.7)));
  14. -webkit-animation-name: bubbleFloat;
  15. -webkit-animation-duration: 5s;
  16. -webkit-animation-iteration-count: infinite;
  17. }
  18. div#beaker span.glow {
  19. width: 100%;
  20. height: 100%;
  21. position: relative;
  22. display: block;
  23. -webkit-border-radius: 200px;
  24. -webkit-animation-name: redPulse;
  25. -webkit-animation-duration: 2s;
  26. -webkit-animation-iteration-count: infinite;
  27. }
        the beaker

Creative Experiments from ZURB.

Welcome to the ZURB Playground, creative interaction design tools and experiments by the design and engineering teams here at ZURB. We create tools, implementation examples, and other interesting projects that help people design for people.

Subscribe to ZURBnews

Get our monthly newsletter, ZURBnews.
Check out the latest news and buzz