Pure CSS3 Text Gradients

With the latest advancements in CSS, we now have access to powerful styling techniques, including box shadows, rounded corners, background gradients, etc. However, we don’t currently have the ability to apply gradients to the text itself. Luckily, with a bit of trickery, we can force this effect — at least in webkit browsers! I’ll show you how in today’s video quick tip.

Step 1: That’s it for the type effect. You can have it sit on top of any background you like by placing this h1 inside of a div and giving the div a background


Step Two: Create the body of the page using h1

Step Three: Go to google to find the font you would like to use:
http://code.google.com/webfonts
Insert the link into the head of your page:

Step Four: Stylize the h1

h1 {
position: relative;
font-size: 70px;
margin-top: 0;
font-family: 'Lobster', helvetica, arial;
}

h1 a {
text-decoration: none;
color:#C00;
position: absolute;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));


Step Five: After stylizing the h1 we need to add a duplicate of this text:

h1:after {
content : 'Hello World';
color:#FC0;
text-shadow: 0 1px 0 white;
}


If you get lost visit this youtube video:
http://www.youtube.com/watch?v=uoLqvvTZm0A&feature=player_embedded#!