30个非凡的CSS技巧和例子
1. Hoverbox Image Gallery
A pure css-based gallery; hovering over an image enlarges it.
?
2. Advanced CSS MenuA creative and complex navigation scheme.
An accordion effect; hovering over an image expands it.
Part of an article entitled "Supercharge your image borders" showcasing how you can use CSS styles to make images look more interesting.
Aan image effect demo and discussion based on a A List Apart article entitled, "CSS Drop shadows".
Hovering over the tabs changes the category, while hovering over an image enlarges it.
Uses a single image and adjustment of the background-position attribute.
Mimics a table layout, but uses lists. The gallery is also fluid width.
A static footer with very little XHTML required.
A navigation menu that mimics Window’s Start menu.
An accordion effect using div’s and :hover; the accordion effect can be vertical or horizontal.
A technique that addresses vertical scaling, the use of many images, and lack of a hover effect.
links that are styled to look like buttons without using images.
The table’s captions stay put which is excellent for long tables.
When you hover over the image, the container div is shown with more text.
A beautifully styled, table with semantic mark-up - uses a background image.
Another way to add flare to images (rounds the corners and adds a border and drop shadow).
Simple tutorial on adding icons to different types of links.
Uses only one image and very few lines of code and mark-up.
Tree-like navigation using nested lists, great for sitemap pages.
Opacity technique without the use of JavaScript (but at the cost of using non-valid XHTML code).
Fluid width and height divs with rounded corners.
List items <li> styled into bar graphs.
3 bar graph examples - "Basic CSS Bar Graph", "Complex CSS BarGraph", and "Vertical CSS Bar Graph" using div’s and definition listtags.
The arrow follows along the entire width of the navigation bar smoothly, without the use of JavaScript or animated gif’s.
Showcases an accessible web form.
Using empty spacer div’s, the page’s text mimics a wrapping effect around the background image.
A demo using opacity and a single image that gradually fades in to cover the text.
A pop-up technique that works even in IE 5 Mac.
Uses background image overlays, and empty span tag, and position: absolute to create a gradient effect on text.
?
原文链接：
30 Exceptional CSS Techniques and Examples
4 楼 wangdei 2008-04-30 能不能帮我看看我的这网站有什么CSS比较好看呢?