Inset Text Shadow

I'd like this reviewed.

Demo

HTML




The Dark Knight



The Dark Knight Rises




CSS

body{
background: #424243;
margin: 0;
}
h1{
font-size: 5em;
font-family: Georgia;
}
.container{
padding: 20px 50px;
}
.one h1{
color: #fff;
text-shadow: 4px 3px #222;
}
.two{
background: #ccc;
}
.two h1{
background-color: #222;
color: transparent;
text-shadow: 0px 2px 2px rgba(255,255,255,0.6);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}


-
You're using prefixed versions for the background-clip property. There is only a need for the -webkit- prefix here, so you have support for Android 2.x. You can omitt -moz-, unless you need to support Firefox 3.6.

Can I use CSS3 Background-image options?

-
It looks like you're trying to illustrate the styling of text with text-shadow. You probably want to use example text with a higher font-size. Instead of heading elements, you should be using span's:

The Dark Knight

h1–h6 are for headings and subheadings. In your case a heading would be something like Usage of the text-shadow property.

-
Use 0 instead of 0px. You don't need to add the unit for zero values.

Other than that, I don't know what else one should review. I'll update my question, if you add some more information.

StackExchange Code Review Q#41478, answer score: 6