Fonts - Google Lobster Anaglyph

by Yashwanth M

HTML

<h1>Yash</h1>
<p><font color="blue">This is some text!</font></p>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<style id="styles" type="text/css">
    h1:after {
    content:"12"; 
}

</style>

CSS

body {
    font-family: "Lobster";
    text-transform: uppercase;
}

h1 {
    text-shadow: 3px 3px 0 #fff;
    font-size: 6.5em;
    color:green;
}


h1:after {
    margin-top: -125px;
    margin-left: 5px;
    background: grey;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: -5;
    display: block;
    text-shadow: none;
}

JavaScript

$('styles').set('text', 'h1:after{content:"{content}"}'.substitute({
    content: $$('h1')[0].get('text')
}));