Stunned–I could hardly get going again

Stunning CSS3: Project-based Guide to the Latest in CSS by Zoe Mickley Gillenwater

I keep hearing about CSS 3 and HTML5, which seem to be offering a load of features aimed at making web pages more and more interactive – canvas for drawing, better layout with CSS and richer UIs with animations and transitions implemented in a declarative way without the need for programming in JavaScript.  This book comes at CSS3 from the point of view of the designer, illustrating the new features by means of a series of worked examples. I must admit that I didn’t actually work through the examples, but read the book as a means of getting familiar with the new CSS features.

Chapter one is a great introduction to the state of the world, clearly describing vendor prefixes, progressive enhancement and the state of browser support for CSS 3, with additional discussion of how to structure your CSS file to avoid slowing the browser down.

The next chapters consider the graphical effects that CSS 3 enables, including things such as rounded corners, and some tricks such as generating triangles using the borders of a zero size content div (see here for an example of what this can achieve). Along with the examples, the text describes the steps that can be taken to get the same effect (when possible) on downlevel browsers, often by using a JavaScript library to polyfill the missing functionality. We see examples of border-radius, transparent backgrounds, web fonts, text shadows and gradients, all of which are demonstrated by progressively enhancing a rather basic start page. There is also information on the new attribute selectors of CSS3, and some use of the new pseudo classes (for example nth-child or nth-child-of-type, and target for the ID matching a fragment identifier)  and pseudo elements (first-line, first-letter, before and after). I particularly liked the sections on transitions and animations, which can declaratively add some spectacular effects to a page. There is a good demo page for animations here and the specification here.

Chapter 6 discusses different screen size, illustrating the use of media queries to target CSS at particular types of device, and the final chapter discusses the new layouts of CSS 3 including the flexible box model.

I thought that reading this book was a really good way to catch up with the new features of CSS 3, and get a clear idea of how these features could be used for real. The examples are good and thorough (even though I didn’t download them and actually do the exercises) and the book is really well written. Brilliant!

This entry was posted in Books. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s