2009/03/01

All About Blog Design, Short Reviews, Tips and Make Money Online

10 Examples of “How to Play it Cool” with CSS

Posted: 01 Mar 2009 03:36 AM CST

CSS List Expander

This technique makes an unordered list go on in depth as much as we want. The script analyzes the list tree and applies toggle functions for expanding/collapsing child objects. Parent items, the ones we should click to expand child objects, don’t need to be wrapped inside an anchor element. Script checks for child objects and adds appropriate clickable elements. Furthermore the script adds two buttons above the list, one for expanding and one for collapsing all the elements.

Folded Corner using CSS

There are many techniques on the web for adding folded corners to DIV containers. This one does so by using relative positioning to slightly offset a DIV to the right and bottom, so its a background image, which is a curly image, falls inline with the border of the outer DIV.

Perfect Fluid CSS Layout

The perfect fluid width layout works on all major browsers. The layout can shrink to 780px which accommodates 800×600 resolution and also grows to 1260px for 1280×768 resolutions.

CSS Image Maps

This works by placing the title of the item hotspot into the definition-term tags of your list, followed by the description in the definition-description tags. The CSS then hides the definition-term (which is really used for when CSS is disabled), as well as the definition-description (displayed upon hover of the anchor) and displays the definition description (in this case, the description of the hotspot(s) you’ve chosen for your imagemap), and absolutely positions and displays the description upon rolling over the hotspot (also defined in the CSS).

CSS Style Sheet Switcher

CSS Style Switcher

Using CSS and Javascript, you can use alternate style sheets which can change the look and feel of your website at a single click. View source to see the code.

Visual Site Map using CSS

Visual Sitemap

StyleMap uses valid HTML, CSS and a touch of DOM scripting to produce a visual sitemap out of an embedded definition list. The result is a functional, scalable, and above-all rapid way to produce a tree-style map for the planning stages of your project.

CSS Speech Bubbles

Works nicely for blog comment styling. Customize colors and styling to your taste from within the CSS, then simply edit the pointer tip image. Works on any background to fit with your design.

CSS Pricing Matrix

A matrix table using CSS where clicking on a cell should highlight the associated cell in the top row and left most column. This helps in establishing relationships among the information provided in the table quickly.

CSS Candy Menu

Candy Menu is a stylish CSS drop down menu that’s comes in six provocative color schemes - Caramel Cream, Blueberry Blast, Black Licorice, Green Apple, Grape Sensation and Raspberry Punch. You can also use it in your WordPress themes if you have the necessary expertise in theme modification.

CSS Image Highlighting with Opacity

CSS Opacity Mouseover Highlighting

This example changes the opacity of any image link when the mouse moves over it using the “hover:” pseudo class of CSS. Note the two different properties used to specify opacity in CSS below. In IE 5.5+, the “filter” property is used (range: 0-100), and in Mozilla/NS6+, “-moz-opacity” (range: 0-1). Both properties are proprietary, and not formally endorsed by the W3C.