• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Introduction

Introduction

CSS3, the newest version of the style sheet language of the web, is less about creating new effects and more about accomplishing the beautiful web design effects you’re familiar with in fantastic new ways—ways that are more efficient and produce more usable and flexible results than the techniques we’ve been using for the last decade.

CSS3 is still changing and evolving, as are browsers to support it and web designers to figure out how best to use it. CSS3 can create some stunningly beautiful and cool effects, as you’ll see throughout this book. But if these effects aren’t practical for real-world sites right now, what’s the point? In this book, I’ll focus on teaching you the cutting-edge CSS techniques that can truly improve your sites and are ready to be used in your work right away.

This book is not an encyclopedia or reference guide to CSS3; it won’t teach you every single property, selector, and value that’s new to CSS since version 2.1. Instead, it will teach you the most popular, useful, and well-supported pieces of CSS3 through a series of practical but innovative projects. Each chapter (after Chapter 1) walks you through one or more exercises involving the new techniques of CSS3 to produce a finished web page or section of a page. You can adapt these exercises to your own projects, or use them as inspiration for completely different ways to creatively use the new properties, selectors, and values you’ve learned.

In some ways, CSS3 is a new way of thinking as much as a new way of developing your pages. It can be hard to think of how to use the new border-image property, for instance, when you’ve been making web sites for years and aren’t used to having the option of using an image for the border of a box. Because of this, I’ve included a list of ideas for how to use each CSS3 property, selector, and value I cover, beyond just the single way we use it in the exercise. I hope to provide you with plenty of inspiration for how to put the CSS3 techniques you’re learning to work in your own projects, plus the technical know-how to make sure you can use CSS3 comfortably and efficiently.

Who Should Read this Book

This book is meant for anyone who already has experience using CSS, but wants to take their sites and skills to the next level. I assume that you know HTML and CSS syntax and terminology, but you don’t need to be a CSS expert, and you certainly don’t need to have any experience using anything that’s new to CSS3. Whether you’ve just started using CSS or have been developing sites with it for years, this book will teach you powerful new techniques to add to your CSS toolkit.

Exercise Files

Each of the chapters is made up of at least one exercise where you will have the opportunity to implement the techniques in a real page, step by step. You can download the files for these exercises at the book’s companion site at www.stunningcss3.com and work along in them as you go through the steps of each exercise. I’ve provided both a starter file and final file for each exercise, as well as a few intermediate steps for the longer exercises, so you can check in periodically and make sure you’ve made the correct changes to your own files.

You can use whatever code editor you like when working with the exercise files. There are no tools in particular that you must have in order to work with and create CSS. I personally use Adobe Dreamweaver, but do all of my CSS development in code view by hand. If you’re using Dreamweaver or a similar editor, I recommend you too work on the CSS by hand.

Although a great deal of effort has been made to check the code in this book, there are bound to be a few errors. Please report any errors to me through the email form on the book’s web site, and I’ll be sure to note them on the site and update the exercise files if needed.

Links

Each chapter contains several links to related resources, articles, tutorials, tools, and examples that I think would be useful for you. And it’s certainly easier to click on a live link than painstakingly type out a URL that you’re copying from a printed book, so I’ve provided a compendium of all the links from each chapter on www.stunningcss3.com.

CSS3 is a rapidly changing topic, so in a few cases, I’ll be updating these link lists as new resources come out. You’ll see a note in the book every time one of these continually updated lists of resources is present, pointing you to the book site to find the latest information.

Browsers

The exercises in this book have been tested in the latest versions of the major browsers. At the time of this writing, these browser versions are Chrome 6, Firefox 3.6, Internet Explorer 8, Opera 10.6, and Safari 5. The exercises were also tested in the beta versions of Internet Explorer 9 and Firefox 4 available at the time of this writing, but behavior may be different from what’s described in the book by the time these browsers are finalized and released.

The exercises have also been tested in older browser versions that are still in significant use today (such as Internet Explorer 7 and 6). In many cases, the CSS3 effects we’ll be adding that work in the newest browsers also work in older versions of those same browsers; even when they don’t, the pages still work, are always perfectly usable, and look fine. We’ll always go over possible ways to provide workarounds or fallbacks for non-supporting browsers for each technique.

For information on which browsers a given technique works in, I’ve provided a table of browser-support information for each property or selector introduced in each chapter. Each browser is set to “yes,” “partial,” or “no.” A value of “yes” means the browser supports all of the syntax and behavior; it may have very minor bugs or inconsistencies with the spec, but overall it’s compliant. A value of “partial” means the browser supports some of the syntax and behavior, but not all, or not without significant bugs or inconsistencies.

Some CSS3 properties work only using a vendor-specific prefixed version of the property (you’ll learn about these prefixed properties in Chapter 1). I’ve indicated which browsers require the prefixes on a given property in the browser support tables.

Note

On the flip side, I’ve also occasionally included the browser version number in the support table when it’s particularly notable how early the property or selector was supported—for instance, the fact that IE 4 supports @font-face!


In cases where support in a given browser is relatively new and there’s a chance that some users of the older, non-supporting versions of that browser are still out there, I’ve provided the version number of the browser in the browser support table, indicating which version was the earliest to support the property or selector. If the browser has supported the property or selector for the last few versions and it’s unlikely that there’s any significant number of users of the non-supporting versions, I have not included the earliest version number in the support table; you can feel safe that all versions of that browser in use support it.

Conventions Used Throughout this Book

This book uses a few terms that are worth noting at the outset.

  • W3C refers to the World Wide Web Consortium, the organization that creates the official standards and specifications of the web, including CSS3.

  • IE refers to the Windows Internet Explorer browser. IE 8 and earlier means IE 8, 7, and 6.

  • Webkit-based browsers means Safari (both on desktop and on mobile devices), Chrome, and any other browsers that use a recent version of the Webkit browser-rendering engine.

  • Occasionally, you’ll see a reference to “all browsers.” This means all browsers that are in significant use today, not literally every single obscure browser that may have a fractional piece of market share.

All of the exercises in this book are written in HTML5 markup. However, all that means in this case is that I’ve used the short and sweet HTML5 doctype, <!DOCTYPE html>, as well as the shorter meta character encoding, style, and script tags. I haven’t included any of the new elements that HTML5 introduces, such as section or article, so the pages will work without any trouble in IE 8 and earlier, but you’re welcome to change the markup for your own pages in whatever way you like. All the exercises will also work in HTML 4.01 or XHTML 1.

All CSS examples shown should be placed in an external style sheet or in the head of an HTML or XHTML document. The exercise files have their CSS contained in the head of the page, for ease of editing, but it’s best to move that CSS to an external style sheet for actual production files.

Some code examples will contain characters or lines colored teal-blue. This indicates that content has been added or changed since the last time you saw that same code snippet, or, in a new code snippet, that there is a particular part that you need to focus on. In some cases. you’ll see a ¬ character at the beginning of a line of code, indicating that the text has had to wrap to a new line within the confines of the layout of this book—but this doesn’t mean you have to break the line there.

Each property or selector introduced in this book has a “lowdown” sidebar providing a brief overview of its syntax, behavior, and use cases. Not every detail of syntax could be included, of course, but the most essential information you need is there for quick reference. I’ve also provided a link to whichever CSS3 module the property or selector is a part of on the W3C site so you can refer to the full specification when needed.

 

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint