1. Hoverbox Image Gallery



A pure css-based gallery; hovering over an image enlarges itHoverbox Image Gallery

2. Advanced CSS Menu



A creative and complex navigation scheme.

Advanced CSS Menu

3. Sliding PhotographGalleries


效果源码:演示页最下方 已提供css xhtml代码

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

css tab标签切换相册分类


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 PhotoZoom


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

SimpleBits - CSS Photo Zoom

8. CSSgallery layout—smells like a table


Dnevnik eklektika - CSS gallery layout—smells like a table

9. Sticky Footer

A static footer with very little XHTML required.

10. whatever: hover

windows 开始菜单效果

A navigation menu that mimics Window’s Start menu.

Peterned - whatever: hover

11. CSS-Only AccordionEffect

鼠标滑过 段落展开,其它文字收缩效果

n 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

png图片和背景颜色定义的可缩放大小的css 按钮
Scalable CSS Buttons Using PNG and Background Colors - David’s kitchen

13. Pushbutton Links


MikeCherim.com - Pushbutton Links

14. Scrollable Table with Fixed Header

数据表格 table 上下拉动表格,但是 头部标题栏跟底部保持不动,适合内容多而长的表格。

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

Scrollable Table with Fixed Header

15. Content Overlaywith CSS

css 浮动层效果

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

Snook.ca -  Content Overlay with CSS

16. A CSS styled tableversion 2


A beautifully styled, table with semantic mark-up – uses a background image.

A CSS styled table version 2

17. PNG Overlay


Another way to add flare to images (rounds the corners and adds a border and drop shadow).

PNG Overlay

18. Showing Hyperlink Cues with CSS


Simple tutorial on adding icons to different types of links.

Ask the CSS Guy - Showing Hyperlink Cues with CSS

19. Simple Rounded Corner CSS Boxes


Uses only one image and very few lines of code and mark-up.

MODx Content Management System - Simple Rounded Corner CSS </p>  <p>Boxes

20. SitemapCelebration


Tree-like navigation using nested lists, great for sitemap pages.

Zab Design - Sitemap Celebration

21. Easy cross-browser transparency


Opacity technique without the use of JavaScript (but at the cost of using non-valid XHTML code).

Bite Size Standards - Easy cross-browser transparency

22. Curved corners 2


Fluid width and height divs with rounded corners.

HTML Dog - Curved corners 2

23. Creating agraph using percentage background images


List items <li> styled into bar graphs.

Creating a Graph using Percentage Background

24. CSS Bar Graphs:Examples


3 bar graph examples – “Basic CSS Bar Graph”, “Complex CSS Bar Graph”, and “Vertical CSS Bar Graph” using div’s and definition list tags.

CSS Bar Graphs: Example

25. Animated Rollover Arrow

The arrow follows along the entire width of the navigation bar smoothly, without the use of JavaScript or animated gif’s.

Animated Rollover Arrow

26. A CSS-based Form Template

Showcases an accessible web form.

Nidahas - Forms markup and CSS - Revisite

27. CSS Image Text Wrap


Using empty spacer div’s, the page’s text mimics a wrapping effect around the background image.

CSS Image Text Wrap

28. Before your very eyes – afade-in image

文字与背景图片混合渐隐渐显效果A demo using opacity and a single image that gradually fades in to cover the text.

29.Pure CSS Pop-ups

CSS Play - Before your very eyes - a fade-in image

兼容苹果系统的弹出窗口效果A pop-up technique that works even in IE 5 Mac.

30. CSS Gradient TextEffect


Uses background image overlays, and empty span tag, and position: absolute to create a gradient effect on text.


此条目发表在 CSS Hack, 资源 分类目录,贴了 , 标签。将固定链接加入收藏夹。


电子邮件地址不会被公开。 必填项已用 * 标注


您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>