10 resources to get the most out of the CSS text-shadow property

by Jean-Baptiste Jung. 32 Comments -

The CSS text-shadow property is very popular among web designers and front-end developers. In this article, let’s take a look at 10 resources to get the most out of the text-shadow CSS property.

Create a Letterpress Effect with CSS Text-Shadow

Let’s start this list of tutorials with one that will definitely show you the potential of the text-shadow property. In this tutorial, you’ll learn how to create a stunning (and very popular these days) text effect using CSS and the text-shadow property.

» Read tutorial

Creating cross browser compatible CSS text shadows

Since text-shadow is a part of CSS3, some browsers (who said IE??) have not implemented it yet, and some hacks need to be used to make it work properly.
The following article will show you how to create cross browser compatible text shadows.

» Read tutorial

Improve the Quality of Bold Text in Safari with text-shadow

Although Mac OS X has a pretty good font rendering engine, bold text in Safari is often a bit dirty. Did you know that by using the text-shadow property you can create beautiful bold text? This article will show you how to.

» Read tutorial

CSS text-shadow Fun: Realtime Lighting Demo

Using the text-shadow CSS property as well as some JavaScript, humorous experimental effects can be created. If you haven’t already, you can definitely say goodbye to Flash.

» Read tutorial

Cross browser text shadow

The filter non-standard property, which has been created by Microsoft, can fix some compatibility issues with IE 6, 7 and 8.
This interesting article will show you how to efficiently use the filter property to create text effects similar to those you can get with text-shadow.

» Read tutorial

Mootools text drop-shadow

When you need full cross-browser compatibility and still want to use CSS3 properties, JavaScript is always here to help. This tutorial will show you how to recreate the text-shadow CSS property using the MooTools JavaScript framework.

» Read tutorial

Text embossing technique with CSS

Text embossing is very popular in the world of web design and front-end web development. Indeed, even if I’m quite bored to see it on so many websites, it looks very nice.
And it is also very easy to implement. Just read this tutorial and you’ll know how to do it.

» Read tutorial

Photoshop like effects using CSS

Some browsers allow multiple values to the text-shadow property, which allow you to create effects like this one. I don’t think I’ll implement that kind of effect on any of my websites, but I’m happy to know how I can do it.

» Read tutorial

“Acid” text effect using text-shadow

Another nice text effect created using the text-shadow property. The page is in German, but fortunately everyone can understand the CSS code.

» Read tutorial

Super awesome buttons with CSS3

CSS buttons are very cool and they are a nice way to use your CSS3 skills. In this great tutorial, you’ll learn how to create stunning buttons using text-shadow and a few other CSS3 properties.

» Read tutorial

Comments (32) - Leave yours

  2. Dean Saliba said:

    I’ve often wondered how I could change the effect of the text. I’m a bit worried about messing with the CSS file but if I make a copy of it I’m sure that will be OK.

  7. Mark Stoecker said:

    Thanks for the list Jean. I have it bookmarked on delicious for now. I’ve been hesitant to start using CSS3 in my website designs due to the lack of support. Even though I’m a die-hard FireFox user and think everyone should use it, I know the sad truth is many people still use IE. Do you know of any good resources, or tips, to use CSS3 but still provide good design to browsers that don’t support it, other than just using IE conditional tags or javascript browser sniffing? Thanks.

  10. Alex B. said:

    Textshadow ist another one feature that nobody needs on websites. U have to much browser, witch doesn’t support css3. To have a nice Effect, u have to choose large font size an a colored background.

  11. Stuart Davison said:

    Awesome post – will be trying some of these techniques out with our imminent release of the new website. It’s always great to be pushing the boundaries of what is new in terms of CSS and accessible code. Keep up the good work.

  13. James Waugh said:

    thanks heaps !!!

    I particularly like the “Mootools text drop-shadow” tutorial – I’ll be definately implementing that one on my next site update. It looks quite professional / natural – not too “cheesy” at all!

    Cheers.
    SW.

  21. Rwh said:

    This is really really helpful and came in a timely manner. I am gonna try implementing some of these tricks on my blogs, especially the super awesome buttons with css.I wasn’t really aware you could do so much with css. Thanks a bunch for this useful and super cool bags of tricks.

  23. Mark said:

    What I like most is the photoshop like effects of CSS, multiple shadows. But, colors must not be too bright. Plain text shadows are also good too.

  30. Rob said:

    It’s really helpful to know that we could do so many amazing things with knowing only some CSS tips and ideas. It’s really great to know the resources we need to get and update our CSS information!

  31. Jamie said:

    I like the Cross browser text shadow and the “awesome buttons”. Thanks for incorporating these resources. It’s nice to have them handy.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!