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.

Embossed Text on the iPhone

Apple love the embossed text technique. Pretty much all of the controls that are available through the APIs have embossed text out of the box. Below are a few examples…

We can emulate these exact same effects within any browser that supports the CSS text-shadow attribute (more on that later). In fact, the techniques I describe below can be used within Photoshop for example to achieve similar results that are outside of the browser – the fundamental rules that I outline conform to any implementation, you just need to get the angle and the color combinations in the right place.

Light Text on a Dark Gradient

Example Shown in Safari 4

Generally the rule for lighter text on a darker gradient is as follows, use a text-shadow of -1px on the y axis, with the shadow as a dark color. In the example below, I have used a dark blue to reflect a similar shade of blue as the gradient behind it:

text-shadow: 0px -1px 0px #374683;

Dark Text on a Lighter Gradient

Example Shown in Safari 4

So to do the opposite, we flip everything on its head. The text-shadow is now a positive value at 1px on the x axis, with the text-shadow color being light, or pretty much white in this case:

text-shadow: 0px 1px 0px #e5e5ee;

Browser Support

Unfortunately, this is where life gets tough… Only Opera 9.5+, Safari 1.1+, Konqueror 3.4+ and iCab 3.0.3+ supports the text-shadow CSS attribute. Firefox hasn’t got it implemented yet (although it is in the 3.1 betas – thanks @paulstraw) Firefox 3.5 now supports it, however IE has a workaround which you can read more about here. For your benefit, my second example could be written like so for IE 7:

filter: dropshadow(color=#e5e5ee,offX=0,offY=1);

Tools to help you learn…

Learning jQuery 1.3	CSS - The Missing Manual	jQuery UI 1.6