CSS3 Isometric Text Demo

by secretgspot

HTML

<h1>ISOMETRIC TEXT</h1>
<p>
    Here's a reworking of my original CSS3 
    Isometric Text demo, this version improves 
    on the first attempt by using the CSS :after 
    selector to duplicate the title to create 
    the shadow - in fact the title IS the shadow 
    &amp; the Isometric lettering is the :after 
    content. 
</p>

CSS

/**
 * CSS3 Isometric Text Demo v2
 */
@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.eot');
    src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.eot?iefix') format('eot'), url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.woff') format('woff'), url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.ttf') format('truetype'), url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.svg#webfontIQSKTUY8') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ArchitectsDaughterRegular';
    src: url('http://www.midwinter-dg.com/blog_demos/css-isometric-text/architectsdaughter-webfont.eot');
    src: url('http://www.midwinter-dg.com/blog_demos/css-isometric-text/architectsdaughter-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.midwinter-dg.com/blog_demos/css-isometric-text/architectsdaughter-webfont.woff') format('woff'), url('http://www.midwinter-dg.com/blog_demos/css-isometric-text/architectsdaughter-webfont.ttf') format('truetype'), url('http://www.midwinter-dg.com/blog_demos/css-isometric-text/architectsdaughter-webfont.svg#ArchitectsDaughterRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    width: 1000px;
    color: #fff;
    position: relative;
    background-color: #2f5faf;
    background-image: url(http://www.midwinter-dg.com/blog_demos/css-isometric-text/blueprint.png);
    -webkit-font-smoothing: antialiased;
}

h1 {
    font: 80px 'LeagueGothicRegular';
    position: relative;
    top: -30px;
    left: 100px;
    color: rgba(0,0,0,0);

    -webkit-transform: skew(63deg,-26.6deg);
    -moz-transform: skew(63deg,-26.6deg);
    -o-transform: skew(63deg,-26.6deg);
    -ms-transform: skew(63deg,-26.6deg);
   ...