This HTML and CSS tutorial by the zurb.com web developers recreates the shadow effect a la Pink Floyd’s album cover of their classic ’73 hit LP.

For 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;

}

You can use either -webkit-transform or -moz-transform to rotate the CSS rainbow. This can also be customized with extra images and colors.

Incoming search terms for the article:

• html shadow
• pink floyd css templates
• shadow effect css3
• shadow experiments
• comments on html development
• timeline css experiment
• web buttons html pages
• web design and web development
• rainbow shadow effect
• pink floyd html css