CSS Secrets: Better Solutions to Everyday Web Design Problems
Authors: Lea Verou
Publisher: O'Reilly, 2015
Front-end web designers have to know CSS very well in order to create styling that's effective and maintainable. This is easier said than done because CSS is a complex language. To be good at it, one must learn from the masters and Lea Verou is one of them. The author presents those parts of CSS that are not obvious. She uses CSS in very creative ways to overcome limitations in the standards. Readers should already have some grasp of the basics. When they are ready to take their knowledge to the next level, this is a book that they cannot miss.
The book itself has been designed using CSS. The secrets are presented as solutions to well-stated problems. There are 47 secrets in all but readers will learn a lot more than these. All examples can be tried interactively online and the links to these examples are conveniently placed at the end of each section. Readers are of course at liberty to use their own tools (such as http://jsfiddle.net/) to try out the examples. This implies that we can learn the secrets by practice, which makes the book all the more enjoyable.
Lea Verou doesn't just present solutions to problems but provides enough historical background to make us appreciate the problem. She points out new properties and values of CSS3 that can be used to overcome limitations of CSS2.1. She makes an important point that CSS3 is not just one specification document. CSS3 loosely refers to a many specifications, each with its own versioning. In many examples, she gives us a practical context in which the problem is relevant. For example, sticky footers should always be at the bottom of the viewport even when content is small. This is a common problem. Aligning content vertically on the viewport is another common problem that has no simple solution.
When reading this book, one gets the impression that there are a few areas that are favourites of the author: gradients, filters, transforms, animations. It's interesting to see how she uses these to their full power (perhaps there's much more that can be done that we are as yet unaware) and the results are awesome. Mastering these parts of CSS will definitely simplify your code and make it more maintainable.
If we thought that CSS is all about design, Lea Verou explains some things with the help of mathematics. For example, parallelograms can convey movement in a design and we learn how to use
transform to code these. We can transform images to be clipped as diamond shapes. Pie charts can be created easily using
transform. To create folded corners, we can use trigonometry to get the dimensions right. Trapezoids are not something that we talk about everyday but these are exactly what we need to create tabs. It's important to appreciate this because such abstractions can help us to think differently.
One of the many beautiful examples in the book is about creating pie charts. The author takes us through the code step by step. Rather than present and explain the final code, the author takes us through a learning path. When we therefore arrive at the final code we appreciate it fully. Many examples are presented in this manner of incremental learning. Through this approach we also appreciate limitations of alternative solutions.
What if you are beginner? Is this book for you? I believe that you will still learn a number of interesting and useful tips. I summarize below some of the things I learned:
- By default, backgrounds extend underneath the border area, with
background-clip:border-box;setting. This can be changed using
- When using
border-radius, we can specify different horizontal and vertical radii for all four corners.
- An animation can have negative delay to indicate that it started in the past. Effectively, the user starts seeing the animation somewhere along its timeline.
1vmaxis equivalent to either
1vh, whichever is larger.
- If you need background to scroll with the content, use
- Percentages are typically relative to the parent. When we use percentages in
translate()transforms, we are moving the element relative to its own width and height.
- Since CSS does not allow us to work backwards to preceding siblings,
li:first-child:nth-last-child(4)can be used to target the first child of a list of 4 items. Following siblings can then be targeted using
li:first-child:nth-last-child(4) ~ liselector.
Get the book, read it and become a CSS expert!
- How to Design and Develop a Web App
- Storytelling with Data
About the Author
Arvind Padmanabhan graduated from the National University of Singapore with a master’s degree in electrical engineering. With more than fifteen years of experience, he has worked extensively on various wireless technologies including DECT, WCDMA, HSPA, WiMAX and LTE. He is passionate about tech blogging, training and supporting early stage Indian start-ups. He is a founder member of two non-profit community platforms: IEDF and Devopedia. In 2013, he published a book on the history of digital technology: http://theinfinitebit.wordpress.com.