Stunning CSS3
A Project-based Guide to the Latest in CSS
About the Book
CSS3 adds powerful new functionality to the web’s visual style language to help you create beautiful and engaging designs more easily than ever. With CSS3, you can create eye-catching visual effects such as semitransparent backgrounds, gradients, and drop shadows without using images; display text in beautiful, unique, non-web-safe fonts; create animations without Flash; and customize a design to the user’s unique device or screen size without JavaScript.
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.
-
Speech Bubbles
Learn how to create the appearance of speech bubbles without using any images, just
word-wrap,border-radius, HSLA/RGBA,linear-gradient,box-shadow,text-shadow, andtransform. -
Notebook Paper
Learn how to create the appearance of a piece of notebook paper using
background-size, multiple background images,border-image,background-clip, and@font-face. -
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.
Look inside
-9.png "Sidebar: The lowdown on the :nth-child() pseudo-class")
-51.png "The final speech bubbles effect in several browsers")
-38.png "Sidebar and browser support for box-shadow property")
-33.png "A page layout in iPhone using media queries")
-41.png "Implementing text-shadow")
-12.png "Diagram of background property, adding multiple backgrounds")
-29.png "Implementing transitions")
-12.png "A complete CSS3-based layout")
About the author
Zoe Mickley Gillenwater is a web designer, developer and consultant. In addition to Stunning CSS3, she wrote Flexible Web Design: Creating Liquid and Elastic Layouts with CSS, as well as the video training title Web Accessibility Principles for lynda.com. Zoe is currently a member of the Web Standards Project (WaSP) Adobe Task Force and was previously a moderator of the popular css-discuss mailing list. Find out more about Zoe on her blog and portfolio site or follow her on Twitter.
