PhoneGap Tips

Demos: Font Smoothing

Try this example in your iOS or Safari web browser in horizontal orientation, or read more about font smoothing and CSS transitions.

Tap each box to apply translate3d

HTML

<a class="black-on-white" href="javascript:void(0)">HelveticaNeue</a>
<a class="white-on-black" href="javascript:void(0)">HelveticaNeue</a>

CSS

.black-on-white, .white-on-black {
  margin: 5px;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  line-height: 64px;
  width: 160px;
  border: 1px solid black;
}

.black-on-white {
  color: black;
  background-color: white;
}

.white-on-black {
  color: white;
  background-color: black;
}

.black-on-white:active, .white-on-black:active {
  -webkit-transform: translate3d(0px,0px,0px);
}