Gasston - The Book of CSS3

I can honestly say I will never need another book on this subject, and I doubt anyone else will either.

DEVON YOUNG, WRITER FOR CSS3.INFO

One of the best technology books Ive read.

CRAIG BUCKLER, OPTIMALWORKS LTD

An absolutely fantastic resource for developers and serious designers.

VISUAL SWIRL

A book you more than likely should have, even if you think you already have a pretty good handle on everything CSS.

456 BEREA STREET

An excellent introduction to CSS3both what you can do with it now and what is proposed for the future.

STEPHEN CHAPMAN, FELGALL.COM

There are entire sections of the CSS3 spec that I never really appreciated until I read this book.

DESIGNORATI

2ND EDITION

A Developers Guide to the Future of Web Design

by Peter Gasston

San Francisco

THE BOOK OF CSS3, 2ND EDITION. Copyright 2015 by Peter Gasston.

All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher.

Printed in USA

First printing

18 17 16 15 14 1 2 3 4 5 6 7 8 9

ISBN-10: 1-59327-580-3

ISBN-13: 978-1-59327-580-8

Publisher: William Pollock

Production Editor: Serena Yang

Cover Illustration: Octopod Studios and Garry Booth

Interior Design: Octopod Studios

Developmental Editor: William Pollock

Technical Reviewer: Patrick Lauke

Copyeditor: LeeAnn Pickrell

Compositor: Lynn LHeureux

Proofreader: James Fraleigh

Indexer: Nancy Guenther

For information on distribution, translations, or bulk sales, please contact No Starch Press, Inc. directly:

No Starch Press, Inc.

245 8th Street, San Francisco, CA 94103

phone: 415.863.9900;

www.nostarch.com

The Library of Congress has catalogued the first edition as follows:

Gasston, Peter.
The book of CSS3 : a developers guide to the future of web design / Peter Gasston.
p. cm.
Includes index.
ISBN-13: 978-1-59327-286-9
ISBN-10: 1-59327-286-3
1. Web sites--Design. 2. Cascading style sheets. I. Title.
TK5105.888G376 2011
006.7--dc22

2011010098

No Starch Press and the No Starch Press logo are registered trademarks of No Starch Press, Inc. Other product and company names mentioned herein may be the trademarks of their respective owners. Rather than use a trademark symbol with every occurrence of a trademarked name, we are using the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark.

The information in this book is distributed on an As Is basis, without warranty. While every precaution has been taken in the preparation of this work, neither the author nor No Starch Press, Inc. shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in it.

For Sarah, my sister.
Your courage is inspiring.

1
INTRODUCING CSS3

2
MEDIA QUERIES

3
SELECTORS

4
PSEUDO-CLASSES AND PSEUDO-ELEMENTS

5
WEB FONTS

6
TEXT EFFECTS AND TYPOGRAPHIC STYLES

7
MULTIPLE COLUMNS

8
BACKGROUND IMAGES

9
BORDER AND BOX EFFECTS

10
COLOR AND OPACITY

11
GRADIENTS

12
2D TRANSFORMATIONS

13
3D TRANSFORMATIONS

14
TRANSITIONS AND ANIMATIONS

15
FLEXIBLE BOX LAYOUT

16
VALUES AND SIZING

17
GRID LAYOUT

18
BLEND MODES, FILTER EFFECTS, AND MASKING

19
THE FUTURE OF CSS

A
CSS3 SUPPORT IN CURRENT MAJOR BROWSERS

B
ONLINE RESOURCES

This book is the culmination of eight years writing about CSS3, both on the Web and in print. The browser and CSS landscape has changed a lot in that short time and continues to change today, bringing new features and implementations at a rate thats difficult to keep up with. The CSS3 specification is written in (often dense) technical language thats intended for implementers rather than end users, and my intent in writing this book was to bridge the gap between specification and web developer.

The book follows a loose order based on stability of implementation: In the earlier chapters, I cover the CSS properties that are well implemented and used on a daily basis, but as the book progresses, the technologies become more experimental and are implemented in fewer browsers. As a result, in the final few chapters I sometimes rely on interpretation of the CSS3 specification to explain how future properties should behave. I would hope that there are few mistakes, but I accept that any that exist are based on my own misunderstanding.

In addition to the various modules of the CSS3 specification itself, an invaluable resource for me while writing the book was the Mozilla Developer Network (https://developer.mozilla.org/), a peerless collection of articles about anything web relatednot least CSSwhich is all the more amazing for being written by volunteers.

The text used in many of the code examples is taken from books in the public domain that are available from Project Gutenberg (http://www.gutenberg.org/). All images in the book that are not my own creations are credited in the relevant chapters.

This book would not have been possible without the guidance of the team at No Starch Press, especially Serena Yang and my editors, Keith Fancher (first edition) and Bill Pollock (second edition); between them they made me write more clearly and helped me transition from blogger to author. Id also like to thank my technical editors: Patrick Laukes rigorous eye for detail and understanding of technical specifications was instrumental in helping me find focus in the expanded scope of the second edition, and Joost de Valk not only acted as my technical editor for the first edition but also gave me my first opportunity to write about CSS3 when he created CSS3.info eight years ago.

Id also like to thank my colleagues at Preloaded, Poke, Top10, and rehabstudio for their support and encouragement in writing two editions of this book; everyone at the many London web community meet-ups; my mum for teaching me the value of hard work; and my dad for buying me my first computer almost thirty years agoI promised Id pay him back one day, and hopefully this book will go some way toward that debt.

Let me tell you a little about who I think you are: Youre a web professional whos been hand-coding HTML and CSS for a few years; youre pretty comfortable with creating complex layouts, and you know not only your div from your span but also your bold from your strong ; youve read a little about CSS3 and may even have started experimenting with some of its more decorative features like rounded corners, but you want to gain a deeper understanding of the fundamentals.