Saturday, April 10, 2004

CSS Styling Demos

A List Apart


This month A List Apart, a veteran in the use of Cascading Style Sheets as part of standards-based web design has published some exceptional demonstrations of the power of CSS.



Table Row Highlighting

With a bit of JavaScript / DOM sorcery, we can provide our visitors with row highlighting for long data tables in HTML, by applying rollover states to the rows. This could be implemented tediously by hand, of course, but it would be silly to do so. Instead, we will use the DOM to find the rows to highlight on mouseover.

To see the effect in action

Read the article by Christian Heilmann - The Table Ruler


CSS and Email

Most people who’ve attempted to recreate a sophisticated design in HTML email have run into a wall when using CSS, either in the form of inexplicable mangling by email clients or a pronouncement by an email administrator stating that CSS is “against the rules.”

Despite prevailing wisdom to the contrary, you can safely deploy HTML emails styled with good old-fashioned CSS. Not all attributes will be invited to the party, but many of them work flawlessly with this method. If you’re not content to roll over and use font tags in your HTML emails, read on.

Read the article by Mark Wyner - CSS and Email, Kissing in a Tree


CSS Sprites: Image Slicing

Say goodbye to old-school slicing and dicing when creating image maps, buttons, and navigation menus. Instead, say hello to a deceptively simple yet powerful sprite-based CSS solution. This article will demonstrate using CSS to create hover buttons, mapping links, and defining irregular shapes. It follows up with the design benefits and pitfalls.


Read the article by Dave Shea - CSS Sprites: Image Slicing’s Kiss of Death



Rounded Corners in CSS

Part II : Dynamic CSS layouts with customized borders and corners, advances to the next level, extending the technique to work with more complicated backgrounds such as gradients and patterns.

Rounded Corners in CSS Demo

Read the article by Soren Madsen - CSS Design: Creating Custom Corners & Borders Part II




More articles on CSS can be found at A List Apart

No comments:

Post a Comment