CSS Based is a project providing web designers a gallery of well designed CSS-based websites from all around the world.
Direct link: CSS Based
Monthly Archives: May 2009
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)…
Direct link: The 1Kb CSS Grid – Part 1
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 (especially to support a dying user base). Here’s a quick solution…
Direct link: Target IE6 and IE7 with only 1 extra character in your CSS
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…
Direct link: How To Put a Multi-Line Indent on a Styled Blockquote
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)…
Direct link: Transform your text with text-transform
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 that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in…
Direct link: The CSS Overflow Property
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…
Direct link: CSS Spriting Tips
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…
Direct link: Centered Fake 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…
Direct link: 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…
Direct link: Smart Columns with CSS and jQuery