Fun CSS3 Text Styles

Just a few fun ideas for different text styles using CSS3

by Erin

HTML

<h1 class="rainbow">Rainbow Text</h1>

SCSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
$white:  #FFF;
$red:    #FF0033;
$orange: #FFA500;
$yellow: #FFFF00;
$green:  #8F0;
$aqua:   #0FF;
$blue:   #0000FF;
$purple: #800080;
$pink:   #FF1493;
h1 {
    font-size: 500%;
    font-family: 'Open Sans', sans-serif;
    font-weight:bold;
    line-height: 1em;
    text-transform: uppercase;
}
.rainbow {
    color: #2F2F2F;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    text-shadow: 0 0 0 $white,
                 0 0 0 $red,
                 1px 0 0 $red,
                 2px 0 0 $orange,
                 3px 0 0 $yellow,
                 4px 0 0 $green,
                 5px 0 0 $aqua,
                 6px 0 0 $blue,
                 7px 0 0 $purple,
                 8px 0 0 $pink;
}