web design examples by element type

Question

Hi,

I'm trying to improve the style of a website. I'm looking for some examples of beautifully styled HTML elements (tables, lists, headings, etc.) that I can draw on for inspiration, or just copy and paste verbatim (if that's permitted).

Some explanation of how the styling was achieved would be nice, but is not absolutely necessary, as I can always use Firebug to reverse engineer the design. Ideally the designs should:

• Be compatible with all modern browsers (which excludes IE6 IMO)
• Use little or no JavaScript
• Be valid XHTML transitional/strict

EDIT: Ideally, the site(s) should provide an easy way to view a list of styles for a particular element type (ordered list, table, heading, etc.)

Thanks, Don

Answer 1

Open Source Web Design has a lot of stuff available. You can see it at: oswd.org

Answer 2

For lists, Listamatic immediately comes to mind.

For everything else, I can only think of CSS Zen Garden.

Answer 3

The folks at Zen Garden think they're pretty hot. There's a large collection of different designs of the same HTML text to be admired there. Maybe you can learn something from the masters!

Answer 4

CSS Play, by Stu Nicholls, and, of course, A List Apart are two of my own favourites.

Answer 5

http://www.dynamicdrive.com/style/

http://css-tricks.com/

http://www.css-website.com/

http://cssmania.com/

http://cssline.com/

http://webdesignfromscratch.com/web-design/web-2.0-design-style-guide.php#gradients

http://www.webcreme.com/

http://css-warfare.com/

http://www.cssbeauty.com/

http://www.boxedcss.com/

http://css.maxdesign.com.au/index.htm

http://www.csselite.com/

http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/

http://veerle.duoh.com/index.php/blog/comments/a_css_styled_table/

http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS

http://www.designmeltdown.com/default.aspx

http://net.tutsplus.com/tutorials/html-css-techniques/design-a-beautiful-website-from-scratch/

http://inspectelement.com/articles/the-ultimate-a-z-of-the-best-design-and-development-related-sites/

For the inspirational sites, I use Firefox + Firebug. 95% of the sites listed comply to web standards, so I can peek at the code and know it's OK to use.

Answer 6

The best recource for specific elements and types is in my opinion by far http://www.patterntap.com. There you browse categories like lists and tables.