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
THE HTML MARKUP Below you can find the abbreviated HTML:
<table class=”features-table”>
<thead>
<tr>
<td></td>
<td>Standard</td>
<td>Professional</td>
<td>Enterprise</td>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td>$99</td>
<td>$199</td>
<td>$399</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Custom domain</td>
<td><img src=”check.png” width=”16″ height=”16″ alt=”check”></td>
<td><img src=”check.png” width=”16″ height=”16″ alt=”check”></td>
<td><img src=”check.png” width=”16″ height=”16″ alt=”check”></td>
</tr> <tr> <td>Advanced control</td>
<td><img src=”check.png” width=”16″ height=”16″ alt=”check”></td>
<td><img src=”check.png” width=”16″ height=”16″ alt=”check”></td>
<td><img src=”check.png” width=”16″ height=”16″ alt=”check”></td>
</tr> <tr> <td>Unlimited support</td>
<td><img src=”cross.png” width=”16″ height=”16″ alt=”cross”></td>
<td><img src=”check.png” width=”16″ height=”16″ alt=”check”></td>
<td><img src=”check.png” width=”16″ height=”16″ alt=”check”></td>
</tr> <tr> <td>User registration</td>
<td><img src=”cross.png” width=”16″ height=”16″ alt=”cross”></td>
<td><img src=”cross.png” width=”16″ height=”16″ alt=”cross”></td>
<td><img src=”check.png” width=”16″ height=”16″ alt=”check”></td>
</tr>
</tbody>
</table>