Skewed Text in CSS

HTML

<header>
    <h1 class="skewed"><span>testing out skew and rotate</span></h1>
</header>

CSS

html {
    background: #ffe;
    text-align: center;
}

body { 
    max-width: 900px;
    width: 80%;
    padding: 0 10%;
    margin: 0 auto;
}

header { 
    width: 80%;
    margin: 0 auto; 
    position: relative;
}

.skewed {
    display: inline-block;
    font: 2em/1 impact, sans-serif;
    position: relative;
    top: 5em;
    width: 100%;
    -webkit-transform: rotate(-10deg) skew(-10deg, 0);
       -moz-transform: rotate(-10deg) skew(-10deg, 0);
        -ms-transform: rotate(-10deg) skew(-10deg, 0);
         -o-transform: rotate(-10deg) skew(-10deg, 0);
            transform: rotate(-10deg) skew(-10deg, 0);
}
.skewed:after,
.skewed:before {
    background: #666;
    box-shadow: inset 0 0 0 .5em #666,
                inset 0 .7em 0 #666,
                inset 0 .9em 0 #888,
                inset 0 1.4em 0 #666,
                inset 0 1.6em 0 #888,
                inset 0 2.1em 0 #666,
                inset 0 2.3em 0 #888,
                inset 0 2.5em 0 #666;
    content: '';
    height: 3em;
    position: absolute;
    top: 0em;
    width: 3.5em;
    z-index: -1;
}
.skewed:after {
    border-radius: .25em 0 0 .25em;
    left: -2.5em;
}
.skewed:before {
    border-radius: 0 .25em .25em 0;
    right: -2.5em;
}
.skewed span {
    background: #666;
    box-shadow: 0 0 0 .2em #ffe;
    color: #ffe;
    padding: 1em;
    position: relative;
    text-shadow: 1px 2px 0 #666,
                 2px 3px 0 #888;
    text-transform: uppercase;
    width: 80%;

}

JavaScript

/*global jQuery */
/*!    
* FitText.js 1.0
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license 
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/

(function( $ ){
    
    $.fn.fitText = function( kompressor, options ) {
        
        var settings = {
        'minFontSize' : Number.NEGATIVE_INFINITY,
        'maxFontSize' : Number.POSITIVE_INFINITY
      };
    
            return this.each(function(){
                var $this = $(this);              // store the object
                var compressor = kompressor || 1; // set the compressor
        
        if ( options ) { 
          $.extend( settings, options );
        }
        
        // Resizer() resizes items based on the object width divided by the compressor * 10
                var resizer = function () {
                    $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
                };

                // Call once to set.
                resizer();
                
                // Call on resize. Opera debounces their resize by default. 
          $(window).resize(resizer);
          
            });

    };

})( jQuery );

$("header").fitText(3.1);