Greig - CSS3 Pushing the Limits

This edition first published 2013

2013 Stephen Greig

Registered office

John Wiley & Sons Ltd, The Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, United Kingdom

For details of our global editorial offices, for customer services and for information about how to apply for permission to reuse the copyright material in this book please see our website at www.wiley.com.

The right of the author to be identified as the author of this work has been asserted in accordance with the Copyright, Designs and Patents Act 1988.

All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, except as permitted by the UK Copyright, Designs and Patents Act 1988, without the prior permission of the publisher.

Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books.

Designations used by companies to distinguish their products are often claimed as trademarks. All brand names and product names used in this book are trade names, service marks, trademarks or registered trademarks of their respective owners. The publisher is not associated with any product or vendor mentioned in this book. This publication is designed to provide accurate and authoritative information in regard to the subject matter covered. It is sold on the understanding that the publisher is not engaged in rendering professional services. If professional advice or other expert assistance is required, the services of a competent professional should be sought.

Trademarks: Wiley and the Wiley logo are trademarks or registered trademarks of John Wiley and Sons, Inc. and/ or its affiliates in the United States and/or other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Ltd. is not associated with any product or vendor mentioned in the book.

A catalogue record for this book is available from the British Library.

ISBN 978-1-118-65263-3 (pbk); ISBN 978-1-118-65260-2 (ebk); ISBN 978-1-118-65261-9 (ebk)

Set in 9.5/12 Myriad Pro Regular by Indianapolis Composition Services

Printed in the United States by Bind-Rite.

Publishers Acknowledgements

Some of the people who helped bring this book to market include the following:

Editorial and Production

VP Consumer and Technology Publishing Director: Michelle Leete

Associate DirectorBook Content Management: Martin Tribe

Associate Publisher: Chris Webb

Associate Commissioning Editor: Ellie Scott

Project Editor: Sara Shlaer

Copy Editor: Chuck Hutchinson

Technical Editor: Kevin Bradwick

Editorial Manager: Jodi Jensen

Senior Project Editor: Sara Shlaer

Editorial Assistant: Annie Sullivan

Marketing

Associate Marketing Director: Louise Breinholt

Marketing Manager: Lorna Mein

Marketing Assistant: Polly Thomas

Composition Services

Compositor: Indianapolis Composition Services

Proofreader: Joni Heredia Language Services

Indexer: BIM Indexing & Proofreading Services

About the Author

Stephen Greig is a hard working designer and front-end developer who is very passionate and considerate about the work he producesa passion that is emphasized when it comes to CSS, particularly the more advanced and experimental CSS3 modules. It was his experimenting with these modules on his blog (http://tangledindesign.com/blog/) that paved the way for this book. Outside of his profession, Stephen enjoys sports, travelling, new experiences, and socializing with friendswho are often found in pubs! Follow him on Twitter via @Stephen_Greig.

Acknowledgments

First and foremost, Stephen would like to thank his partner Hannah, who put up with months of neglect and oversight, yet still offered a voice of constant encouragement throughout the writing of this book. Furthermore, Stephen is extremely grateful to his family for their continued support; in particular, hed like to thank his dad, Syd Greig, for supplying many of the fantastic photographs used in the demonstrations throughout this book. The writing process was smooth and untroubled, thanks in no small part to project editor Sara Shlaer, who provided constant guidance and essential critique, playing a major part in crafting the final output. Huge thanks must also go to copy editor Chuck Hutchinson, who meticulously perfected everything he was presented with, and technical editor Kevin Bradwick, whose expertise and eagle eye ensured that all code functioned correctly and was error free.

Introduction

CSS (Cascading Style Sheets) is a core requirement in any web designers toolkit, providing lifeless HTML with heart and soul since its inception in 1996. CSS has come a long way since then, though, and with the latest incarnation, CSS3, now boasts a vast range of impressive features that really push the boundaries of its status as a simple styling language. It doesnt just paint the walls of your web pages anymore; now, the walls move, they adjust their shapes, the paint changes color, and all these effects are achieved without reliance on the bigger and smarter cousin that is JavaScript.

What Is CSS3?

CSS3 has received an incredible amount of coverage across the web, quickly transforming it into one of the industrys most frequently used buzzwords, but its soon to be eclipsed and outdated by CSS4, right? Wrong!

In contrast to the preceding versions of CSS (1 and 2.1), CSS3 is not one giant specification that will eventually progress to CSS4 and beyond. Instead, the decision was made to modularize the entire specification, resulting in a comprehensive collection of various modules that all fall within the bracket of CSS3. Each of these modules is now free to progress independently at its own pace, without the possibility of being held back by other features.

The modules that simply further develop features from CSS 1 and CSS 2.1 are known as Level 3 modules , whereas brand new features and concepts form Level 1 modules . They will eventually progress to Level 4 and Level 2 modules at varying paces, but the entire collection can all be referred to as CSS3. In other words, there will never be a CSS4 or a CSS5 (despite what you may have seen across the web suggesting otherwise). Rather, CSS3 can be used to refer to everything after CSS 1 and 2.1.

With that said, I hope its plainly evident that theres a bit more to CSS3 than a few rounded corners and drop shadows. This book takes you on a deep dive into the surprising new feats you can accomplish with CSS3, such as custom patterns with CSS gradients, manipulation of elements in a 3D environment, frame-based animations, and finally, complex layouts with comprehensive new layout tools!

Who This Book Is For

This book is about taking CSS3 to the next level, using advanced techniques and concepts to truly push the various features to their limits. It does therefore assume an intermediate to experienced level in terms of your skill and knowledge of CSS. As well as being considerably comfortable with everyday CSS, you ideally have experience with some of the more mainstream aspects of CSS3 and are ready to push things forward and advance to the next level. If you already have this foundational knowledge, youre in a great position to make the most of this book.