Enter your keyword

How To Get A Letterpress Effect On Text With CSS Only

How To Get A Letterpress Effect On Text With CSS Only

Today I’m going to round out my series on letterpress with a tutorial on how to get a letterpress effect for type by using CSS only. This technique is going to make use of the text-transform property in CSS that is viewable in recent versions of Firefox and Safari. It won’t work, in other words, in Internet Explorer, but then what does work in Internet Explorer? And also, who cares? If you’re using Internet Explorer, you’re either not reading this post or trapped at a corporate job somewhere that won’t let you change your browser, so you can always check this out when you get home. Now. Where was I? Oh yes, the text-transform property. Here’s what we’re going to do: let’s look at the footer to my blog as it is right now.

my footer as-is

We’ll just focus on changing the code on the heading to make it look like it’s been letterpressed for the purposes of this tutorial. Here’s the CSS that creates the “ABOUT” heading look at present:


.custom #footer_1 ul.sidebar_list li.widget h3 {
color:#ffffff;
font-family:Arial;
font-size:20px;
letter-spacing:0;
text-transform:uppercase;
}

Here’s how we’re going to change it to make it look letterpressed. First, add a text-shadow property, which will specify how blurry the shadow should be, where it should appear, and what color it should be. For letterpress to work, the shadow needs to be lighter than the color of the actual text, and the text should be a little darker than the background on which it appears. This is tough to do when your text is white, so we’re going to have to make some changes. We’re also going to have to make the text a little bigger to get it to show up. We’ll substitute the following code for what appears above:


.custom #footer_1 ul.sidebar_list li.widget h3 {
color:#666666;
font-family:Arial;
font-size:22px;
letter-spacing:0;
text-transform:uppercase;
text-shadow: 0px 2px 3px #999999;
}

This will give us the following effect:

pure css letterpress headers

Bear in mind that this effect only renders in certain browsers, so you need to use it on things that don’t matter as much if not everyone can see them. For users in other browsers, the headings with the settings above will still show up, but the text will be more difficult to read.

No Comments

Post a Comment

Your email address will not be published.