Quite often I'm given a PSD and asked to convert this into HTML/CSS for the graphic designer. I was given a PSD which was a pricing table and realised that there are ways to improve the look of this just by using CSS. When I put this suggestion forward to the graphic designer they said no and want to me to just make the table and everything else was going to be images. Just to prove I was right I am writing this tutorial to turn the below PSD image into HTML and pure CSS, this is not the PSD I was given but it's a good example.
This is just a simple PSD of a pricing table but the middle column is larger than the others. I thought this would be ideal to use CSS animation to scale the current column the mouse is hovering over. This tutorial is will teach you how to create this pricing table with the CSS scaling effects, view the demo to see what we will be making. Demo
The HTML for the table is in fact not a table this can easily be done by using a table but I prefer not working with tables. The data that needs to be displayed can be better organised by using a list this is because the data can to split into columns to be displayed to the visitor. - First we create a div which will hold the lists.
Create 5 lists for different columns.
Enter the column data.
<div class="pricing_table">
<ul>
<li>Standard</li>
<li>£20</li>
<li>Perfect for those getting started with our app.</li>
<li>15 Projects</li>
<li>5GB Storage</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enchaned Security</li>
<li></li>
<li><a href="" class="buy_now">Buy Now</a></li>
</ul>
<ul>
<li>Premium</li>
<li>£60</li>
<li>Perfect for those getting started with our app.</li>
<li>15 Projects</li>
<li>5GB Storage</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enchaned Security</li>
<li></li>
<li><a href="" class="buy_now">Buy Now</a></li>
</ul>
<ul>
<li>Professional</li>
<li>£80</li>
<li>Perfect for those getting started with our app.</li>
<li>15 Projects</li>
<li>5GB Storage</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enchaned Security</li>
<li></li>
<li><a href="" class="buy_now">Buy Now</a></li>
</ul>
<ul>
<li>Plus</li>
<li>£100</li>
<li>Perfect for those getting started with our app.</li>
<li>15 Projects</li>
<li>5GB Storage</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enchaned Security</li>
<li></li>
<li><a href="" class="buy_now">Buy Now</a></li>
</ul>
<ul>
<li>Maximum</li>
<li>£120</li>
<li>Perfect for those getting started with our app.</li>
<li>15 Projects</li>
<li>5GB Storage</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enchaned Security</li>
<li></li>
<li><a href="" class="buy_now">Buy Now</a></li>
</ul>
</div>
First we are going to write the style for the outline of the whole table. This can easily be done using the CSS outline property, then we need to curve the border by using the border-radius property. Complete this by using the following CSS.
.pricing_table {
border:1px solid #c4cbcc;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
outline:7px solid #f2f3f3;
float:left;
}
Now we have the outline of the price table lets create the columns from the list items. Do the following to the lists: - First remove the list styles
Here is the CSS for the above.
.pricing_table ul {
list-style:none;
float:left;
width:147px;
margin:0;
border:1px solid #f2f3f3;
padding:5px;
text-align:center;
background-color:#FFF;
}
Copy the following CSS to achieve the column scaling.
.pricing_table ul:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-moz-box-shadow:3px 5px 7px rgba(0,0,0,.7);
-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.7);
box-shadow:3px 5px 7px rgba(0,0,0,.7);
cursor:pointer;
}
Each list item needs to have padding and a border on the bottom, use the following CSS to achieve this styling.
.pricing_table ul li {
border-bottom:1px dashed #cfd2d2;
padding:10px 0;
}
Almost every row in the pricing table has a different styling a good thing about the CSS3 we are using is that you can change any row you want just by using CSS.
Use the following CSS to achieve this look.
.pricing_table ul li:first-child {
font-size:18px;
font-weight:bold;
}
.pricing_table ul li:nth-child(2) {
background:#fbfbfb;
}
.pricing_table ul li:nth-child(3) {
font-size:12px;
font-weight:bold;
}
.pricing_table ul li:nth-child(n+4) {
font-size:14px;
}
.pricing_table ul li:last-child a {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:1px solid #c4cbcc;
padding:10px;
margin:5px 0;
background: #e5e696; /* Old browsers */
background: -moz-linear-gradient(top, #e5e696 0%, #d1d360 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e696), color-stop(100%,#d1d360)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e696', endColorstr='#d1d360',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #e5e696 0%,#d1d360 100%); /* W3C */
color:#000;
font-style:italic;
display:block;
}
Like this image, want to download the full PSD? Get the PSD from premium pixels freebies. View the demo to make sure that your pricing table is the same. If you followed the tutorial you should have the same. Demo