19 August 2009

[web_design] Getting a Letterpress Effect With CSS

2196.Here's a nifty trick I stumbled onto yesterday.

Letterpress is very chic these days. The look and feel of letterpress is unmistakable and immediate: it imparts a level of craft and artisanship that make each letterpress piece a personal statement from the printer to you. It is, as Harlan Ellison has said, foot-pounds of effort, a personal connection to the viewer, and in a very literal way.

CSS allows you to do with the text-shadow attribute, which, if you're familiar with the drop-shadow attribute in Photoshop or any number of graphics programs, should make pretty much instant sense:

text-shadow: 0px 2px 3px #555

The first parameter specifies x-offset, the second, y-offset, the third blur (or spread) and the last, color. The above (nicked from the tutorial at Line25) will create the effect seen at this URL (which is a demo).

To get an idea on how to actually use the goodness, go to the Line25 tutorial at http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow and follow the bouncing ball. It's pretty nifty!

Technorati Tags: , ,

No comments: