How Text-Shadow Works
Anyone who has been using Photoshop for years knows exactly what a drop shadow is. It has always been popular as a quick way to add depth to text in order to make it jump off the page. The thing about the development of CSS over the years is that everyone always wanted a way to add a drop shadow to text on the web, while still keeping it as real text for SEO purposes. That’s where text-shadow came in. This added the ability to add either a crisp shadow or a blurred shadow to your text easily. To someone that isn’t familiar with CSS and text-shadow, their parameters could be confusing. Below, you’ll learn how to control text-shadows to get the effects that you want.
Text shadow works like the box shadow as far as the order and how you set up different properties. You control how far the shadow moves left or right and up and down, depending on the positive and negative values that you enter in. You can use RGBa, which stands for red, green and blue values, and a stands for alpha. the red, green and blue values are from 0 to 255 each. The alpha value goes from .1 to 1. A value of .1 is equal to 10%. You can also use hex values, which are the 6 digit values, which have no alpha transparency.
The html:
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Home</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<h1>Design Is Life</h1>
</body>
</html>
The CSS:
h1{
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
text-shadow: #DDD 0px 0px 9px;
color: #fff;
font-size:80px;
}
The Result:
If you set the first two values to 0, the the shadow will be centered. The effect above is a slight shadow, using a subtle grey as the shadow color. You can make your text-shadow any color of the rainbow. The final value determines the amount of blur that is applied.
The CSS:
h1{
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
text-shadow: -3px -3px 0px rgba( 50, 150, 50, .5);
color: #D1D1D1;
font-size:80px;
}
The Result:
The example above is with using the rgba method. The first 2 values determine how the shadow shifts. With 2 negative values, the shadow shifts left and up. With the green value increased, the shadow is mainly green, and it has no blue value. The last value of the parenthesis is .5 which means 50% transparency.
Conclusion
Text shadow isn’t difficult to master. After you understand which numbers determine the color of your shadow, which ones position the shadow, and which value sets the blur value, you’ll be able to implement text shadows in seconds. How did you do? Do you have any questions about text-shadows? If you need any help, leave your questions in the comments section below. There’s also the CSS Guide.