: 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

@Murray976

If you are looking just for a 3D effect you can use Mark Dotto's technique! but in general you can find various effects just Googling "CSS Text Shadow effects".
Some of the good ones on Design Shack!
This is just for a quick use, but Alan's Answer is probably what you're looking for in terms of learning what and why some values are a good shadow.

Vote Up Vote Down

@Hamm6457569

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.

Vote Up Vote Down