Shadow for medium sized text

there are many examples of text-shadow effects on the web but only for very large text or particular background/foreground colours.

I’ve tried creating an engraved effect or a 3D effect (I really like this one) but I never got something that looked conclusive and I think it has to do with the size of the text because you can’t have so many shadows. If you zoom in however the effect is revealed.

Here’s my current CSS:

        h1 {
            background-color: #eeefee;
            color: #001d8c;
            font-size: 25px;                
            text-shadow: 0px 1px 0px #CCC, 0px 2px 0px #AAA, 0px 3px 3px #666;

and what it looks like: (effect is not obvious, harder to read, maybe even a bit dirty)
enter image description here

What values should I use to get a good effect ?


The difficulty here is that you’re asking the wrong question. In fact, it’s wrong twice over, because it’s also unanswerable. There is no one answer to “What values should I use to get a good effect?” because it depends on what effect, at what size, on what background.

That you ask for values, rather than a technique, tells me you’ve not fully grasped what you are trying to do: emulate the appearance dimensionality in the real world. There is no substitute, then, for observing real objects and real embossing closely.

The illusion of dimension is created by light and shadow. In the real world, highlights and shadows tells us about the shapes and textures of things. Light, to look natural, has a dominant source that illuminates from a single direction, like the sun. Your 3D or embossing effect, then, has to be consistent, with the highlights at one angle and shadows at the opposite (180 degree) angle. If your highlight is 1 px up and 1 px left (a 45 degree angle), then your shadow must be down and to the right at a 135 degree angle. If these angles aren’t exactly complementary the illusion is broken and the effect is hokey.

The size of the highlight or shadow indicates the distance, height or depth of an object, and the gradient (or lack of one) at the edge communicates roundness in an object, the relative size of the light source, or distance of a shadow.

The bottom line: you have to look at the real world and copy that. Highlights and shadows are not arbitrary.

On the web, you are limited by the fact that the smallest increment you have is a single pixel. A 3px-wide gradient highlight or shadow on a large letter can make it look slightly raised, but on 18px text will most likely look like an unnatural glob. Worse, it will also impair the readability of the text — a far more important consideration.

Source : Link , Question Author : WaterBearer , Answer Author : Alan Gilbertson

Leave a Comment