The community is working on translating this tutorial into Spanish, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".
Text shadow
In CSS3 a new feature have been introduced - the text shadow! When using the text-shadow property we have control over three things - the color, the placement and the blur. This means that there is four values:
- color
- x-coordinate
- y-coordinate
- blur radius
You can use either HEX colors of RGBa colors when you define the color. The coordinates are based on the placement of the text and can be either positive or negative. The amount of blur defines how 'washed-out' your shadow is.
Here's a simple example;
<style>
.simpleShadow {
color: #000;
font-size: 2em;
text-shadow: 1px 1px 5px #fff;
}
</style>
<p class="simpleShadow">Simple shadow effect</p>Okay, so know you know that it is possible to add backgrounds to your text, but it is not really that impressive, is it? Well this is why I have included a number of fancy text-shadow effects to show you some of the possibilities (and they are plentiful!)
Embossed!
Now you're impressed, right? Here is what the CSS looks like for this type of typography. Oh, and please note that you can actually add multiple text-shadow to every element. In this example I've added a white one ( -1px -1px 1px #fff ) and a black one (2px 2px 1px #000 ). If you use this styling you need to change the color of the font to one that matches your background
City Lights!