I had a lot of fun dabbling in CSS3 on a recent post, but had to hold back a bit to keep things looking presentable in most browsers. To carry out the DIN typeface I chose into the header, I used a transparent png with the letters knocked out to achieve that subtle yellow to blue fade animation. After seeing a shot of my code on Dribbble, Chandler Van De Water challenged me to create the effect with selectable text. Happy to oblige, I came up with this example:

.masked{
	background: url(/bgclip/img/paint.png) repeat, white;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-animation-name: masked-animation;
	-webkit-animation-duration: 40s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
@-webkit-keyframes masked-animation {
	0% {background-position: left bottom;}
	100% {background-position: right bottom;}
}

At the moment it will only work in webkit, so fire up Safari or Google Chrome: View Example