CSS3 abuse for all outdated browsers

dabblet.css

/**
 * CSS3 abuse for all outdated browsers
 */


@font-face {
    font-family: light;
    font-weight: 300;
    src: url('http://shitfonts.bplaced.net/wordpress/wp-content/uploads/HelveticaNeue-Thin.ttf');
    }
@font-face {
    font-family: ultra;
    font-weight: 200;
    src: url('http://shitfonts.bplaced.net/wordpress/wp-content/uploads/HelveticaNeue-UltraLight.ttf');
    }
html {
    background: #e6e6e6;
    overflow: hidden;
    padding: 2em 0;
    }
#wrapper {
    width: 30em;
    margin: 0 auto;
    text-align: center;
    }
    #wrapper article {
        margin: 0 0 1em
        }
h1 {
    font-family: ultra;
    font-weight: normal;
    font-size: 1.8em;
    text-transform: uppercase;
    position: relative;
    }
h1:before {
    content: '';
    display: block;
    position: absolute;
    width: 5em;
    top: -1.2em;
    height: 3em;
    background: white;
    left: -55em;
    padding: 0 70em;
    z-index: -1;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    }
#fuckYou {
    width: 5.2em;
    height: 4em;
    font-size: 5em;
    position: relative;
    display: inline-block;
    }
    #fuckYou div {
        position: absolute;
        background: royalblue;
        }
    #fuckYou #hand {
        width: 3em;
        height: 1em;
        bottom: 0em;
        left: 1em;
        }
    #fuckYou .finger {
        width: 1em;
        height: 2em;
        -webkit-border-radius: 1em 1em 0 0;
        -moz-border-radius: 1em 1em 0 0;
        -o-border-radius: 1em 1em 0 0;
        -ms-border-radius: 1em 1em 0 0;
        bottom: 0em;
        z-index: 2;
        }
    #fuckYou .finger:before {
        content: '';
        display: block;
        position: absolute;
        top: -0.1em;
        left: -0.1em;
        width: 1em;
        height: 1.2em;
        border-color: #e6e6e6;
        border-style: solid;
        border-width: .1em .1em 0;
        z-index: 3;
        }
    #fuckYou .finger#thumb {
        height: 1.5em;
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        left: 0.55em;
        bottom: 0em;
        -webkit-border-radius: 1em;
        -moz-border-radius: 1em;
        -o-border-radius: 1em;
        -ms-border-radius: 1em;
        }
    #fuckYou .finger#index {
        left: 1em
        }
    #fuckYou .finger#middle {
        height: 4em;
        left: 2.1em;
        }
    #fuckYou .finger#middle:before {
        display: none
        }
    #fuckYou .finger#ring {
        left: 3.2em
        }
    #fuckYou .finger#little {
        left: 4em;
        -webkit-border-radius: 0.7em 0.7em 0.7em 0;
        -moz-border-radius: 0.7em 0.7em 0.7em 0;
        -o-border-radius: 0.7em 0.7em 0.7em 0;
        -ms-border-radius: 0.7em 0.7em 0.7em 0;
        height: 1.5em;
        width: 0.7em;
        z-index: 1;
        }
    #fuckYou .finger#little:before {
        width: 0.7em
        }
p {
    font-family: light;
    position: relative;
    padding: 1em 0;
    }
p:before {
    content: '';
    display: block;
    position: absolute;
    width: 5em;
    top: -2em;
    height: 5em;
    background: white;
    left: -55em;
    padding: 0 70em;
    z-index: -1;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    }

dabblet.html

<div id="wrapper">
        <article>
            <h1>CSS3 abuse</h1>
            <div id="fuckYou">
                <div class="finger" id="thumb"></div>
                <div class="finger" id="index"></div>
                <div class="finger" id="middle"></div>
                <div class="finger" id="ring"></div>
                <div class="finger" id="little"></div>
                <div id="hand"></div>
            </div>
            <p>for all outdated browsers</p>
        </article>
        <a href="http://www.w3.org/html/logo/">
            <img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" title="HTML5 Powered with CSS3 / Styling, and Semantics">
        </a>
    </div>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}