As browsers like Safari and Firefox have started supporting the text-shadow property, I’ve found myself using it more and more to add subtle dimension to my text. The best way to do that is making your text look inset. There are only two techniques; and while they’re pretty simple, it’s important to get your shadows and colors going the right direction.
Inset Text on a Light Background
A couple of things to remember here. First, the background needs to be light enough to see the dark text on top of it, but not too light. This inset uses a white shadow, and if the background is too light you won’t be able to see it. The text-shadow will go down 1px and to the right 1px. This way it looks like the light is coming from the top left and highlighting the bottom right corner of the text. The code is pretty simple, set a color, offset for horizontal and vertical and a blur value. We’ll be keeping it to 0 to get a nice clean edge for inset text.
text-shadow: #fff 1px 1px 0;
If it’s too harsh, you can adjust the color of the shadow to be somewhere in between white and the background color.
Inset Text on a Dark Background
This one’s a little easier. Just make a dark background and light text. This time we reverse the shadow position and inverse the color. So we have a dark shadow 1px top and 1px left. You probably won’t want to use black here. Find a mixture of black and the background color.
text-shadow: #000 -1px -1px 0;
The text-shadow property isn’t supported in all browsers, so you need to make sure your shadow isn’t a crutch that the design depends on. A bad example would be white text on a very light background. Sure the shadow helps it stand out but it will be virtually unreadable in Internet Explorer without it.
Above all, the key to this technique is subtlety. We don’t want highlights or shadows that stick out like a sore thumb. They should just add a hint of depth.
About: Jonathan Longnecker
Jonathan Longnecker is the co-founder of FortySeven Media
– a kick awesome design firm specializing in web, print and media creation. Jonathan loves simple designs that communicate quickly, and is fanatical about the details that sets their work apart. Find him on twitter (@necker47), and on the web at fortysevenmedia.com.
New CSS properties like shadows certianly provide new ways to style and deliver content on a web page. It is about time browsers start to support additional text styles. Technology especially internet speeds have evolved significantly in recent years. We need new web standards with a much wider support for text styles. However that said, browser inconsistency still creates problems althoug it has improved with time. I would still be wary of using inset shadows on text and other non standard fonts for this reason, at least for some more time.
Personally i still prefer to create this style in photoshop as browser support is fairly minimal. If IE8 supports it then I may start to use it more throughout the development phase…..
Would look better using a rgba instead of just 000, fff
Thanks. I was wondering if the word ‘inset’ was a reserved keyword like box-shadow uses.