2/17/13

How To Build A Pricing Table With CSS3 Animation

Paulund
Tutorials Snippets Resources Archives About Contact

How To Build A Pricing Table With CSS3 Animation

Posted on November 23 in CSS. Tweet 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
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.
<i cas"rcn_al" dv ls=piigtbe> <l u> <iSadr<l> l>tnad/i <i0/i l>2<l> <iPretfrtoegtigsatdwt orap<l> l>efc o hs etn tre ih u p./i <i1 Poet<l> l>5 rjcs/i <i5BSoae/i l>G trg<l> <iUlmtdUes/i l>niie sr<l> <iN Tm Takn<l> l>o ie rcig/i <iEcae Scrt<l> l>nhnd euiy/i <i<l> l>/i <i< he="cas"u_o"ByNw/>/i l>a rf" ls=bynw>u o<a<l> <u> /l <l u> <iPeim/i l>rmu<l> <i0/i l>6<l> <iPretfrtoegtigsatdwt orap<l> l>efc o hs etn tre ih u p./i <i1 Poet<l> l>5 rjcs/i <i5BSoae/i l>G trg<l> <iUlmtdUes/i l>niie sr<l> <iN Tm Takn<l> l>o ie rcig/i <iEcae Scrt<l> l>nhnd euiy/i <i<l> l>/i <i< he="cas"u_o"ByNw/>/i l>a rf" ls=bynw>u o<a<l> <u> /l <l u> <iPoesoa<l> l>rfsinl/i <i0/i l>8<l> <iPretfrtoegtigsatdwt orap<l> l>efc o hs etn tre ih u p./i <i1 Poet<l> l>5 rjcs/i <i5BSoae/i l>G trg<l> <iUlmtdUes/i l>niie sr<l> <iN Tm Takn<l> l>o ie rcig/i

www.paulund.co.uk/css3-animation-pricing-table

1/5

2/17/13

How To Build A Pricing Table With CSS3 Animation

<iEcae Scrt<l> l>nhnd euiy/i <i<l> l>/i <i< he="cas"u_o"ByNw/>/i l>a rf" ls=bynw>u o<a<l> <u> /l <l u> <iPu<l> l>ls/i <i0<l> l>10/i <iPretfrtoegtigsatdwt orap<l> l>efc o hs etn tre ih u p./i <i1 Poet<l> l>5 rjcs/i <i5BSoae/i l>G trg<l> <iUlmtdUes/i l>niie sr<l> <iN Tm Takn<l> l>o ie rcig/i <iEcae Scrt<l> l>nhnd euiy/i <i<l> l>/i <i< he="cas"u_o"ByNw/>/i l>a rf" ls=bynw>u o<a<l> <u> /l <l u> <iMxmm/i l>aiu<l> <i2<l> l>10/i <iPretfrtoegtigsatdwt orap<l> l>efc o hs etn tre ih u p./i <i1 Poet<l> l>5 rjcs/i <i5BSoae/i l>G trg<l> <iUlmtdUes/i l>niie sr<l> <iN Tm Takn<l> l>o ie rcig/i <iEcae Scrt<l> l>nhnd euiy/i <i<l> l>/i <i< he="cas"u_o"ByNw/>/i l>a rf" ls=bynw>u o<a<l> <u> /l <dv /i>

