About design and nearby

Letterpress Effect Using CSS

Posted: July 18th, 2010 | Author: | Filed under: Tips and Tricks | Tags: , | No Comments »

Under “Letterpress Effect” I mean the relief printing of text. Safari and Firefox (3.1+) support this text-transform effect. You can do the same using Photoshop :) but with css it’s more elegant.

letterpress effect
The HTML:

  1.   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.   <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.   <title>Letterpress Effect </title>  
  5.   <link href="style.css" type=text/css rel=stylesheet>
  6.   </head>
  7.   <body>
  8.   <div class="letterpress"><h1>Sweet Web Design</h1></div>
  9.   </body>
  10.   </html>


The Stylesheet:

  1. .letterpress
  2. {
  3.  text-align:left;
  4.  }
  5. .letterpress h1 {
  6.  font-size:60px;
  7.  font-family: Arial, Helvetica, sans-serif;
  8.  color: #666;
  9.  text-shadow: 0px 2px 1px #333;
  10. }
  11. .letterpress h1:hover {
  12.  color: #504f4f;
  13.  text-shadow: 0px 1px 1px #bbbaba;
  14. }

Note: text-shadow: [x-offset] [y-offset] [blur] [color];
You can experiment with these options, keep in mind only – background color and shadow color should be lighter than font color (or anyway, feel free to experiment).

Live example: check the example >>

Share Button

Check Related Posts:


Leave a Reply


  • 6 × two =

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now