Cool CSS gradient text effect in Webkit

.textfade {
  background: 
    -webkit-gradient(linear,left top,right top,from(#0060F3),to(#00339A));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

“Borrowed” from Polygon

This makes some pretty cool gradient-filled text!

* If you aren’t using a Webkit browser, then the above is an image to show you what you are missing

Here Be Dragons

Probably just as interesting was the hoops I had to jump through to get something to show up to illustrate how it looks in Webkit browsers for non-Webkit browsers. Only an image would do, so I needed to do some CSS trickery. First, the Firefox-only CSS:

@-moz-document url-prefix() {
  .textfade {
    background: url(/wp-content/uploads/2013/03/gradient-text.png) 
      left top no-repeat;
    width: 590px;
    height: 27px;
    text-indent: -99999em;
  }
  q { display: none; }
}

The Firefox-only CSS was made easy by the Firefox-specific plugin syntax.

Now, for the IE-specific stuff:

<!--[if IE]>
<script>document.documentElement.className='ie10';</script>
<![endif]-->
<script>
if(Function('/*@cc_on return 10===document.documentMode@*/')()){
  document.documentElement.className='ie10';
}
</script>
.ie10 .textfade {
  background: url(/wp-content/uploads/2013/03/gradient-text.png) 
    left top no-repeat;
  width: 590px;
  height: 27px;
  text-indent: -99999em;
}
.ie10 q { display: none; }

The IE stuff was (as expected) much more difficult. Conditional comments make most of it easy, but with IE 10 not supporting them, that made it tricky. So, you need to perform a little js check and attach a classname tot he document as a nice work-around. I decided to use this same thing in the conditional comments too, that way I only needed to make 1 CSS change for all IE browsers.

Since IE forced me into using js to do the conditional comments checking, I really could have just went full-js and it probably would have been easier. I thought this was interesting, however, and I was striving for a strictly CSS solution. Alas, IE comes along to screw things up (as usual) and I was unable to create the solution I was looking for. The tricks are still cool.
🙂