I love shadows, rounded corners, gradients and all the CSS3 features. That’s why, there are some days when I find myself designing in CSS3 more than in Photoshop.
The idea of building a features table just by using CSS3 came to me a while ago and I decided to share it with you in this article.
You can check a preview of the result below, or view the demo and download the source files from the buttons below the image.
The HTML markup
Below you can find the minimal HTML:
Note that the markup it’s quite minimal, excepting the check and cross icons needed to point available and unavailable features.
To better target the cells I used elements like thead, tfoot or tbody. You’ll see below that’s easier now to select cells, without adding different CSS classes for rows and/or cells.
For this example, I used CSS3 selectors (or pseudo-selectors) as
:first-child. Of course IE6 to IE8 won’t render the table as modern browsers like Firefox, Chrome, Safari or Opera.
IE9 and Opera instead behaves nice, excepting the lack of support for CSS gradients.
View DemoDownload Files
IE Graceful Degradation
Now if you want this table to degrade gracefully for IE you must add different classes for cells and skip the pseudo-selectors part. The main disadvantage is the use of extra markup.
I also made an example without pseudo-selectors and bellow you can see a demo or download files.
View 2nd example Demo
Download 2nd example Files
Hope you enjoyed this article and looking forward for your opinions regarding it!
11 useful CSS snippets to save your time
10 Outstanding CSS3 animation demos