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 {<br /> background: #474747 url(bg.png);<br />}<br /><br />h2 {<br /> font: 70px Tahoma, Helvetica, Arial, Sans-Serif;<br /> text-align: center;<br />}<br />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;<br />text-shadow: 0px 2px 3px #555;<br />
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 rubbish unsupporting browsers will only see the plain text, without the cool shadow awesomeness, so use it wisely.
No comments:
Post a Comment