Tip 24
Working with Shadows, Gradients, and Transformations
Rounded corners get a lot of attention, but they’re just the beginning of what
we can do with CSS3. We can add drop shadows to elements to make them
stand out from the rest of the content, we can use gradients to make back-
grounds look more defined, and we can use transformations to rotate elements.
Let’s put several of these techniques together to mock up part of a banner
for the upcoming AwesomeConf, a trade show and conference that AwesomeCo
puts on each year. The graphic designer has sent over a PSD that looks like
the following figure, with a tilted name badge and a big slightly transparent
white space where some web content will eventually go.Figure 27—The original concept, which we can re-create using CSS3
We can do the badge, shadow, and even the transparency all in CSS. The
only thing we’ll need from the graphic designer is the background image of
the people.The Basic Structure
Let’s start by marking up the basic structure of the banner in HTML. In a
new HTML file, add this code:css3_banner/index.html
<!DOCTYPEhtml>
<htmllang='en'>
<head>
<metacharset="utf-8">
<title>SampleBanner</title>
<linkrel="stylesheet"href="stylesheets/style.css">
<divid="conference">report erratum • discussWorking with Shadows, Gradients, and Transformations • 157
Download from Wow! eBook <www.wowebook.com>