Skip to main content

This style gives the illusion that the characters are impressed slightly into the background, as if they'd been stamped into a material (like on a letterpress). View example.

/* 

An effect that's very popular at the moment is the letterpress style. This style
gives the illusion that the characters are impressed slightly into the background,
as if they'd been stamped into a material (like on a letterpress). This effect is
easy to achieve with CSS3.

To create this effect, you need four tones of a color: dark for the characters,
medium for the background, and lighter and darker for the shadow.

Then you add text-shadow with multiple values—a dark (or black) and a light,
as in this example:

*/

body { 
  background-color: #565656; 
}

h1 { 
  color: #333; 
  text-shadow: 0 1px 0 #777, 0 -1px 0 #000;
}

/* 

The body has a background-color value of #565656, which is a fairly mediumdark
gray, and the text is a darker tone. The text-shadow has two values: black
to give a shadow effect and a lighter gray as a highlight; the combination of the
two creates the illusion of depth.

*/