HTML and CSS Reference
In-Depth Information
■
Note
a text shadow can also be applied to web fonts (see Chapter 4).
Border Radius
Another almost finalized feature of the specification is border radius, probably one of the early CSS3 features that had
all designers jumping for joy. They called for this effect for a long time, the reason being that before border radius,
designers needed to export rounded images via Photoshop and load them into the page. This was time-consuming
to develop, as well as costly to download to a user's machine. Now without the need of Photoshop, we can let the
browser handle the heavy lifting. Let's add some rounded borders to our ad example (see Listing 5-7).
Listing 5-7.
Border Radius Example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#ad {
position: absolute;
width: 300px;
height: 250px;
background-color: white;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
background:
url(logo.png) 20px 10px no-repeat,
url(300x250Bg.jpg) 0px 0px no-repeat;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#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>