The CSS
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.
.rcn_al { piigtbe bre:p sld#4bc odr1x oi ccc; bre-ais4x odrrdu:p; -o-odrrdu:p; mzbre-ais4x -ektbre-ais4x wbi-odrrdu:p; otie7xsld#233 uln:p oi fff; fotlf; la:et }

Style the Price Table Columns

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 Make the lists float left Create the width of the each column Make sure there is no margin for the lists Add a border around the whole list Add some padding inside the padding Make the text align to the center Make sure that the background colour is white Here is the CSS for the above.
.rcn_al u { piigtbe l ls-tl:oe itsyenn; fotlf; la:et wdh17x it:4p; mri:; agn0 bre:p sld#233 odr1x oi fff; pdig5x adn:p; tx-lg:etr etaincne; bcgon-oo:FF akrudclr#F; }

Style The Hover Event

Looking back at the PSD image we had a column which was larger than the other columns, we are going to achieve this look by scaling the column up when the mouse is over the column. For this effect we can just use the :hover event on the list. To achieve the the scaling of the column we need to use a CSS3 feature called transform. Transform the column with a scale of 1.1, therefore increase the size by 10%. Set a box shadow to make it look as if the box is coming out at you. Change the cursor to be a pointer. Copy the following CSS to achieve the column scaling.
.rcn_al u:oe { piigtbe lhvr -ekttasom sae11; wbi-rnfr: cl(.) -o-rnfr:sae11; mztasom cl(.) --rnfr:sae11; otasom cl(.)

www.paulund.co.uk/css3-animation-pricing-table

2/5

2/17/13

How To Build A Pricing Table With CSS3 Animation

-o-o-hdw3x5x7xrb(,,,7; mzbxsao:p p p ga000.) -ektbxsao:3x5x7xrb(,,,7; wbi-o-hdw p p p ga000.) bxsao:p 5x7xrb(,,,7; o-hdw3x p p ga000.) cro:one; usrpitr

Styling Each List Item

Each list item needs to have padding and a border on the bottom, use the following CSS to achieve this styling.
.rcn_al u l { piigtbe l i bre-otm1xdse #f22 odrbto:p ahd cdd; pdig1p 0 adn:0x ; }

Styling The Rows

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. The first row needs to be larger font and with a bold weight. On the second row we need a darker background colour. With the 3rd row we need a smaller font but the weight needs to be bold. With the remaining rows we need to set the font size to be 14pixels. On the last row we are going to add a link which will be the sign up now button call to action. Use the following CSS to achieve this look.
.rcn_al u l:is-hl { piigtbe l ifrtcid fn-ie1p; otsz:8x fn-egtbl; otwih:od } .rcn_al u l:t-hl(){ piigtbe l inhcid2 bcgon:fff; akrud#bbb } .rcn_al u l:t-hl(){ piigtbe l inhcid3 fn-ie1p; otsz:2x fn-egtbl; otwih:od } .rcn_al u l:t-hl(+){ piigtbe l inhcidn4 fn-ie1p; otsz:4x } .rcn_al u l:atcida{ piigtbe l ils-hl bre-ais1p; odrrdu:0x -o-odrrdu:0x mzbre-ais1p; -ektbre-ais1p; wbi-odrrdu:0x bre:p sld#4bc odr1x oi ccc; pdig1p; adn:0x mri:p 0 agn5x ; bcgon:#566 / Odbosr * akrud ee9; * l rwes / bcgon:-o-iergain(o,#5660,#13010) / F36 * akrud mzlna-rdettp ee9 % dd6 0%; * F.+ / bcgon:-ektgain(ier lf tp lf bto,clrso(%#566,clrso(0%#130) / Crm,aai+* akrud wbi-rdetlna, et o, et otm oo-tp0,ee9) oo-tp10,dd6); * hoeSfr4 / bcgon:-ektlna-rdettp #5660,dd6 10) / Crm1+Sfr51 * akrud wbi-iergain(o, ee9 %#130 0%; * hoe0,aai.+ / bcgon:--iergain(o,#5660,dd6 10) / Oea11+* akrud olna-rdettp ee9 %#130 0%; * pr1.0 / bcgon:-slna-rdettp #5660,dd6 10) / I1+* akrud m-iergain(o, ee9 %#130 0%; * E0 / fle:poi:XmgTasomMcootgain(satoosr'ee9' edoosr'dd6'GainTp= ) / I69* itr rgdDIaernfr.irsf.rdet trClrt=#566, nClrt=#130,rdetye0 ; * E- / bcgon:lna-rdettp #5660,dd6 10) / WC* akrud iergain(o, ee9 %#130 0%; * 3 / clr#0; oo:00 fn-tl:tlc otsyeiai; dslybok ipa:lc; }

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

Share The Wealth

17

Tweet

Keep updated with the latest tutorials and snippets.

Enter your email address Subscribe

Link Indenting With CSS3 AnimationSecure Your WordPress Site david this does not seem to work in internet explorer 9. any ideas? thanks in advance http://www.paulund.co.uk/ Paul There are some css3 things which IE9 can't do I don't know exactly what but if you use Firefox or Chrome it should work perfectly well. david www.paulund.co.uk/css3-animation-pricing-table 3/5

2/17/13

How To Build A Pricing Table With CSS3 Animation yes i use firefox just was looking for complete cross browser compatibility. thanks though still good work http://www.paulund.co.uk/ Paul hi David did you find out anymore about the compatibility issues? david no still working on it JoelBesada Cool, but I don't see any animations on the pricing table. CSS transforms is not the same as CSS transitions (i.e. animations). adam the typeface on your website renders weird at the size you have it for articles. I'm on Chrome/Win7 http://www.logoguru.co.uk/ Sam Anderson i have use this codes as you given to me but i am facing problem that i have created the table in 1st step but inner content of a table bounds out in alignment. What should i do to fix it? http://www.paulund.co.uk/ Paul Not sure I can help without seeing whats wrong so the only thing I can suggest is to try copying the code again you might of missed something. http://www.BriteRise.com/ Jason Davis Perfect. I love it and it worked flawlessly. Set up a 3 column pricing grid with beautiful style in 20 minutes. Thank you Thank you Thank you. Check it out on WordPress Blogs http://www.paulund.co.uk/ Paul Nice one looks awesome good work. http://www.BriteRise.com/ Jason Davis Thanks again for the wonderful snippet and reply. http://www.paulund.co.uk/ Paul Your Welcome Jason http://www.paulund.co.uk/ Paul Hello Matthew, you are able to style the table header differently than the others. On all of the columns the header is the first list item on the lists. With CSS you can use the pseudo class first-child to style the first item in the list. .pricing_table ul li:first-child { // Add your styles here } I LIKE ! -)How To Build A Pricing Table With CSS3 Animation paulund.co.uk/css3-animation via @paulund_ Vinvin G. (@vinvinXD) March 19, 2012

Search...

Facebook

Google

Twitter

Amazing Hosting Media Temple Amazing Support, Amazing Uptime, Amazing Performance! ads via Carbon

Specific Social Notification Bar

Specific social notification bar Wordpress plugin gives you an easy way to display a discrete yet effective notification bar on your website. There can be a different notification bar for visitors from Twitter, a different bar for visitors from Facebook and a different bar from Google+. Get It Now

Popular Tutorials
www.paulund.co.uk/css3-animation-pricing-table 4/5

2/17/13

How To Build A Pricing Table With CSS3 Animation Creating Different CSS3 Box Shadows Effects How To Use The HTML5 Notification API How To Create Pretty Search Forms Smooth Scrolling To Internal Links With jQuery How To Create Different Shapes In CSS How To Use HTML5 GeoLocation API With Google Maps CSS Buttons With Icons But No Images Turn On HTML5 In IE8 or Lower How To Create A Simple Modal Box With JQuery How To Add Text Gradients With CSS

PowerfulSEOwithRankTracker only$39!
Ends:7days 10hours 43min 59sec

Paulund Proudly Hosted @WpEngine, Powered By MaxCDN

www.paulund.co.uk/css3-animation-pricing-table

5/5