Text Clipping fun times

using some text clipping masks with css3 gradients

by Brodingo

HTML

<h1><span class="masked">Rainbows :)</span></h1>

CSS

html {
    height: 100%;
}

body {
    background-image: -webkit-gradient(linear, left top, right top,
                   from(hsla(0,100%,50%,.8)),
        color-stop(15%, hsla(60,100%,50%,.8)),
        color-stop(30%, hsla(120,100%,50%,.8)),
        color-stop(45%, hsla(180,100%,50%,.8)),
        color-stop(60%, hsla(240,100%,50%,.8)),
        color-stop(75%, hsla(300,100%,50%,.8)),
                     to(hsla(360,100%,50%,.8)));
      font-family: sans-serif;
text-rendering: optimizeLegibility;}

.masked{   
    background-image: -webkit-gradient(linear, left top, right top,
                   from(hsla(0,100%,50%,.8)),
        color-stop(15%, hsla(60,100%,50%,.8)),
        color-stop(30%, hsla(120,100%,50%,.8)),
        color-stop(45%, hsla(180,100%,50%,.8)),
        color-stop(60%, hsla(240,100%,50%,.8)),
        color-stop(75%, hsla(300,100%,50%,.8)),
                     to(hsla(360,100%,50%,.8)));
    -webkit-background-size: 50%;
    -webkit-background-clip: text;    
    -webkit-animation-name: masked-animation;   
    -webkit-animation-duration: 5s;   
    -webkit-animation-iteration-count: infinite;   
    -webkit-animation-timing-function: linear;   
}

@-webkit-keyframes masked-animation {   
    0% {background-position: left bottom;}
100% {background-position: right bottom;}
}

h1 {
    position: relative;
    margin: 20px;
    color: transparent;
    font-size: 120px;
    white-space: nowrap;
}
h1:before{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: "Rainbows :)";
    text-shadow:
        0 -1px 1px rgba(255,255,255,0.8),
        1px 1px 1px rgba(0,0,0,0.2),
        1px 1px 2px rgba(0,0,0,0.2),
        2px 2px 4px rgba(0,0,0,0.5),
        2px 2px 8px rgba(0,0,0,0.5);
}

JavaScript

// text clipping mask stuff

// Y U NO WORK WITH TEXT SHADOW HOW I WANT

// have to use :pseudo >:(