| 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 backgrounds 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.
Get HTML5 and CSS3, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
