CSS Based

CSS Based is a project providing web designers a gallery of well designed CSS-based websites from all around the world.

The 1Kb CSS Grid – Part 1

Here is a fresh take on the CSS grid (loosely based on Nathan Smith’s 960 Grid System). Its mission is to be lightweight. It can be used to streamline page templates for content management. All this in just one measly kilobyte (actually, 662 bytes, but who’s counting)…

Target IE6 and IE7 with only 1 extra character in your CSS

To get around the inadequacies and bugs of IE6 and IE7, we see people going to great lengths and even adding a second stylesheet with conditional comments when we all preach at the same time to minimize HTTP requests. Complicated hacks and workarounds all take more time. And time is money in the business world […]

How To Put a Multi-Line Indent on a Styled Blockquote

This brief and easy tutorial provides a method to indent multiple lines of text around a background image on a styled blockquote element…

Transform your text with text-transform

Text-transform is an incredibly useful CSS property, yet also one of the most underused. Here are its possible values (with examples)…

The CSS Overflow Property

Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don’t set the height of a box, the height of […]

CSS Spriting Tips

One of the most effective ways of speeding up a website’s render time is to reduce the number of HTTP requests required to fetch content. An effective method to achieve this is via CSS sprites, which is combining multiple images into one large image and using CSS to only display parts of it…

Centered Fake Floats

When display: inline-block became available it allowed an efficient and (mostly) cross-browser way to center elements, without resolving to floats…

22 CSS Button Styling Tutorials and Techniques

CSS button styling can be tricky and sometimes tedious. If you are looking for a simple and effective way of creating dynamic CSS buttons with cross browser compatibility, these tutorials are for you. You will find 22 CSS button styling tutorials and techniques…

Smart Columns with CSS and jQuery

Other liquid based websites, commonly use 2 techniques for displaying columns – fixed columns and liquid columns. There are drawbacks to both and here’s a suggested solution…

Next Page »