Awesome CSS Tricks

Posted on the May 10th, 2005 under Uncategorized by Tohir

There are many ‘cool’ things that can be done with web scripting (client side) but there are somethings that are just totally awesome. And awesome has to meet a few criteria:

Firstly, it has to be cross-browser
Secondly degrades well in older browsers
Thirdly, accessible

This past weekend I found a few such things that are worth sharing and using!

A CSS Table Layout

Often it is difficult to do a table-perfect css layout. Here’s a script that allows you to write your divs, and then use javascript to display as a table layout. Visually a table, but the order can be set to be accessible. Awesome!! People who hate fixing css layouts are gonna love this.

http://glazkov.com/blog/archive/2005/05/02/476.aspx

Tab Widget – Tabtastic

Tabtastic is a basic tab widget using pure CSS and JavaScript. Switching between tabs is done via anchors (#internalLinks). Its a bit irritating that this causes the page to jump, but nonetheless awesome that an accessible and standards compliant widget has been created.

http://phrogz.net/JS/Tabtastic/index.html

Enhanced Form Widgets

Say goodbye to the old/ugly form elements and replace them with your own. Now it is possible to style radio buttons and check boxes as you want, and still have them degrade well. A must see – totally awesome.

http://www.jacobrask.net/blog/enhanced-form-widgets
http://www.flog.co.nz/2005/04/27/arc-adams-radiocheckbox-customisation/

Examples of this:

http://www.jacobrask.net/lab/efw/
http://www.flog.co.nz/lab/ARC/ARC.htm

A CSS Cheatsheet

Lastly, I found a good cheat sheet for CSS amongst others. Apart from being a good reference, the section of selectors is really informative. In case you don’t know: you haven’t tasted CSS till you’ve tasted CSS selectors. This is where the real power of CSS lies.

http://www.ilovejackdaniels.com/css/css-cheat-sheet/

Also check other cheatsheets at: http://www.ilovejackdaniels.com/cheat-sheets/