CSS3 font-smoothing Test for Text on an Angle

by rdub80

HTML

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<!--
CSS3 text on an angle & font rendering

Picked up the curled css corners at http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

Written by Roland Dubois
-->
<h1>CSS3 font-smoothing Test for Text on an Angle</h1>
<button id="default">Browser Default</button>
<button id="antialiased">Antialiased</button>
<button id="subpixel">Subpixel</button>
<button id="off">Off</button>

<div class="shadow rotate default"><p>
Text block in an angle that looks like a PostIt note
</p></div>
<br>
<div class="shadow matrix default"><p>
Text block in an angle that looks like a PostIt note
</p></div>

CSS

body {
    /* This has to be same as the text-shadows below */
    background: #f1f1f1;
}
h1{
      font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 1em;
    line-height: 1em; 
}
p{
  font-family: 'Architects Daughter', sans-serif;
  font-weight: normal;
  font-size: 2em;
  line-height: 1em;
  text-align: center;
  margin:0;
  display:block;
  position: relative;
  width:200px;
  height:150px;
  padding:10px;
 }
 p:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: yellow;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
  -moz-border-radius: 0 0 120px 120px / 0 0 6px 6px;
  border-radius: 0 0 120px 120px / 0 0 6px 6px;
}
    
.shadow {
    display: block;
    position: relative;
    width:220px;
    height:170px;
    margin:20px;
    z-index:1;
}
.shadow:before, .shadow:after
{
    content: "";
    position: absolute;
    z-index: -1;
	  bottom: 12px;
    left: 10px;
    width: 50%;
    height: 55%;
    max-width: 200px;
    max-height: 100px;
    -webkit-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
    -webkit-transform: skew(-8deg) rotate(-3deg);
    -moz-transform: skew(-8deg) rotate(-3deg);
    -ms-transform: skew(-8deg) rotate(-3deg);
    -o-transform: skew(-8deg) rotate(-3deg);
    transform: skew(-8deg) rotate(-3deg);
} 

.shadow:after
{
	  right: 10px;
    left: auto;
    -webkit-transform: skew(8deg) rotate(3deg);
    -moz-transform: skew(8deg) rotate(3deg);
    -ms-transform: skew(8deg) rotate(3deg);
    -o-transform: skew(8deg) rotate(3deg);
    transform: skew(8deg) rotate(3deg);
    z-index: -2;
}

.rotate {
    -moz-transform: rotate(10deg);  /* FF3.5/3.6 */
   ...

JavaScript

//toggling buttons in jquery
$(function() {
	$( "button" ).click(function() {
    	var div = $("div");
      var that = $(this);
      if(that.attr("id") == "antialiased"){
        div.removeClass("default subpixel off").addClass( "antialiased");
      }else if(that.attr("id") == "subpixel"){
        div.removeClass("default antialiased off").addClass("subpixel");
      }else if(that.attr("id") == "default"){
        div.removeClass("subpixel antialiased off").addClass("default");
      }else if(that.attr("id") == "off"){
        div.removeClass("subpixel antialiased default").addClass("off");
      }
	});
    console.log( "ready!" );
});

WebFontConfig = {
    google: { families: [ 'Architects+Daughter::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();