3D Codepad Rainbow Text

HTML
<div> <i>c</i> <i>o</i> <i>d</i> <i>e</i> <i>p</i> <i>a</i> <i>d</i> </div>
SASS
@import "compass" $letters: 11 $duration: 2 $depth: 50 @include keyframes( color-rot ) 0% @include filter( hue-rotate( 360deg )) 100% @include filter( hue-rotate( 0deg )) @include keyframes( glyph-wave ) 0% @include translate( -0.5vw , -0.5vw ) 100% @include translate( 0.5vw, 0.5vw ) html , body position: absolute overflow: hidden height: 100% width: 100% left: 0 top: 0 div @include translate( -50% , -50% ) @include animation( color-rot #{$duration}s linear 0s infinite normal none ) white-space: nowrap display: inline-block font-size: 0 position: absolute left: 50% top: 50% i color: hsl( 0 , 66% , 66% ) display: inline-block text-transform: uppercase font-family: 'Ultra', sans-serif font-size: 9vw $shadow: "0 0 red" @for $i from 1 through $depth $shadow: $shadow + " , #{$i}px #{$i}px hsl( #{round($i/$depth*45)} , 66% , 45% )" text-shadow: #{$shadow} @for $i from 1 through $letters &:nth-of-type( #{$i} ) @include animation( glyph-wave #{$duration/2}s ease-in-out #{$i/$letters*-$duration}s infinite alternate none ) @include filter( hue-rotate( #{round($i/$letters*360)}deg ))
JAVASCRIPT
Expand for more options Login