Every web developer should have in their toolbox a collection of CSS tools and resources like the ones outlined in this article. A set of techniques that you rely on and that are always at the ready to cover any possible eventuality.
You will find not a selection of the latest innovative CSS techniques (there are some) in this article, merely a collection of tools, resources and downloads that can be used by web designers for solutions to everyday CSS design and coding solutions.
The resources below have been split into four categories: CSS Download Packages (all of the CSS resources offer multiple variations of each technique), Downloadable CSS Tools (the resources within this category offers specialized templates), Web, Mobile & Form Frameworks (+ tools and templates to help you get started with each); Feature-Rich and Outstanding Mobile & Web Templates and finally, a selection of tools to help with cross browser compatibility.
We don’t presume that this is an ultimate collection, merely a selection of resources we have found to be indispensable. We are positive we have missed a few, and would love to hear about the tools and resources you rely upon.
CSS Technique Download Packages & Resources
Within this category, all of the CSS resources offer multiple variations of each technique (forms, tables, rounded corners…), all within their download packages. Quite often you will find that each variant is based on the same markup with only the CSS changing. These resources are all worth bookmarking.
As well as a detailed video tutorial, here you will also find FIVE different downloadable techniques for creating rounded corners, each each having its own advantages and disadvantages.
Five ROUNDED CORNERS Techniques →View Demo →
Within the Formy CSS Frameworks download package, you will find FOUR (3 horizontal variants and 1 vertical form example) accessible CSS form styles which interacts in the simplest and natural way with HTML form.
Formy CSS Framework – 4 Demo Forms →
This article takes a look at styling regular lists by showing 8 different ways to beautifully style your HTML lists with CSS. All of the lists are downloadable in a single package.
>8 Different Ways to Style your HTML lists with CSS →View the Demo →
A lot of time could be wasted on a single table although it’s just a simple one. This is where this article comes in handy. It will show you TEN of the most easily implemented CSS table designs. All ten of the table styles are available as a single download.
10 CSS Table Designs →View the Demo →
With over 20 different pagination styles available, this page is a an awesome resource. And yes, all styles are downloadable.
12 CSS-only Menus →View the Demo →
This is a collection of buttons that show what is possible using CSS3 and other advanced techniques, while maintaining the simplest possible markup. All available within the download.
15 CSS3Buttons →View the Demo →
Within this download package you will a find a basic world map image map example, an example with hover states and, finally, an example with tooltips.
View the Demo →
This CSS Drop-Down Menu Framework offers 25 downloadable menus. As well as some generic menus (vertical, horizontal, mega-menu…), you will also find some menu examples from popular websites, like Flickr, Adobe, Nividia and Vimeo.
25 CSS Drop-Down Menus →View the Demo →
The main goal of the article has been to get the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility. The result is a set of 40 layouts, all available to download individually or you can download all 40 layouts in a single download package.
100+ HTML Email Templates
This is the ultimate in email template resource. With over 100 templates, all designed by prominent designers, this is a must bookmark.
100+ HTML Email Templates →
Downloadable CSS Tools, Resources & Source Code
The resources within this category offers specialised templates and source code downloads that go far beyond any typical CSS resource. These downloads are fantastic for learning purposes.
Animated Price Grid (CSS3)
Web, Mobile & Form Frameworks (+ Templates)
The Fluid Grid system is a web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones. The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework.
Stephen Bau had been looking for a means of rapidly developing interactive prototypes for his site designs. He has built a library of commonly used HTML elements, combining these with CSS for typography and layout.
Fluid 960 Grid System Templates →Fluid 960 Grid System →
Blueprint is a CSS framework that can save you time and headaches when working on any project that involves HTML and CSS, whether it be with Rails, PHP, or just laying out an HTML page. In this tutorial you will get a look at the inner workings of Blueprint and you’ll be able to download the demo application that uses Blueprint to get a better idea of how to effectively and quickly with the framework.
Blueprint CSS Framework + Template Source →View the Demo →
Here is a fresh take on the CSS grid (loosely based on Nathan Smith’s 960 Grid System), with its main mission to be lightweight. The basic configuration is a 12 column grid system spread out over 960 pixels. Each column is 60 pixels wide with a 20 pixel gutter in between.
The 1KB CSS Grid →View the Demo →
This article explains the basics of Grid 960, from planning the grid for a design to actually coding the prototype. The sample design (downloadable) will exploit most capabilities of the Grid 960 giving you a firm knowledge base to work on and help you come to grips with the 960gs.
The Grid 960 Prototype Framework Template →
iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp. The kit is accessible to anyone even people without any html knowledge and is simple to understand thanks to the included tutorials. In a couple of minutes you will have created a full and professional looking web app. iWebKit is a great tool because it is very easy to use, extremely fast, compatible & extendable.
View the Demo →
Formee works with the technique provided by Fluid 960 Grid System to compose the form's layout, allowing total flexibility to put it in any website or web system.
The form has a structure built around percentage widths, thus allowing its inclusion in any project, adapting to the space available. Formee has its structural code independent of the style codes, facilitating the complete customization and manteinance of the form.
The form has been built with care to preserve web standards and their semantic values, working with the smallest possible amount of tags and according to the W3C rules.
Formee – Fresh baked forms for your websites! →View the Demo →
Feature-Rich and Outstanding Mobile & Web Templates
All of these web/mobile layouts go above and beyond what most CSS templates can offer. Not all are feature-rich, but do they do all offer something unique and all have beautifully crafted markup.
Cross Browser Compatibility Tools
3 Pie (download) is a set of CSS “behaviors” that can be attached to any CSS file by way of the behavior element in order to add rendering support to Internet Explorer 6, 7 or 8 for the more popular CSS3 rendering features:
border-image; multiple background images;
linear-gradient as background image.
CSS3 PIE: CSS3 decorations for IE →
CSS3, Please! is a small utility that allows you to edit the document in real-time and create your own personalised cross browser CSS3 rule.
CSS3 Please! The Cross-Browser CSS3 Rule Generator →