Gradient + Rotation w/o Jagginess

When you apply a standard gradient to an element and rotate it, you get jagged edges. Solution: replace gradient with inset box-shadow!

HTML

<a href="#" class="jagged">Jagged and ugly</a>
<a href="#" class="smooth">Nice and smooth</a>
<h1>Recipe for elements:</h1>
<ol>
    <li>Bugfix Firefox: Use an inset box-shadow as fake gradient (or add one on top to fill border gaps)</li>
    <li>Bugfix Safari: Activate HW-accelleration for Safari (but DISABLE it for Chrome)</li>
    <li>Bugfix IE9: Avoid mixing transforms and filters in IE9: Use an inset box-shadow as fake gradient</li>
</ol>
<img src="http://placekitten.com/200/300" alt="" class="jaggedimg" />
<span class="smoothimg">
    <img src="http://placekitten.com/200/300" alt="" />
</span>
<h1>Recipe for images:</h1>
<ol>
    <li>Bugfix IOS: Set image as background together w/ -webkit-background-clip to help IOS devices (<a href="http://www.css-101.org/articles/-webkit-transform-rotate-and-anti-aliasing/rotate-creates-jagged-border-image.php">see</a>)</li>
    <li>Bugfix WebKit (Chrome + Safari): Set a transparent border + Activate HW-accelleration for WebKit</li>
</ol>

CSS

body {font-family: Arial, sans-serif; font-size: 1em; margin: 40px;}
h1 {margin: 20px 0 0; font-size: 2em;}
ol {margin: 20px 0;}
a, img {margin: 0 80px 0 0;}

.jagged {
    *display: inline; /* combined with zoom = inline-block for IE6/7 */
    display: inline-block;
    color: #fff;
    padding: 7px 12px 7px 15px;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #a40518;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    -webkit-transform: rotate(6deg); /* Safari + Chrome */
    -moz-transform: rotate(6deg); /* Mozilla Firefox */
    -o-transform: rotate(6deg); /* Opera */
    transform: rotate(6deg) /* W3C */

    /* Standard linear gradient setup */
    background: #dd001a; /* Old browsers */
    background: -moz-linear-gradient(top, #dd001a 0%, #a40518 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd001a), color-stop(100%,#a40518)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #dd001a 0%,#a40518 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #dd001a 0%,#a40518 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #dd001a 0%,#a40518 100%); /* IE10+ */
    background: linear-gradient(top, #dd001a 0%,#a40518 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dd001a', endColorstr='#a40518',GradientType=0), 
            progid:DXImageTransform.Microsoft.Matrix(
            M11=0.9945218953682733, 
            M12=-0.10452846326765346, 
            M21=0.10452846326765346, 
            M22=0.9945218953682733, sizingMethod='auto expand'); /* IE6-9 */
    zoom: 1;
}

.smooth {
    *display: inline;
    display: inline-block;
    color: #fff;
    padding: 7px 12px 7px 15px;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 0 1px rgba(255,255,255,0.5);
    border: 1px solid #a40518;

    -moz-border-radius: 5px;
    -webkit-border-radius:...