HTML and CSS Reference
In-Depth Information
-webkit-box-shadow:
0px 1px 3px rgba(0,0,0,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
box-shadow:
0px 1px 3px rgba(0,0,0,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}
</style>
</head>
<body>
<div id=ad>
<section>
<div id=cta
class=button
>Click Here</div>
</section>
</div>
</body>
</html>
If you've followed along, refresh your browser, and you'll notice the outcome (see Figure
5-8
).
Figure 5-8.
Our ad with a sexy CTA button using CSS gradients and rounded borders
Adding gradients with CSS is a great way to leverage the browser to build a slick button or complex backgrounds
instead of using the traditional image approach. It's also easier on the end user, since it won't eat up k-weight and tax
a user for another download, both of which are huge gains in the advertising world. A tool I myself use quite often is
at
http://colorzilla.com/gradient-editor
,
specifically because it is easy to use, adds all the vendor prefixes, and
offers older Microsoft browser support via the filter property.
