Over a million developers have joined DZone.

Create a letterpress effect with CSS text shadow

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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.  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.

View Demo

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.

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.

Simple! Check out the example to see it for yourself. Don’t forget, users with unsupporting browsers will only see the plain text, without the cool shadow awesomeness, so use it wisely.

Written by Chris Spooner on Line25

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}