7 cool CSS text effects

CSS Gradient Text EffectOne of the newest trends in CSS design deals with text effects. Despite its relatively small adoption, it gains popularity day by day. A great advantage of CSS text effects is that you do not need to rely on flash to replace text with images, with the obvious penalty on loading speed.

Intro texts are taken from the respective showcased pages.

1. The CSS text-shadow property

The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it’s not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image.

2. Cufón, an Alternative to sIFR for Image Replacement

Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use. To achieve this ambitious goal the following requirements were set:

• No plug-ins required – it can only use features natively supported by the client


• Compatibility – it has to work on every major browser on the market


• Ease of use – no or near-zero configuration needed for standard use cases


• Speed – it has to be fast, even for sufficiently large amounts of text

(pic taken from http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/)

3. How to Create a Cool Anaglyphic Text Effect with CSS

Anaglyphs are those amazing 3D images that are created by offsetting two of the red, green and blue channels, and are viewed with those nerdy looking 3D glasses with different coloured lenses. I don’t know if this effect works for real, as I’ve unfortunately misplaced my 3D specs, but it’s a pretty cool text effect nevertheless! Let’s take a look at how a similar style can be created for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup.

4. CSS Gradient Text Effect

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.

5. Text Embossing Technique With CSS

If you’re like me, you love embossed text like it is going out of fashion. In fact, it’s liked so much right now by many web designers that it featured in Smashing Magazines “Web Design Trends for 2009” article which firmly puts it up there! In this article I will show you a couple of real world examples of this, as well as describing how to implement this effect with CSS. More importantly, I give you the rules around how to correctly add an embossed effect to any text depending on the colors used.

6. Create a Letterpress Effect with CSS Text-Shadow

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!

Letterpress – Isn’t that a type of industrial print method? That’s right! But the effect has also made its way into web design. Check out the previous feature showcasing examples of how designers are using this cool ‘de-bossed’ look on designs across the web.

7. Text Rotation with CSS

Once again, after reading somebody else's article, I felt inspired to put together an alternative example. In this case: Text Rotation.

Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. Well, maybe not so much a sprinkle. It's like the top fell off the pepper shaker and you've suddenly got a large pile of pepper on your food. It makes me want to sneeze.