A Project-based Guide to the Latest in CSS
About the Book
You’ll learn how to accomplish these effects and more by working through a series of practical yet cutting-edge projects. Each chapter walks you through standalone exercises that you can integrate into projects you’re working on, or use as inspiration. You’ll learn all of the most popular, useful, and well-supported CSS3 techniques, plus:
- How to use CSS3 to enhance your pages, not just in terms of looks, but also in terms of usability, accessibility, and efficiency
- When and how to provide workarounds and fallbacks for older, non-supporting browsers
- How to create stunning designs with unique typography and beautiful graphic details
- Advanced new selectors to streamline your markup and make it less prone to human errors
- New methods for creating multiple-column layouts
- How to quickly and easily create mobile-optimized web designs without using scripting
Table of contents
The CSS3 Lowdown
Learn how CSS3 is different from CSS 2.1, get an overview on current browser support, find out how to work around older browsers, and learn CSS3 best practices for making it robust and future-proof. You'll also learn about the practical benefits of using CSS3, including a number of reasons you can use to convince skeptical clients or bosses.
Learn how to create the appearance of speech bubbles without using any images, just
Learn how to create the appearance of a piece of notebook paper using
background-size, multiple background images,
Styling Images and Links by Type
Learn how to add icons to links based on their type, as well as style photos differently from other types of images, using some new CSS3 attribute selectors.
Improving Efficiency Using Pseudo-classes
Learn how to alternate styles on a series of elements, as well as create a table of contents that highlights the current section of the document, using some new CSS3 pseudo-classes, transitions, and animation.
Different Screen Size, Different Design
Learn how to restyle an entire page layout to work with different screen sizes and mobile devices using media queries and multi-columns.
Flexing Your Layout Muscles
Learn how to create multi-column layouts for the entire page, as well as widgets on the page, using the flexible box layout model and
box-sizing. You'll also get a preview of the upcoming template layout and grid positioning modules.