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 |
Similar Articles:
CSS Positioning Techniques for Nested DIVs
Custom 404 with jQuery and jQuery UI
Amazon EC2 and the WAMP stack
Final days development...
Amazon AWS Console
out of curiousity, you know of any good vector tutorials for embossing text? like in Illustrator?
You should update the post.. as of Firefox 3.5, css text-shadow is fully supported..
Yep, updated!
Either the terminology used in this article is inaccurate, or my vision’s rather wonky. What looks to me to be being done here is not embossing but engraving: the marking of text or decorations *into* a surface (à la CSS border-style: inset). Embossing is the opposite: causing text (or designs) to stand *out from* the surface (as with CSS border-style: outset).
To create the full embossed effect you can combine both of the examples placing a dark shadow top and left and a light one right and bottom. The good news is that the text shadow property allows you to specify multiple shadows.
I always use RGBa when I define a shadow this means don’t have to worry about the background colors that the shadow may fall on.
So my embossed effect works like this
text-shadow:0px -1px 0px rgba(0,0,0, .4), 1px 1px 2px rgba(255,255,255, 0.6);
This can be overkill on small text, but it looks great on headings.
Great tutorial! This is very useful for CSS beginners like me. Hope to see more tutorials.
Good technique, but as said before needs to be updated for new Firefox browser. Also this is engraving rather than embossing.
good stuff, nice aricle
If u can do CSS Embossing with CSS., then Why did u do above your name with Image?
These really helped me to build my homepage, I can really appreciated if people take some time and write a usefull tutorial.
thnx a lot for such a nice post .M really happy with the results that I got by using your css .
text embossing make web title more cool. No more photoshop for text shadow effect. Thanks CSS3.