Review: CSS3 for Web Designers

CSS3 for Web Designers - cover

Author: Dan Cederholm
Publisher: A Book Apart
Published: 2010
Pages: 125

Last year, I reviewed a book on HTML5, written by Jeremy Keith and published by A Book Apart (closely associated with A List Apart and An Event Apart). ABA is developing a series of books related to web design and development; each targets a particular topic, and focuses on the most important or prevalent aspects of the topic material. This got off to a good start with the HTML5 book, the first in the series. Since then, ABA released a new book focused on CSS3, which is the focus of this review.

Enter CSS3 for Web Designers. This book introduces some interesting uses of CSS3, and the application of those capabilities to modern browsers in a variety of ways.

Dan Cederholm may well be the most qualified person to write a book on CSS3, even a brief one. He has already written three other books on CSS, and is well-known in the web industry. That said, without even opening this book, it helps to know the reader will be in good hands.

The book has a supporting website, where you can see some of the effects in action, and download the sample code.

The Chapters

In the following sections, I’ll briefly summarize the contents of each of the book’s chapters. Hopefully I will do it justice in providing a clear picture of what is contained within!

Using CSS3 Today

The book starts with a brief history of CSS, leading up to the current state of CSS3. It lists the uses of CSS, and the benefits it provides. Next is a list of CSS3 properties that are usable now; each of these items comes with a description, a usage sample, and an outline of browser compatibility. It’s important to note that the compatibility listings as of when the book was published – the values will have since changed. Also included is the use of vendor-specific prefixes; these help to ease the process of using CSS3 in browsers that don’t yet support the standard properties, but have experimental support in place.

Understanding CSS3 Transitions

In the dark ages of the web, web developers created rollover effects using images and JavaScript, the latter being especially useful for “easing” the subject between normal and hovered states, rather than just switching one to the other. This effect can be achieved today with CSS transitions, without using JavaScript, and even without images.

The information provided here helps to set the stage, as transition effects are used throughout the following chapters.

Hover-Crafting with CSS3

As mentioned earlier, image rollover effects used to be done in JavaScript, when CSS was in its infancy. Now that CSS has matured, along with browser support, hover effects can be done in a much simpler fashion. Hover effects are not limited to images, but can affect a variety of elements in different ways. A common scenario is website navigation links. Dan delves into styling a navigation bar with rollover effects on individual links, applying border-radius, text-shadow, RGBA colour, and transitions. He also shows the use of opacity in a separate example.

Transforming the Message

Another effect previously facilitated by JavaScript is element transformation; an example of this is a picture gallery, where hovering a photo would enlarge it. Once again, CSS3 comes to the table with a variety of transformation effects. Dan shows how to enlarge images, rotate them, skew them, and move them around. Again, the possible applications are huge, beyond just images.

Multiple Backgrounds

A long-standing pain point of web design hass been the inability to use multiple background images for a single element. The workaround was to use nested elements, usually empty span or div elements, each with a background image. This was frequently applied to give a block element rounded corners, for example. Never mind that CSS3 also supports rounded corners, there are other cases where having multiple background images for one element can be useful. One such case is the parallax effect, as seen on the Silverback website (resize the browser window to see the vines move).

Dan shows the use of the updated background property; previously the property would only accept one background image, but now it can take multiple images, each with their own positioning. This effect is demonstrated on the book’s website, linked above – it is the starry background, which is actually made up of four images layered on the body element.

Enriching Forms

Form elements normally look pretty plain with the default styles. They have long been the target of cosmetic customization, from background colour to borders. CSS3 provides for rounded corners, and gradient backgrounds, and text and box shadows, which Dan demonstrates. The result is a set of form elements that look very different from the default renderings.

Impressions

This book is not anywhere near comprehensive; if it were, it would be a much thicker tome, and probably much less appealing. Instead, the focus is bang for the buck; the techniques shared are of immediate value, and can be used today. Granted, there is the issue of compatibility (*cough*Internet Explorer*cough*), but the author takes pains to provide for graceful degradation. This is important, as web developers cannot wait for the CSS3 spec to be complete and widely supported; rather, some bits can be widely used now. That is the focus of CFWD.

As mentioned, the author emphasizes the use of graceful degradation to ensure that noncompliant browsers get a reasonable experience, if not a perfect one. This is achieved with the provision of browser-specific property prefixes; future-proofing is provided by use of the standard, un-prefixed property as well.

The bottom line: CSS3 is an evolving standard, with certain portions that are usable now in most browsers. CFWD provides concise coverage of these features, and shows how to use them in creative ways in a variety of browsers. It’s not comprehensive, but it makes a useful reference when checking CSS syntax for maximum cross-browser compatibility.