Blog

The days of flat/block color text are dead you can apply many effects by just being a bit creative with CSS, CSS3 makes it a little bit easier with the text shadow style BUT until ie6 dies designers are having to find alternative ways to create text effects.

You are probably asking why would you do this when you can make the text in Photoshop and insert it as an image?! Well from past experiences if you do that you can guarantee that your client will change the text at last minute and you wont have saved the .psd file so you will have to recreate then they will change there mind again…so just do it the CSS way and let your browser render it…easy!

Below I will show you a way of creating a letterpress effect that is compatible with ie6 as well as modern browsers then I will show you how easy it is using CSS3.

Cross browser

So this is the HTML we are going to use to create a Letterpress effect that will work cross browser.  I doubt you will want it to say ‘iamkreative’ so you can change that if you like.

1
2
3
4

<div class="holder">
<span class="indent">IAMKREATIVE</span>
<span class="main-text">IAMKREATIVE</span>
</div>

That’s pretty straight forward right? So next is to style the text.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.holder {
width: 450px;
height:60px;
position: relative;
padding: 50px 20px;
overflow:hidden;
background:url(tooltips/bg.jpg) no-repeat;
}
.indent {
font:bold 55px Verdana, Geneva, sans-serif;
color:#dadada;
display:block;
}
.main-text {
font:bold 55px Verdana, Geneva, sans-serif;
color:#333;
position: absolute;
top:49px;
left:19px;
}

You would think we would move the indent text across underneath the main-text but we are moving the main-text to the left to reveal a part of the indent to give the effect, simple right?

The CSS3 way

This is so easy, but some browser will not support CSS3 features as of this post. Google have released a plugin called Chrome Frame for IE so you can use CSS3 features, but if you smart enough to install the plugin you will also be smart enough not to be using IE!

1
2
3

<div class="holder">
<span class="main-text">IAMKREATIVE</span>
</div>

Only difference is we need to delete the indent class as we don’t need it because CSS3 will do all the work.

1
2
3
4
5
6
7

.main-text {
font:bold 55px Verdana, Geneva, sans-serif;
color:#333;
position: absolute;
top:49px;
text-shadow: 1px 1px 0px #dadada;
}

If you don’t know a lot about CSS3 I will explain this below.

The final effect using text-shadow

Hope this tutorial helps you out, if you have a better way of creating this effect please share.