Site icon StartFunction

Create letterpressed type using only CSS

letterpress

Letterpress effect is one of the 2009 trends and is present in a lot of websites. It simply works because it adds a touch of “tactile” to the overall design and at the same time looks good with gradients, shadows, etc. Let’s see a quick way to add this effect to our sites using only CSS. You want to see the letterpress example before we start?

We could also create this letterpressed effect with images, but Using CSS offers us a very extensible framework. Suppose we have our site running on WordPress for example, and our pages use the letterpress effect through an image. If you want to add another page, you would have to go back to your graphics software, create a new text, export the image, upload it to the server and position it on the XHTML with CSS. If you have the letterpress effect set up by simple text, adding a new page with the proper heading is as simple as creating the page.

The markup

The idea is very simple: one layer will hold the receding characters, and the other layer will hold the highlight of the surface where the characters are pressed in. Let’s wrap this in a block to make it portable:

[html]
<div class="block">
<span class="highlight">LETTERPRESS</span>
<span class="color">LETTERPRESS</span></div>
[/html]

CSS Positioning

Our block must have relative positioning in order to enable absolute positioning for the color layer, which is the one that will be on top. We won’t be enabling absolute positioning for the highlight, because that would collapse our block.

[css]

.block {
margin: 15px auto 0;
position: relative;
padding: 20px;
width: 400px;
clear:both;
overflow:hidden;
background-color: #e4b7c0;
}
.highlight{
color: #fce2e7;
display:block;
}
.color{
color: #a33e52;
position: absolute;
top: 19px;
}

[/css]

Notice that .color, the overlayed layer, has an offset of 1px relative to the highlight, the base layer, displaced from top by a 20px padding.

That’s it, you can check the letterpress example again or download it for close inspection.

See also these interesting links about the letterpressed style in both web and print.

webdesignledger.com: 10-beautiful-letterpress-business-cards

fontfeed.com: the-magic-that-is-letterpress/

from-the-couch.com: title/the-letterpress-trend-has-to-go

line25.com: web-design-trend-showcase-letterpress-text-effect

Exit mobile version