CSS3 For Web Designers book review

13 Jan 2011

After having read 'HTML5 For Web Designers' by Jeremy Keith, I was eager to read A Book Apart's N°. 2, 'CSS3 For Web Designers' by Dan Cederholm. In comparison with HTML5, which is about the structure of a webpage, CSS3 is all about styling and design. In other words, the perfect followup. Could hardly wait to start reading and finish it in one go. Here is my review of this book…

Table of contents

The first question Dan asks us — web designers — is "Who likes reading specs?". Knowing that hardly no one read these, Dan fills us in with the bare essentials of what there is to know about CSS3. Apart from the W3C background info in the very first chapter, this book is filled with practical information and useful examples with CSS3 at work. The book has 120 pages and consists of seven chapters:

  • Chapter 1: Using CSS3 Today
  • Chapter 2: Understanding CSS Transitions
  • Chapter 3: Hover-Crafting with CSS3
  • Chapter 4: Transforming the Message
  • Chapter 5: Multiple Backgrounds
  • Chapter 6: Enriching Forms
  • Chapter 7: Conclusion

The book focuses on what can be implemented now, targeting the experience layer. Dan explains that as long as we apply it on the non-critical visual experiences, such as interaction, visual rewards, feedback and movement, there is no reason why we should hold off. It's the CSS3 that has already decent stable browser support. CSS3 that affects layout, usability, accessibility and branding are critical aspects, and so these aren't covered in the book. The CSS3 properties he talks about is 'border-radius', 'text-shadow', 'box-shadow', multiple background images, 'opacity' and 'RGBA'.

CSS3 For Web Designers, by Dan Cederholm - published by A Book Apart

Chapter 1: Using CSS3 Today

After having explained the W3C's module approach of CSS3, which is based on experimentation and faster release cycles, Dan explains to us that CSS3 is for everyone. He explains why we can use many of the CSS3 styles now, and why we don't have to to wait until they become Candidate Recommendations.

Chapter 2: Understanding CSS Transitions

After explaining the why and how of vendor-specific prefixes in chapter 1, Dan takes us directly to the practical stuff of CSS transitions: what they are and how they should be used along with some simple examples. He takes us through all aspects of transitions explaining the timing functions, duration and delay, and he shows us how we can apply a transition effect on a hover or focus state of an element.

Chapter 3: Hover-Crafting with CSS3

Chapter 3 is where Dan starts to share his case study project, and where he demonstrates how you can apply cool CSS3 effects in a navigation, using subtle transparency via RGBA, rounded corners, text-shadow etc. All in combination with some subtle hover effects using transitions, and giving us some cool tips on how we can apply opacity in a smart way. He ends by explaining the enrichment that these styles give to the design and the user experience, surprising and delighting the user. If the browser doesn't support these cool effects, that's still OK because the user will still get the message as intended.

Chapter 4: Transforming the Message

In chapter 4 'Transforming the Message', Dan shows us different ways on how we can enhance the message to the user by applying cool CSS3 transform styling on a hover state of an element. We see how we can scale, rotate, skew and translate an item. All examples he shows us via his case study project only effect the experience layer, and could also be applied to the default state of an item, as they are not critical and degrade well in browsers that don't support these styles yet.

Chapter 5: Multiple Backgrounds

In the next chapter Dan talks about how we can use multiple backgrounds today in a way so the design degrades well by showing some flexible and creative solutions.

Chapter 6: Enriching Forms

In chapter 6 'Enriching Forms' we learn how we can use subtle CSS3 styling to give forms a more attractive look using rounded corners, box-shadow and CSS gradients. We also learn how to create a perfect looking submit button without the usage of any image at all, using only CSS. Furthermore he shows us how we can apply a special effect on the focus state of a form element to attract the attention of the user using (Webkit) keyframes animation.

Chapter 7: Conclusion

In his concluding chapter, Dan gives us advice on how we can convince clients and bosses of the advantages of using CSS3 today. He ends with a positive note of how exciting the future looks in terms of CSS support and how we'll be able to use it not only for enhancing the experience, but also for critical visual concepts.

Conclusion

This book is a must read for every web designer who wants to get to know what you can do with CSS3 today. Just like 'HTML5 For Web Designers', this book reads like a breeze because of the easy to understand language and its compact format. Dan's practical examples makes you think of how you can apply them in your own designs. The book contains a lot of smart and creative ways of how you can use CSS3. There were a lot of these 'hey, I haven't thought of that' moments while I was reading this book, one of the reasons why I love it and recommend it.

Comments

  1. 1 Andrew Thorp 13 Jan 2011

    I loved HTML5 for web designers, and fully intend to read this. Thanks for the review!

  2. 2 Donna 13 Jan 2011

    Thanks for the info. Looks like a great book even though I use SiteGrinder for PSD to CSS conversion, it’s always good to keep up with what’s going on with the browser industry and standards. (Well, our programmers NEED to know that stuff, but for me it’s just nice to know….)

  3. 3 Mark 16 Jan 2011

    Nice review.  i will consider picking up a copy.

  4. 4 Upen 19 Jan 2011

    I will go for some books specially HTML 5. I want to learn but not getting enough time these days. Any ways thanks for the collection. i will book mark it for future to remind me for these book.