在这篇文章中，我拼凑了一些内容30个优秀的CSS技术和设计的例子展示了CSS的功能和健壮性。您将看到各种技术，如图像画廊、投影、可伸缩按钮、菜单等等只使用CSS和HTML．单击标题将引导您进入文档/教程，而单击附带的图像将引导您进入演示页面(如果它与文档是分开的)。
1.Hoverbox图片库
纯粹的基于css的图库;将鼠标悬停在图像上可以放大图像。
2.先进的CSS菜单
一个创造性和复杂的导航方案。
3.滑动照片画廊
手风琴效果;将鼠标悬停在一个图像上可以展开它。
4.Lightbox幻灯片
文章的一部分标题为“Supercharge your image border”展示如何使用CSS样式设计图像看起来更有趣。
5.投影在图像上
一个图像效果演示和讨论基于一个列表分开的文章标题，“CSS阴影”。
6.跨浏览器多页图片库
将鼠标悬停在标签上可以改变类别，而将鼠标悬停在图像上则可以放大它。
7.CSS的照片放大
使用单幅图像和调整的背景位置属性。
8.CSS图库布局闻起来像一张桌子
模仿表布局，但使用列表。画廊也是流体宽度。
9.粘性的页脚
静态页脚，只需要很少的XHTML。
10.无论:徘徊
一个导航菜单，模仿窗口的开始菜单。
11.CSS-Only手风琴效应
一个使用div的和的手风琴效果:徘徊；手风琴效果可以是垂直的，也可以是水平的。
12.可扩展的CSS按钮使用PNG和背景色
这是一种解决垂直缩放、使用多幅图像和缺乏悬停效果的技术。
13.按钮链接
不使用图像的链接样式看起来像按钮。
14.具有固定标题的可滚动表
桌子的标题保持不变，这对于长桌子来说非常好。
15.用CSS覆盖内容
将鼠标悬停在图像上时，将显示容器div和更多文本。
16.一个CSS样式表版本2
一个漂亮的风格，表语义标记-使用背景图像。
17.PNG覆盖
另一种添加光晕到图像(圆角，添加边框和阴影)的方法是偶数更有效的图像．
18.用CSS显示超链接提示
添加图标到不同类型的链接的简单教程。
19.简单的圆角CSS框
只使用一个图像和非常少的代码行和标记。
20.网站地图的庆祝活动
使用嵌套列表的树状导航，非常适合站点地图页面。
21.简单的跨浏览器的透明度
不使用JavaScript的不透明技术(但以使用无效XHTML代码为代价)。
22.弯曲的角落2
流体的宽度和高度随圆角而下降。
23.创建使用百分比背景图像的图表
列表项<李>样式成柱状图。
24.CSS柱状图:示例
3个使用div和定义列表标记的柱状图示例——“基本CSS柱状图”、“复杂CSS柱状图”和“垂直CSS柱状图”。
25.动画滚动箭头
箭头沿着导航栏的整个宽度平滑，不使用JavaScript或gif动画。
26.一个基于css的表单模板
展示一个可访问的web表单。
27.CSS图像文本换行
使用空白分隔符div，页面的文本模仿背景图像的环绕效果。
28.就在你眼前，一个渐隐的影像
一个使用不透明度和单幅逐渐淡入以覆盖文本的图像的演示。
29.纯CSS弹出窗口
一个弹出的技术，即使在IE 5 Mac。
30.CSS渐变文本效果
使用背景图像叠加和空span标签，以及位置:绝对的在文本上创建渐变效果。
