0
0
In this article I'll show you how to work with text-shadows in CSS 3.
This is a very simple feature that was incorporated into the css 3, and it is very good to add it in the text.
The text-shadow property is responsible for adding a shadow to text through the CSS3. As we can see in Listing 1, the statement is very simple. In our example we will give a black shadow to a <h1> in gray.
Let's create an HTML document and add a <h1>. In this <h1> will be applied the text-shadow effect:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Applying Text-shadow</title>
<style type="text/css">
h1{
text-shadow: #000 2px 3px 2px;
}
</style>
</head>
<body>
<h1>text-shadow</h1>
</body>
</html>
With this effect, our example will look like this:
In our example, #000 is the shadow color, the first value (2px) is the horizontal distance of the shadow relative to the element, the second value (3px) is the vertical distance of the shadow relative to the element and, the third value (2px ) is the radius of the shadow (blur effect).
As in any other statement in CSS, we can use any unit of measure to define the distance and radius of the shadow, not just pixels, allowing the developers choose your needs.
See you in the next article
See the prices for this post in Mr.Bool Credits System below: