Text shadow using CSS
We all know or at least we guess that there are many ways to add a shadow to a picture or to a text. Photoshop is useful and has implemented tools which help giving styled shadow effects. But what shall we do if want to have text shadowed in our web page? We know that it isn’t usefully to put images because Bots can’t read the text in a image and won’t “appreciate” it.
CSS 3 eliminated the need of Photoshop when it comes to add a shadow to a text. A shadow offset is specified with two length terms that indicate the distance from the text:
- The first length term specifies the horizontal distance to the right of the text. We can use negative values which place the shadow to the left of the text.
- The second length term specifies the vertical distance below the text. Also we can have a negative vertical length term which places the shadow above the text.
A blur radius may be specified after the shadow offset. The blur radius is a length value that indicates the boundaries of the blur effect. After setting the blur radius we can add the color.
Let’s have some examples:
1) The example below will set a text shadow to the right. This is a simple example and we can easily observe that no color has been specified meaning the shadow will have the same color as the element itself, and no blur radius is specified meaning the text shadow will not be blurred:
h2 { text-shadow: 0.3em 0.3em }
2) The next example will place a shadow to the right and below the element’s text. The shadow will have a 4px blur radius and will be blue.
h2 { text-shadow: 3px 3px 4px blue}
3) The next example combine more effects specifing a list of shadow effects. The first shadow will be to the right and below the element’s text and will be blue. The second shadow will overlay the first shadow effect, and it will be yellow, blurred, and placed to the left and below the text. The third shadow effect will be placed to the right and above the text.
h2 { text-shadow: 3px 3px blue, yellow -3px 3px 2px, 3px -3px }
4) Take a look at this example:
.shadow {
background: white;
color: white;
text-shadow: black 0px 0px 5px;
}
Here the background and the text has the same color (white) and the shadow is black. This shadow effect added makes the text to be visible.
Note This property is not defined in CSS 1. It is possible not to have a text shadowed if we work with agents using CSS 1. This feature isn’t new in CSS 3, it was put into CSS 2 but only got implemented in Opera 9.5 and Safari 3 so far.
Post a comment
RSS/XML