日期:2014-05-17  浏览次数:20727 次

30个非凡的CSS技巧和例子

1. Hoverbox Image Gallery

A pure css-based gallery; hovering over an image enlarges it.

Hoverbox Image Gallery

?

2. Advanced CSS Menu

A creative and complex navigation scheme.

Advanced CSS Menu

3. Sliding Photograph Galleries

An accordion effect; hovering over an image expands it.

Stu Nicholls: CSSplay- Sliding Photograph Galleries

4. Lightbox Slides

Part of an article entitled "Supercharge your image borders " showcasing how you can use CSS styles to make images look more interesting.

Bite Size Standards - Supercharge your image borders

5. Drop shadow on an image

Aan image effect demo and discussion based on a A List Apart article entitled, "CSS Drop shadows ".

Drop shadow on an image

6. Cross Browser Multi-Page Photograph Gallery

Hovering over the tabs changes the category, while hovering over an image enlarges it.

Stu Nicholls: CSSplay - Cross Browser Multi Page Photograph Gallery

7. CSS Photo Zoom

Uses a single image and adjustment of the background-position attribute.

SimpleBits - CSS Photo Zoom

8. CSS gallery layout—smells like a table

Mimics a table layout, but uses lists. The gallery is also fluid width.

Dnevnik eklektika - CSS gallery layout—smells like a table

9. Sticky Footer

A static footer with very little XHTML required.

Sticky Footer

10. whatever: hover

A navigation menu that mimics Window’s Start menu.

Peterned - whatever: hover

11. CSS-Only Accordion Effect

An accordion effect using div’s and :hover ; the accordion effect can be vertical or horizontal.

The CSS-Only Accordion Effect - CSSnewbie

12. Scalable CSS Buttons Using PNG and Background Colors

A technique that addresses vertical scaling, the use of many images, and lack of a hover effect.

Scalable CSS Buttons Using PNG and Background Colors - David’s kitchen

13. Pushbutton Links

links that are styled to look like buttons without using images.

MikeCherim.com - Pushbutton Links

14. Scrollable Table with Fixed Header

The table’s captions stay put which is excellent for long tables.

Scrollable Table with Fixed Header

15. Content Overlay with CSS

When you hover over the image, the container div is shown with more text.

Snook.ca -  Content Overlay with CSS

1