resolving anti-aliasing with hardware acceleration

by Reusablecode

HTML

<div id="light">
  <div class="alpha">
    <h2>no background</h2>
    <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong>Ut enim ad minim veniam</strong>, quis nostrud exercitation ullamco laboris nisi ut aliquip <strong><em>ex ea commodo consequat</em></strong>.</p>
  </div>

  <div class="beta">
    <h2>has background</h2>
    <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong>Ut enim ad minim veniam</strong>, quis nostrud exercitation ullamco laboris nisi ut aliquip <strong><em>ex ea commodo consequat</em></strong>.</p>
  </div>
</div>

<div id="dark">
  <div class="alpha">
    <h2>no background</h2>
    <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong>Ut enim ad minim veniam</strong>, quis nostrud exercitation ullamco laboris nisi ut aliquip <strong><em>ex ea commodo consequat</em></strong>.</p>
  </div>

  <div class="beta">
    <h2>has background</h2>
    <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong>Ut enim ad minim veniam</strong>, quis nostrud exercitation ullamco laboris nisi ut aliquip <strong><em>ex ea commodo consequat</em></strong>.</p>
  </div>
</div>

CSS

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  margin: 0;
  padding: 0;
}

.alpha, .beta {
  -webkit-transform: translate3d( 0, 0, 0);
  margin-bottom: 1.0em;
  padding: 0.5em;
}

h2 {
  font-weight: bold;
  font-size: 1.2em;
}

#light,
#light .beta { background: white; }

#dark,
#dark .beta { background: black; }

#dark { color: white; }

#light, #dark {
  width: 50%;
  float: left;
}

em { font-style: italic; }
strong { font-weight: bold; }