Shadow Experiments

Shadow Experiments

Let’s take a trip to the dark side of the moon! In this tutorial created by the web developers at zurb.com (http://www.zurb.com/playground), we’ll recreate the shadow effect a la Pink Floyd’s album cover of their classic ’73 hit LP. With the help of HTML and CSS, we can do this easily.

The CSS box-shadow and text-shadow let you make awesome designs that may not seem like shadows at all. The point here is how CSS shadows are used to get the effect you want to achieve.

To act as the rainbow element, <div id="rainbow"> is used.

HTML

/* All you need is one element to style. */

<div id="rainbow"> </div>

CSS

    /* 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;

    }

To rotate the CSS rainbow, you can use -webkit-transform or -moz-transform. You can also customize this by adding images, changing colors and place it wherever you want.

For more cool CSS Tutorials you can check out for more | in-dept CSS Tutorials for the masses | a site dedicated to CSS and web development tutorials.