Jalokim
Manager
 | I bet we've all seen the new fad in town, or at least in the web graphics world. Letter press or slight indent text is now very modern and brings out some really cool effects with your typography. Here are some examples of letterpress. The examples are from deviantart.com which uses a large variety of rendered letter pressed typography.  | Well NO more do we need to create images. CSS3 can help us. Today I'm going to explain ,step by step how to get somewhat of a letterpress effect with css text shadow. This is what we are going for:  The whole idea of this letterpress is to create a slight shadow that is perfectly shading the background. First you need to apply the letterpress effect to your div class or id.
Now as we all know the first pixel size defines the x-offset , in our case its 0 we don't want the shadow to be move horizontally. The next is the y-offset this we need to keep as close to our text as possible thats why its set to 1. The third is out blur size... we don't want a giant blur we need a slight fade. So its set to 2 pixels. Now here is the tough part. The color of the shadow has to perfectly shade the text. Using photoshop or other image editors you can test and try out the best shadow version for your letterpress. I suggest recreating the backgound in your photoshop, type in some text,  apply dropshadow as you'd normally do .. then set the drop shadow to color burn at around 50% percent.  This gives the idea shade. Just grab a color picker and select the color, apply it to your CSS.  And TA DA you have an almost perfect letter press effect.  Of course this works best on dark text, with a white or grey shadow. Remember if you have bright text, use color burn to find out the shade... if you using a dark text you need a light shadow. Guest posting activated |
Mon Aug 17, 2009 5:19 pm by MrMega
.
