CSS techniques and general useful CSS information

Cascading Style Sheets (CSS) have been around for a while now and new ways to design/code better websites with CSS appear frequently.

Below are some great examples of innovative (well, at the time at least) CSS techniques and general userful CSS information.

1. Lightbox JS (Lokesh Dhakar)

   Lightbox JS is a simple, unobtrusive script used to to overlay images on the current page. It’s a snap to setup and works on all modern browsers.
   This looks great, it will be all over the place in no time.

2. Bubble Tooltips (Web-Graphics)

   Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.

3. Turning a list into a navigation bar (456 Berea Street)

   Roger Johansson explains how to turn a list into a navigation bar. This technique has become quite popular.

4. CSS shorthand Guide (Dustin Diaz)

   Dustin Diaz’s CSS shorthand Guide is a wonderful collection of.. CSS shorthands (duh?!). Definately worth checking out.

5. CSS Cheat Sheet (ILoveJackDaniels.com)

   Dave Child offers a nice CSS reference sheet, listing all selectors (as of CSS 2.1) and properties (.png and .pdf format available).

6. CSS Drop Shadows/CSS Drop Shadows II: Fuzzy Shadows (A List Apart)

   Sergio Villarreal’s CSS Drop Shadows and CSS Drop Shadows II: Fuzzy Shadows articles show a way to create beautiful drop with ease.

7. Image Replacement. Again. (mezzoblue)

   Dave Shea lists different ways to do Image Replacement, a technique to replace text with pretty images. Check Levin Alexander’s Image replacement decision grid to help you decide which technique to use.

8. A form with style (CSS Play)

   Stu Nicholls of CSS Play has a nice write-up about styling forms with CSS.

9. In search of the One True Layout (Position is Everything)

   Position is Everything has a great article about CSS-based layouts and the search for the “One True Layout”.