The CSS3 Anthology
Take Your Sites to New Heights
Copyright 2012 SitePoint Pty. Ltd.
Product Manager: Simon Mackie
Technical Editor: Tom Museth
Expert Reviewer: Louis Lazaris
Editor: Kelly Steele
Assistant Technical Editor: Diana MacDonald
Indexer: Michele Combes
Cover Designer: Alex Walker
Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means without the prior written permission of the publisher, except in the case of brief quotations included in critical articles or reviews.
Notice of Liability
The authors and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors, will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein.
Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.
Published by SitePoint Pty. Ltd.
48 Cambridge Street Collingwood VIC Australia 3066
Web: www.sitepoint.com
Email: business@sitepoint.com
About Rachel Andrew
Rachel Andrew is a front- and back-end web developer who has written numerous books, including the first three editions of
The CSS Anthology . Her work in her company edgeofmyseat.com (http://www.edgeofmyseat.com/) informs her writing, ensuring it remains grounded in the real world of client projects, large and small.
About Louis Lazaris
Louis Lazaris is a freelance web designer and front-end developer based in Toronto, Canada who has been involved in the web design industry since 2000. Louis has been working on websites ever since the days when table layouts and one-pixel GIFs dominated the industry. Over the past five years, he has come to embrace web standards while endeavoring to promote best practices that help developers and their clients reach practical goals for their projects. Louis writes regularly for a number of top web design blogs including his own site, Impressive Webs (http://www.impressivewebs.com/).
About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums.
For Bethany.
Preface
When SitePoint asked me to write the fourth edition of this book, I initially thought it would take the same format of other editionsadding new techniques, removing content that had become outdated, and updating solutions to a more modern approach. As I started to work through the table of contents, however, I realized that the world of CSS had changed so much that a complete rewrite was needed. Rather than being about cutting-edge or experimental CSS, this book demonstrates the tips, tricks, and solutions that I use every day. Well thoroughly investigate the world of CSS3, many of the features of which are supported by the major browsers, and look at how to make these new techniques work in older browsers. Well also walk through the use of CSS for layout purposes. While the tools that we have for layout havent changed much in the last two years, the types of devices that we need to design websites for have changed. Our sites are being viewed on hardware ranging from smartphones to desktop screens. Responsive design aims to tackle the challenge of designing a single site that provides a great experience for all. This anthology contains minimal theory; instead, Ive concentrated on providing solutions that will enable you to quickly get started with a technique or solve a problem. The sections in each chapter can also act as starting points for your own experimentation and creativity. Each one is framed as a specific issue or question, accompanied by a detailed explanation to help you understand the solution and point out any related challenges or alternate approaches. This is a really exciting time for front-end development, and I hope that this book helps you start to explore some of the features of CSS3, and find answers to CSS problems that you might have.
Who Should Read This Book
This book is aimed at people who need to work with CSS: web designers and developers whove seen the cool CSS designs out there, but are short on the time to wade through masses of theory and debate in order to create a site. Each problem is solved with a working solution that can be implemented as it is or used as a springboard to creativity. As a whole, this book isnt a tutorial. While covers the very basics of CSS, and the early chapters cover simpler techniques than those that follow, youll find the examples easier to grasp if you have a basic grounding in CSS.
Whats in This Book
This chapter is simply a quick CSS tutorial for anyone who needs to brush up on the basics of CSS. If youve been using CSS in your own projects, you might want to skip this chapter and refer to it on a needs basis, when you want to look into basic concepts in more detail.This chapter covers techniques for styling and formatting text in your documents; font sizing, colors, highlighting text, and the removal of extra whitespace around page elements are explained as the chapter progresses. Even if youre already using CSS for text styling, youll find some useful tips here.This chapter looks at the ways in which you can combine CSS and images to create powerful visual effects, such as placing background images on elements, applying gradients, making elements transparent, and positioning text with images, among other topics.Every site requires usable navigation, and this chapter explains how to achieve it, CSS-style. Well investigate image-based navigation, tabbed navigation, combining background images with CSS text to create attractive and accessible menus, and using lists to structure navigation in an accessible way.The use of tables for layout hasnt been considered best practice for a long time. Tables should be used for their real purpose: the display of tabular data, such as that contained in a spreadsheet. This chapter will demonstrate techniques for the application of tables to create attractive and usable tabular data displays.Whether youre a designer or a developer, its likely that youll spend a fair amount of time creating forms for data entry. CSS provides incredible support in this area; this chapter shows how we can build accessible, usable forms with that extra design oomph. Well also take a look at some of the diverse HTML5 tools that are simplifying form configuration.How can we make our CSS techniques work in older browsers or on alternative devices such as smartphones? These questions form the main theme of this chapter. Well also see how to troubleshoot CSS bugsand where to go for helpas well as looking at methods for integrating CSS3 selectors and HTML5 elements in older browsers.Placing elements correctly on a web page can be tricky, but in this chapter well learn to master the art of positioning. Using floats effectively, nifty ways of adding margins and padding, implementing text wrapping, and creating thumbnail galleriesthese are all great strategies for your CSS arsenal.In this chapter, well explore a range of CSS layout techniques that can be combined and extended upon to create numerous interesting page formations, including different column configurations and print-ready stylesheets. Well also delve into the emerging sphere of responsive design, looking at both text- and image-heavy layouts that will render effectively and smoothly on a range of devices or screen sizes.
