Create a Letterpress Effect with CSS Text-Shadow

Posted: April 15, 2010 in Design
Tags: , , , ,

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!

Letterpress – Isn’t that a type of industrial print method? That’s right! But the effect has also made its way into web design. Check out the previous feature showcasing examples of how designers are using this cool ‘de-bossed’ look on designs across the web.

****************************************************

With the recent support of text-transform in Safari and Firefox (3.1+) the effect can easily be created without needing to use any image replacement techniques. This means your text is much easier to edit, and has the benefit of being rendered directly in the browser.

Start out by creating a simple background. In Photoshop create a 100×100px and fill with a dark grey. Add some texture using the Noise filter.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pure CSS Letterpress Effect</title>

<h1>Line25</h1>
<h2>Pure CSS Letterpress Effect</h2>

</head></html>

Set up a plain HTML document, then add a few lines of text to test
the effect on.
body {
	background: #474747 url(bg.png);
}

h2 {
	font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
	text-align: center;
}

Style up the text using the usual CSS properties to edit the size
and  basic appearance.

Text-Shadow CSS3 Property
Now we’re ready to apply the text-shadow property. This works by
specifying an x-offset, a y-offset, the shadow blurriness and the
actual  colour of the shadow.
color: #222;
text-shadow: 0px 2px 3px #555;

To create the letterpress effect, we need to add a shadow that’s lighter than the colour of the text to ensure the effect works correctly. Here we’re using #555555 against the darker #222222 text colour. A 2px vertical offset and very subtle blurriness helps give the exact appearance we’re after.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s