HTML and CSS Reference
In-Depth Information
#cta {
position: absolute;
top: 210px;
left: 190px;
color: white;
font-family: Verdana;
font-size: 16px;
cursor: pointer;
text-shadow: 0px 0px 5px #000000;
}
</style>
</head>
<body>
<div id=ad>
<section>
<div id=cta>Click Here</div>
</section>
</div>
</body>
</html>
Add the updated code and refresh your browser, and you'll see an example of text shadow in action within our ad
(see Figure
5-6
).
Figure 5-6.
An ad with a CTA using the text-shadow property in CSS3
While a drop shadow may be hard to see, adding it on the copy allows a user to view the important information
much more clearly by separating it from the background. This is especially the case when using drop shadows on such
an important copy feature of an ad as a CTA. The text shadow property's syntax is identical to that of the box-shadow
property, but it applies only to fonts. It also allows the addition of this effect natively in the browser, without having to
use images with the drop shadow effect applied.
