How to Make Your Text Appear Letterpressed with CSS

Create a Letterpress Effect using CSS at DesignYourOwnBlog.com
Create a Letterpress Effect using CSS
Create a Letterpress Effect using CSS at DesignYourOwnBlog.com

Create a Letterpress Effect using CSS

Letterpress is so HOT right now!

You may or may not have noticed the letterpress effect on my tagline above, “Beautify Your Blog on a Budget.” That’s not an image, folks, it’s done with CSS.

Now obviously we all know that true letterpress is a printing effect, but heck if we can recreate it digitally, why the heck not? Letterpress is so hot right now 🙂

Let’s Set Up The Space

You will want a medium to dark colored background. Unfortunately this effect doesn’t work on light colored backgrounds because the white is what creates the effect. As you can see from my own header above, the background color doesn’t have to be that dark, just dark enough to contrast with the white.

If you want, you can also use a paper texture background for an even more “real” letterpress look.

The text has to be darker than the background and should have decent contrast.

If you’re completely new to CSS, you’ll want to look over this beginner’s CSS article first real quick.

The HTML

What we’re doing here is creating our background block and text:


<div class="letterpress">
<p>Beautify Your Blog on a Budget!</p>
</div>

The CSS

Now we’re giving our block a background color and setting up our font styles by giving it a font, a color, a size and then centering it for the heck of it. Obviously you’ll use the fonts, colors and styles that you wish to use.


div.letterpress {
background: #474747;
}
div.letterpress p {
font-family: 'Nixie One', serif;
color: #999;
font-size: 3em;
text-align: center;
}

Letterpressing the Text

Let’s add one more line of CSS to create the letterpress effect. In order to do this, we’ll need to add a shadow in a color that’s lighter than the text color. I usually use white, but you’re welcome to play around and see what suits you.

The CSS

To define our text-shadow, we declare in this order: the x-offset, the y-offset and the color and alpha transparency (opacity) of the shadow. Using alpha transparency allows the shadow to blend a little into the background.

You can use a regular hex code for the color, but in order to add the alpha transparency to the shadow, it needs to be declared using the RGB format. Use this tool to find the right color: RGB Color Codes Chart.

255, 255, 255 is white and I’ve given it 80% opacity using 0.8. To lower the opacity to 50%, you would use 0.5. And to do full opacity (no transparency at all), you’d give the value a 1.


div.letterpress p {
font-family: 'Nixie One', serif;
color: #999;
font-size: 3em;
text-align: center;
text-shadow: 1px 1px rgba(255,255,255,0.8);
}

Voila the Result!

Beautify Your Blog on a Budget!

The effect is pretty cool on thicker fonts too:

Beautify Your Blog on a Budget!

Remember:

The font color should be darker than your background color and the shadow must be lighter than the font color.

Caveat

Most modern browsers support this CSS3 effect, except for IE9 and below (why am I not surprised?) so you’ll want to make sure that there is enough contrast between the text color and the background so it’s still legible for those that can’t see the light shadow.

Super Simple CSS

So there you have it: the letterpress effect in CSS. Easy peasy right??

Got questions or just want to share what you’ve done? I’d love to see a link! Share in the comments below!

And if you like this, consider sharing it with your friends:

Mariannes signature for DesignYourOwnBlog.com

8 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge