Convert a Pricing Table PSD to HTML and CSS

by on 7th February 2012 with 19 Comments

screenshot

Today we’re going to grab some PSD pricing tables from Design Curate and try to convert them to pure CSS so you can easily drop them into your site.

It’ll be a super basic but fun exercise in bringing a static design to the web and you’ll learn plenty of fun stuff along the way such as how to style hr tags a create a superscript effect.

Original Design

The design of our pricing tables is super minimal. They’re basically just a rounded corner rectangle with some text and buttons. Download the original PSD here for a closer look (we’re scrapping the Best Value banner).

screenshot

As you can see, the primary task here will merely be shuffling elements into place. The top bar may seem like it’ll be tricky, but in reality it’s a cinch. More interesting from my perspective is how to style that thin dividing line and pulling off a superscript in the text.

Also of interest is the fact that the center pricing table is a little larger than the others and overlaps them. This could mean styling two unique versions of the table, but we’ll use a nice little trick that takes all the effort out of this. Let’s jump in and get started.

Basic Shape

To begin, we’ll focus on creating one pricing table. Once we have that one built, we can expand it into three fairly easily. Our first step is to create the basic shape of a single table: a vertical rectangle with rounded corners.

We’ll start with a div that will hold all the code for one pricing table. Assign the class of “pricingtable” so that we can easily reuse this element again later.

Now let’s add some style. Our pricing tables will be white so I set a gray background color to help them stand out. Then I applied some sizing to our class, rounded the corners and added a shadow.

* {margin: 0; padding: 0;}
body {background: #ededed;}

.pricingtable {
  width: 250px; height: 450px;
  background: #fff;
  margin: 50px;
  
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
     -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
          box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
}

Progress Update

This step should give you a simple white box. Make sure that your dimensions are correct and that your shadow and rounded corners are functioning properly.

screenshot

Top Bar

Now that we’ve got our basic shape in place, we’ll start at the top and work our way down. The first thing that we need is obviously that colored bar at the top that holds the name for each of our pricing plans: Basic, Pro and Premium. To pull this off, create another div with the class of “top”. Don’t worry, we’re not going div crazy, this will be the last one that we need for our base pricing table template.

Inside the div, place an h2 (we’ll use the h1 later) with the name of the pricing table. We could simply use this h2 without the div to create the top bar, but structuring it this way makes it easier to add a sub tag or other content here later.

Basic

Turning that div into our top bar is pretty simple. To start, we give it a width of 250px, a height of 50px and sample the PSD to get a background color of #2F2E35. Then we apply the same border-radius that we used before (10px), only this time we apply it to only the top two corners, leaving the bottom corners square.

Next it’s time to target the h2 and give it some styling. I simply changed the color to white, aligned the text to the center and used some fancy font shorthand to set the weight, size, line-height and font-family for our headline.

.top {
  width: 250px; height: 50px;
  background: #2F2E35;
  -webkit-border-radius: 10px 10px 0 0;
     -moz-border-radius: 10px 10px 0 0;
          border-radius: 10px 10px 0 0;
}

.top h2 {
  color: #fff;
  text-align: center;
  font: 300 30px/50px Helvetica, Verdana, sans-serif;
}

Progress Update

Our plain white box is already starting to look like the pricing table we’re going for. Now we just fill in the center contents and we’ll be ready to go.

screenshot

Features

Moving down the table, next we find a list of features. Right away that sentence should give you a hint as to how we can mark this section up: with a list. The order isn’t anything specific here so we’ll use an unordered list.

Notice that in our original design, the first word of each feature is bolded. We’ll toss in some strong tags to help us pull this off in our design.

Basic

  • Full Email Support
  • 25GB of Storage
  • 5 Domains
  • 10 Email Addresses

Styling up this list is quite easy. To start, we want to ditch the bullet points, so set the list-style-type to “none”. After that, I use the same font shorthand as above but this time with a different size and line-height.

Notice that the line-height is set without a unit of measure (2, not 2px). This is a simple multiplier that takes the font-size into account (18px * 2 = 36px line-height). You can read more about this technique here.

To finish off this block of styles, target those strong tags and be sure that they’re set to bold.

.pricingtable ul {
  list-style-type: none;
  font: 300 18px/2 Helvetica, Verdana, sans-serif;
  margin: 20px 0 0 45px;
}

.pricingtable ul strong {
  font-weight: bold;
}

Progress Update

Our feature list is looking perfect! Those bolder styles really help you focus on the important pieces of information.

screenshot

Dividing Line

In the original design, there’s a subtle line that separates the feature list from the price. This can be accomplished with a simple horizontal rule tag:

Basic

  • Full Email Support
  • 25GB of Storage
  • 5 Domains
  • 10 Email Addresses

The default styling for the horizontal line is close to what we want, but not quite there. For instance, notice that it stretches all the way across the pricing table. We actually want it narrower and centered.

screenshot

Styling an hr can be tricky and frustrating if you don’t know what you’re doing. You’d think that all we would have to do is set the width and color and we’d be good to go, but that’s not the case.

By default, certain browsers apply some weird styles that you have to clear. To be sure we get the look we want, we have to clear the borders, declare both a height and width, and set a background color. Then we center it using basic math: if our table is 250px wide and our line is 190px, that leaves 60px of width left. Using margins, we cut that value in half and assign thirty pixels of space to the left side of the line.

.pricingtable hr {
  border: 0;
  background-color: #BCBEC0;
  color: #BCBEC0;
  height: 1px;
  width: 190px;
  margin: 20px 0 0 30px;
}

Progress Update

With that bit of styling, our little line is looking exactly like we want it to. Feel free to experiment with your hr to see what sort of fancy styles you can make. CSS-Tricks has some great examples for inspiration.

screenshot

Price

Next up is the price tag. This comes in two parts, the big price and the small text underneath that says “per month.” The tricky part is that, in the original design, the dollar sign is superscript.

I wanted to be semantic about this so I went ahead and used the “sup” tag. Some sources seem to think that this is a deprecated tag, but as far as I can tell, that’s not the case. Both sub and sup appear to be valid in HTML5 and have plenty of browser support across the board. I’m open to opposing arguments here, so let me know in the comments if you disagree.

Another potential point for a huge semantic argument here is my use of h1. Some would no doubt reserve h1 for the plan title at the top, but the price point here seemed to be the most important piece of information (importance trumps order), so I thought it was best to utilize it here. Once again, feel free to disagree and go your own way.

Basic

  • Full Email Support
  • 25GB of Storage
  • 5 Domains
  • 10 Email Addresses

$25

per month

Now for our CSS we have three different things to target: the h1, the h1 sup and the paragraph. There’s nothing fancy here, just some more font-sizing and a little bit of margins to scoot things into place. Notice that all we need to do for the sup tag is reduce the font size.

.pricingtable h1 {
  text-align: center;
  font: bold 88px/1 Helvetica, Verdana, sans-serif;
  margin: 20px 0 0 0;
}

.pricingtable h1 sup {
  font-size: 45px;
}

.pricingtable p {
  text-align: center;
  font: 500 14px/1 Helvetica, Verdana, sans-serif;
  color: #BCBEC0;
}

Progress Update

Our pricing table is nearly complete! Thus far we’ve conquered the four most difficult pieces of the puzzle, all that’s left is to create a button at the bottom.

screenshot

The Button

To finish off our pricing table, let’s put a sign up button at the bottom. To accomplish this, just throw an anchor tag into your HTML. This will finish up our reusable pricingtable div.

Basic

  • Full Email Support
  • 25GB of Storage
  • 5 Domains
  • 10 Email Addresses

$25

per month

Sign Up

To turn this simple text link into a button, set the display to block and define a width and height. Also be sure to fix the default link styling by setting the color and text-decoration. I transformed the text into uppercase as well to match the original design. Finally, apply the same border-radius as before.

To finish off the button, you can use a solid color to keep things simple, but I opted for a basic gradient that gets lighter when you hover over it. It’s a big, scary chunk of CSS but don’t worry, it’s all fairly basic. Use a free tool like this one to save you some trouble if you’re creating your own gradient.

.pricingtable a {
  display: block;
  height: 40px;
  width: 150px;
  color: #fff;
  margin: 25px 0 0 50px;
  
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font: 500 16px/40px Helvetica, Verdana, sans-serif;
  
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  
  /*Gradient*/
  background: #9dcc55; /* Old browsers */
  background: -moz-linear-gradient(top,  #9dcc55 0%, #96c23d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dcc55), color-stop(100%,#96c23d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #9dcc55 0%,#96c23d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #9dcc55 0%,#96c23d 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #9dcc55 0%,#96c23d 100%); /* IE10+ */
  background: linear-gradient(top,  #9dcc55 0%,#96c23d 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dcc55', endColorstr='#96c23d',GradientType=0 ); /* IE6-9 */
}

.pricingtable a:hover {
  background: #b2e560; /* Old browsers */
  background: -moz-linear-gradient(top,  #b2e560 0%, #96c23d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2e560), color-stop(100%,#96c23d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* IE10+ */
  background: linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e560', endColorstr='#96c23d',GradientType=0 ); /* IE6-9 */

}

Progress Update

With that, our first pricing table is complete! If we wanted to go further, we could grab a slab serif web font to make it look just like the PSD, but I like the Helvetica just fine here. Now we have to take this one item and turn it into three!

screenshot

Making Three Tables

To expand this into three unique tables, copy and paste the HTML that you just created so that you have three pricingtable divs and place them all inside of a container div. Then customize the text on each so that the features and price point are correct. Finally, add a “featured” class to the second table. We’ll us this to pull off the enlarged effect.

Basic

  • Full Email Support
  • 25GB of Storage
  • 5 Domains
  • 10 Email Addresses

$25

per month

Sign Up

Premium

  • Full Email Support
  • Unlimited Storage
  • Unlimited Domains
  • 50 Email Addresses

$79

per month

Sign Up

To make the pricing tables appear next to each other, go back to your pricingtable class and float it left. Also apply a width of 780px to your container and center it on the page with auto left and right margins.

#container {
	width: 780px;
	margin: 100px auto;
}

.pricingtable {
  width: 250px; height: 450px;
  background: white;
  margin: 5px;
  float: left;
  
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
     -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
          box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
}

Now we have three pricing tables in a row, which is exactly what we want. However, remember that the center one should be larger than the other two, this is not yet the case.

screenshot

Instead of manually going through and adjusting each little set of dimensions throughout the center pricing table, we can target the unique class that we gave it and apply a CSS transformation to enlarge it. Since all of our content is pure code (no images), the scaled up version should look just fine.

.featured {
	-webkit-transform: scale(1.2, 1.2);
	-moz-transform: scale(1.2, 1.2);
	-o-transform: scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
}

All Finished!

With that, our CSS pricing tables are complete. The last transformation gave us exactly the effect that we wanted with the center table larger and floating over the other two. Check out the live demo versions below.

Demo: Click here to launch demo
Code: See and tweak the source code at Dabblet

screenshot

Conclusion

I hope you enjoyed building these pricing tables and will get some good use out of them. Use them however you wish and be sure to download the PSD and vector versions from Design Curate.

Comments & Discussion

19 Comments

Comments & Discussion

19 Comments

  1. Wez Pyke says:

    I’ve never used the scale css property, should come in useful, thanks!

  2. Ham says:

    How to make table Right and Left to be Bigger while mouse hover?

  3. Hi, you have a problem with your hosting i think, all the time appears a message saying that it’s a dangerous website :/

  4. Simon Frog says:

    If you want to make the prices bigger on mouse hover then change all three DIV tags from

    to

  5. Simon Frog says:

    div class=”pricingtable” onmouseover=”this.className=’pricingtable featured’” onmouseout=”this.className=’pricingtable’”

  6. Joshua Johnson says:

    Or just give each table a class and only apply the CSS transform code above on hover.

  7. Andrew says:

    I notice in the original PSD files that the price is actually center aligned with the $ superscript actually appearing to the left. Is there an easy way to implement this to look the same as in your final design I think the alignment looks a little off?

  8. boat blog says:

    now i am learning psd to html this is very nice post.

  9. Dario says:

    I can’t see box shadow in internet explorer 9

    How to solve it?

  10. mnowluck says:

    Awesome men … awesome

  11. idleworx says:

    Excellent tutorial. Plain, clean and simple.

  12. David Chan says:

    Thanks so much for the article, it was very clear in the instruction. After reading, I managed to put up the table in my joomla site… appreciate your effort

  13. Agustin says:

    Fantastic, just what I needed. thanks

  14. Bewrong says:

    This is great stuff! Thank you very very much for this helpfull tutorial!
    best regards!

  15. Sajan Kota says:

    Very very helpful and very nicely explained tutorials. I am looking forward for your future posts.

  16. Sanjay chavda says:

    Awesome tnxx for this

  17. Amanda says:

    this tutorials very helpful to me,thanks

  18. Valerie says:

    This is a great tutorial. If you could just add like a small badge icon on the top left or right that specifies say recommended, etc, it would be even better. Cheers!

  19. mausr says:

    A VERY IMPORTANT MESSAGE FOR ANYBODY THINKING OF USING
    BLANKETHOG Nov 18, 09, 12:21PM | #1
    Joined: Nov 18, 09
    Threads: 1
    Posts: 1

    SCAMMERS!SCAMMERS!SCAMMERS!!!!!!!!!!
    I CANT STRESS IT ENOUGH “DO NOT USE OR ANY OF THEIR OTHER SITES!!!!!!!!THEY WILL NOT HAVE THE PAPER DONE ON TIME, THEY WILL NOT GIVE REFUNDS, THEY WILL USE WRITERS FROM 3RD WORLD COUNTRIES WHO CAN HARDLY SPEAK ANY ENGLISH, THEIR ESSAYS ARE NOT EVEN GOOD FOR A 1ST GRADE LEVEL, MAKE NO SENSE WHATSOEVER, PLAGIRISM PLAGIRISM PLAGIRISM, THEY WILL WRITE COMPLETE NONSENSE, THEY WILL LIE TO YOU IF YOU CALL THEM AND TELL YOU THAT IF THERE IS A PROBLEM YOU CAN GET A COMPLETE REFUND. dO NOT TRUST THEM!!!!!!!!!i CANT BELIEVE THAT SOMEHOW THIS PEOPLE ARE STILL OPERATING, I GOT IN CONTACT WITH SO MANY PEOPLE THAT HAVE BEEN SCAMMED BY THIS WEBSITE. BY THE WAY THAT IS NOT THE ONLY WEBSITE THEY OPERATE THERE IS OTHERS. BEWARE!!!!!!!!!!!!.THEY WILL POST FAKE COMMENTS ON WEBSITES TO MAKE IT LOOK THAT THERE IS SOME SATISFIED CUSTOMERS, THERE IS NOT ANY AT ALL!!!!!!
    BEWARE OF THIS SCAMMERS THERE IS NO CHANCE THEY WOULD COMPLETE YOUR PROJECT TO EVEN GET A D
    BEWARE OF AND ITS AFFILIATES
    FallenStudent Nov 18, 09, 08:15PM | #2
    Joined: Nov 18, 09
    Posts: 6

    I have to agree with this poster, I ordered my paper through them through google and found plagirism on the first google result.
    thomasmarlo Mar 17, 10, 05:40AM | #3
    Joined: Mar 17, 10
    Posts: 2

    Plagiarized papers. I order a paper from this company and received an “F” for plagiarism. The paper was poorly written but I used what I could and made the best out of it with the time that I had left to complete it. I missed the plagiarism tho, and failed the assignment. They only gave me a partial refund and will not respond to my request for a full refund. I want my money back!! I’m not a mad customer but I want to inform others to beware of this site and proceed with caution!!!

    Also, after several attempts to get someone to respond, I mentioned notifying the BBB and the response was ” we are not in America”

    Don’t buy papers here!!!

    Try superior papers, they did a great job for my research paper!

Leave a Comment

Subscribe
Membership
About the Author