HTML and CSS Reference
In-Depth Information
Figure 5-5.
An ad background with multiple backgrounds using CSS3
Calling the background property via CSS provides a comma-delimited list of image assets by URL location. The
order of images matters, so add the top-level asset first and the bottom level last.
Text Shadows
Lets add some copy to our ad unit by adding a call to action (CTA). But let's also add a drop shadow to the CTA as well.
Text shadowing is very similar to box shadowing, with the exception that text shadows can be applied only to fonts.
Let's look at working with text shadows (see Listing 5-6).
Listing 5-6.
Text Shadow 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;
}
