Creative Typography You Must Use

Is your text blurred with Photoshop? If yes, CSS3 offers some great text effects. To give a website a visually impressive look, designers put emphasis on neat and stylish typography. For years designers have depended on Photoshop, but CSS3 is a revolution with easy-to-create text effects. Mastering CSS3 properties not only helps designers to create cool text effects, but CSS3 properties are now supported by many browsers, therefore diminishing compatibility issues.

CSS3 Text Effects

The following selection of CSS3 effects will help to reduce the JavaScript and Flash snippets from your designer tool list.

1. Inset Typography With CSS3: Letterpress or inset text is an impressive text effect which can be created easily using CSS3 properties. How to create this in CSS3 is explained in this simply written tutorial. Inset text gives the text a debossed look that makes the text appear embedded in the background. It works perfectly in web kit browsers, but may not work in old browsers like IE.

More Info: http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

2. Create Beautiful CSS3 Typography: Stylizing your text may not be a tricky job, but to make it readable yet stylish is. Work through this tutorial and it will show you how you can make your text artistic but still be readable.

More Info: http://blog.echoenduring.com/2010/05/13/create-beautiful-css3-typography/

3. Letterpress Effect With CSS Text-Shadow: Give your text a cool look via this incredible CSS property. Letter press was previously considered an industrial printing method, and it is now frequently used in website design. CSS3 has a very interactive way to create this effect.

More Info: http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow

4. Cool Anaglyphic Text Effect with CSS: Chris Spooner a very creative web designer explains in this tutorial how to create an anaglyphic text effect by using a simple CSS technique. Anaglyphics are the 3D images that can be seen with 3d specs. And giving the same 3D look to the text would be an amazing venture.

More Info: http://line25.com/tutorials/how-to-create-a-cool-anaglyphic-text-effect-with-css

5. Text Rotation with CSS: This one is probably my favorite one, as many popular browsers support text rotation. Jonathon Snook has written this very effective tutorial on how to transform text. Rotation
can give text a very stylized look, and by using CSS3, there is no need to stick to boring horizontal effects only.

More Info: http://snook.ca/archives/html_and_css/css-text-rotation

6. Create Outline To Your Text: Outlining text with an impressive color can give it a cool look. Matt shows you how to outline text with his tutorial using CSS. But the drawback of this property is that it only works in Safari and Chrome.

http://www.cardeo.ca/adding-an-outline-to-your-text-using-the-css3-text-stroke-property-3/

7. CSS Gradient Text Effect: Designers use gradient effects to create glossy text. This tutorial will help you create a fancy heading by using a simple CSS trick. It works on all browsers, including IE6.0 (Only a PNG hack required). Basically this look is achievable by adding a 1px PNG (alpha transparency level) over the text.

More Info: http://webdesignerwall.com/tutorials/css-gradient-text-effect

8. Subtle CSS3 Typography: I am sure this tutorial will instantly grab the attention of every designer. All thanks to CSS3 outlines and text shadows properties which Jeffery Way uses to create this subtle typography. And the amazing part is no one can distinguish that it is created with CSS3 rather Photoshop.

More Info: http://code.tutsplus.com/tutorials/subtle-css3-typography-that-youd-swear-was-made-in-photoshop–net-13811

9. Cool Text Effects Using CSS3 Text-Shadow: Quite an amazing effect, highlight selected text in your favorite color. This property is supported by almost all browsers. So have fun with this amazing effect.

More Info: http://hallofhavoc.com/2011/03/cool-text-effects-using-css3-text-shadow/

10. Create 3D Text Using CSS3: Everyone loves 3D, so does Rohit Aneja. He adds text shadow to headings and paragraph tags to create the 3D look.

More Info: http://www.cssrex.com/tips-tricks/how-to-create-3d-text-using-css3/

11. CSS3 Tilt-shift Text: Learn to create a Tilt-Shift text effect. The author has used offset-y and blurred the radius from the top and bottom edges to create a lens blur effect specified with Tilt-Shift effect. Also, rotation is used so that the text matches the background.

More Info: http://simurai.com/lab/2010/07/26/tilt-shift/

There are few more attractive css based typography such as http://designshack.net/articles/css/css3-cookbook-7-super-easy-css-recipes-to-copy-and-paste

http://simurai.com/lab/2010/08/20/zeppelin/

Keeping using and have fun!!! :)

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s