<p><span>H</span><span>o</span><span>l</span><span>y</span> <span>F</span><span>e</span><span>t</span><span>c</span><span>h</span><span>a</span><span>m</span><span>o</span><span>l</span><span>y</span> <span>!</span></p>

<h1 id="hover">hover over us!</h1>

<h2>Sweet Molasses!</h2>

<h5>CSS3 Gradient Filled Text Strokes &amp; CSS3 Strokes On Gradient Filled Text!  &nbsp;- <em>Andrew Wilson</em> &nbsp; <a href="http://www.ballyhooblog.com">Blog</a> | <a href="http://www.studentwebhosting.com">Biz</a></h5>

  body{
    font-family:'Bubblegum Sans',Arial;
    font-weight:bold;
    background-image:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/low_contrast_linen.png);
  }
  p{
    margin:.5em 0;
    text-align:center;
    bottom:0;
    font-size:64pt;
    
  }
  a{
    color:white;
  }
  h5{
    text-align:center;
    color:#bbb;
    font-weight:normal;
    text-shadow:-1px -1px 1px black;
    font-family:Verdana;
  }
h2{
  text-align:center;
  width:600px;
  font-size:64pt;
  margin:0 auto;
}
  span, h2{
    cursor:pointer;
    -webkit-transition-property: background;
    -webkit-transition-duration: 3s;
    -webkit-transition-timing-function: ease-out;
    color:#222;
    text-shadow:0px 0px 5px white;
    z-index:3;
    background: -webkit-linear-gradient(left,  rgba(255,0,0,1) 0%,rgba(255,255,0,1) 19%,rgba(0,255,0,1) 38%,rgba(0,255,255,1) 51%,rgba(0,0,255,1) 67%,rgba(255,0,255,1) 83%,rgba(255,0,0,1) 99%); /* Chrome10+,Safari5.1+ */
    -webkit-text-stroke: 5px rgba(255,255,255,.01);
    -webkit-background-clip: text;

  }
  span:hover{
    -webkit-transition-property: background;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease-out;
    background: -webkit-linear-gradient(right,  rgba(255,0,0,1) 0%,rgba(255,255,0,1) 19%,rgba(0,255,0,1) 38%,rgba(0,255,255,1) 51%,rgba(0,0,255,1) 67%,rgba(255,0,255,1) 83%,rgba(255,0,0,1) 99%); /* Chrome10+,Safari5.1+ */
    background-position:100px;
    -webkit-background-clip: text;
    
  }
  #hover{
    margin-top:.25em;
    text-align:center;
    font-size:64pt;
    -webkit-transition-property: background;
    -webkit-transition-duration: 3s;
    -webkit-transition-timing-function: ease-out;
    content:'studentwebhosting.com';
    -webkit-text-stroke: 3px rgba(255,255,255,1);
    background: -webkit-linear-gradient(left,  rgba(255,0,0,1) 0%,rgba(255,255,0,1) 19%,rgba(0,255,0,1) 38%,rgba(0,255,255,1) 51%,rgba(0,0,255,1) 67%,rgba(255,0,255,1) 83%,rgba(255,0,0,1) 99%); /* Chrome10+,Safari5.1+ */
    -webkit-background-clip: text;
    color:transparent;
  }
  #hover:hover{
    -webkit-transition-property: background;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease-out;
    cursor:pointer;
    -webkit-text-stroke: 3px rgba(255,255,255,1);
    background: -webkit-linear-gradient(left,  rgba(255,0,0,1) 0%,rgba(255,255,0,1) 19%,rgba(0,255,0,1) 38%,rgba(0,255,255,1) 51%,rgba(0,0,255,1) 67%,rgba(255,0,255,1) 83%,rgba(255,0,0,1) 99%); /* Chrome10+,Safari5.1+ */
    -webkit-background-clip: text;
    color:transparent;
    background-position:-500px;
  }

/*  

Host with studentwebhosting.com.  No, really.  Tell your web students! please? 

I set out to create something totally different and ended up discovering a fancy trick to apply gradient strokes to text!  

I added a few transitions for kicks as well.

Tons of possibilities here.
Needs webkit

Andrew Wilson

*/