I got the design comp above for one of my projects at EffectiveUI and immediately thought, “How am I going to be able to do that in HTML and CSS?’” The table headers are generated dynamically by system defined sections and could be different for different groups of users, so using an image for the table header was impractical. I knew CSS3 gave me some new options using 2D transforms, but browser support was uneven. Another problem in this design that looks like a really minor feature is the carrot under the “QuickNav” text. Fortunately, the requirements of this project are that we are just supporting the latest versions of IE, Firefox, Chrome, and Safari, so CSS3 2D transforms it is.
My initial attempt didn’t go so well as you can see below. Not only were the browser implementations of the 2D transforms uneven, but the documentation available online was less than complete as well.
So all of my headers didn’t line up with their columns and the text was way out of whack too. It turns out that the browsers calculate the position of an element first, then transform it, so I had to adjust the positioning of the elements to end up where I wanted them. After some playing with the Skew() and Rotate() CSS3 2D transform methods, I discovered that I needed a little extra markup in each cell to get the display to show up correctly. Even with that being said, the end markup is still very clean to generate the table:
As you can see in the code above, I used no images to achieve this effect. The X close button in the upper right is a simple anchor tag with the border-radius property set to make it appear to be a circle. The most interesting pieces to note for the angled headers are the tags and the
and tags contained within. Those div and span tags are the extra markup needed to make all of the 2D transforms play nice with each other to generate the 45 degree angled headers.
The most important sections are highlighted above in the selectors for .quick-nav table th.skew, .quick-nav table th.skew > div, and .quick-nav table th.skew span. This is where the rotation and absolute positioning happens to make the rotation happen correctly. For the carrot below, QuickNav, I used the speech bubbles technique described by Nicolas Gallagher at http://nicolasgallagher.com/pure-css-speech-bubbles/. The final result is below, pixel for pixel perfect with the design comp and a new technique that I will definitely be keeping in my back pocket for future projects.
