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
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. alt text http://img514.imageshack.us/img514/2662/afbeelding1eu.png
For lists, Listamatic immediately comes to mind.
For everything else, I can only think of CSS Zen Garden.
Open Source Web Design has a lot of stuff available. You can see it at: oswd.org
CSS Play, by Stu Nicholls, and, of course, A List Apart are two of my own favourites.
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!
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.
精彩评论