Here are some cool and easy to implement text shadow effect that I have been using a lot recently. They don’t take much but they do add a lot more depth and detail to your text.
That one is subtle but looks great. All it takes is this little bit of CSS.
text-shadow: #fff 0 1px 0;
The text-shadow style accepts four different values:
- The color (hex code)
- The x-coordinate relative to the text (pixels)
- The y-coordinate relative to the text (pixels)
- The blur radius (pixels)
For the code above, I have set the color to white (#fff) with no x-coordinate value, a 1 pixel y-coordinate value and no blur radius. So my white text-shadow appears as a white stroke 1 pixel below my text, giving it a bit of depth.
You can also use a similar style to create a letterpress effect.
This effect uses the following CSS:
text-shadow: #777 0 2px 3px;
We could even take it a step further and add a second text-shadow.
The text-shadow style also accepts multiple settings, separated by a comma.
The above CSS looks like this:
text-shadow: -1px -1px 2px #333, #777 0 2px 3px;
The difference is subtle but very effective.
Here are some examples of other text shadows:
text-shadow: #444 1px 1px 1px;
text-shadow: #000 0 0 20px;
text-shadow: #222 1px 1px 0
As it stands, the text-shadow style does not work in current releases of IE, though it is suppose to work in IE 9.