IE Text Rotation w/ Cleartype preserve
Set a background of possible or set background-color and color key it away before rotation.
HTML
<p class="ugly">Ugly Text on Transparent BG</p>
<p class="nice1">Nice Text on<br>Opaque BG</p>
<p class="nice2">Nice Text on Transparent BG</p>
CSS
body {
background: url('http://www.unsigneddesign.com/Vandelay_Premier_Textures/thumbs/vandelay_premier11.jpg');
}
p {
display: inline-block;
*display: inline;
zoom: 1;
margin: 30px 10px;
padding: 4px;
-webkit-transform: rotate(6deg); /* Safari + Chrome */
-moz-transform: rotate(6deg); /* Mozilla Firefox */
-o-transform: rotate(6deg); /* Opera */
transform: rotate(6deg) /* W3C */
}
.ugly {
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.99452190, M12=-0.10452846, M21=0.10452846, M22=0.99452190,sizingMethod='auto expand');
zoom: 1;
}
.nice1 {
background: #FFF;
-webkit-transform: translate3d(0,0,0) rotate(6deg); /* Safari w/ HW-Accelleration */
text-shadow: 0 0 1px rgba(255,255,255,0.1);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.99452190, M12=-0.10452846, M21=0.10452846, M22=0.99452190,sizingMethod='auto expand');
zoom: 1;
}
.nice2 {
-webkit-transform: translate3d(0,0,0) rotate(6deg); /* Safari w/ HW-Accelleration */
text-shadow: 0 0 1px rgba(128,128,128,0.1);
*background: #c49e6d;
filter: progid:DXImageTransform.Microsoft.Chroma(
color="#c49e6d"), progid:DXImageTransform.Microsoft.Matrix(M11=0.99452190, M12=-0.10452846, M21=0.10452846, M22=0.99452190,sizingMethod='auto expand');
zoom: 1;
}