How To Design Custom Pricing Plan Tables with HTML5 and CSS3

Any company selling a service with payment plans usually breaks up the structure into different packages. Smaller packages will cost less but also provide fewer features. Pricing tables are the perfect UI component to display these packages in an easy-to-compare design.

For this tutorial I want to demonstrate how we can create pricing tables with just a bit of HTML5 and CSS3. Despite the name, I haven’t actually used any <table> elements within the design. You might feel these are easier but they also depend on a rigid formulaic structure. Pricing tables can have many facets including service terms, plan details, pricing details, and of course the purchase/signup button.

custom designed html5 css3 pricing tables tutorial open source

Live DemoDownload Source Code

30 Beautiful Typekit Web Fonts to use in Design Projects

The online webfont service Typekit by Adobe is a fantastic business model. Their premium accounts are very affordable in yearly billing cycles and you have access to over 700+ different fonts. These can be loaded directly into your CSS and used as a regular font-family value. Typekit is a quick way to dramatically improve the layout of your website.

I have put together this showcase of 30 personal favorites from Typekit. You can use these fonts in so many different places like your navigation, footer, header text, and even body content. Custom typefaces will take a bit of time to load – so there is a tradeoff for using all custom web fonts. However when used sparingly the Typekit library is a colossus unmatched anywhere else on the web.

Proxima Nova

proxima nova typekit webfonts

34 Free Open Source CSS Code Snippets for Developers

With a quick Google search you will find a ton of handy CSS2/CSS3 code snippets. But what about pre-built CSS web interfaces? There are some cool widgets and samples out there, but it can be difficult finding great high-quality releases. I think developers really treasure open source codes for the fact that it saves a lot of time putting together more complicated websites.

In this showcase gallery I have organized 34 outstanding and free CSS code snippets. All of these examples provide some type of website interface element such as forms, buttons, tables, switches, pagination, and other common items. Be sure to check out the gallery listing to get a better idea of what you may be able to use in your own website(s). All items are provided by CSSFlow which you can download for free and include on any number of projects.

40 More Brilliant Mobile Responsive Website Layouts

There are hundreds of brand new mobile responsive website layouts published every month. The trend has swept through the design world and taken web development to a new level. In the past we have written on some other amazing responsive websites and I want to use this gallery as another comparison.

I’ve put together 40 outstanding mobile responsive website screenshots from a widescreen monitor. All of these layouts will reposition based on the device’s window screen. You can accomplish this design style by using CSS3 media queries. Most of these layouts are perfect for inspiration as you can see how the different trends can fold together.

Cantina Dorigati

How to Animate Threaded Comments with CSS and jQuery

With many social applications the use of threaded comments has become a staple in functionality. Webmasters today are focusing much more on user experience rather than content generation, and because of this there has been a rise in custom animation effects.

Below I’ll be going over a guide to building your own custom jQuery threaded comments from scratch. For the ease of our tutorial we won’t be using any backend system to actually store the data anywhere. This means no MySQL databases or PHP calls to a server – all comments are added in-page and will be lost upon page refresh.

jQuery Animated Comments Thread