brite, a MVC Framework for jQuery

CSS3: Text inset

December 13th, 2010 by jeremychone

My preferred way:

text-shadow: #333 0px -1px -1px;
or
.inset-text {
  font-size: 32px;
  color: #344251;
  text-shadow: 1px 1px 0px #bad3ed;
  font-weight: bold;
}

Source: http://stylizedweb.com/2009/10/22/how-to-create-inset-text-with-css3/

Or

h1.insetType {
  text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
}

Source: http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

Leave a Reply