25款极具创新意义的CSS特效

CSS不仅仅只能处理一些中规中距的日常设计工作。本文将像你介绍25个非常有意思的，极具创新的，试验性的CSS技术。

需要说明的是，这些技术和实例不一定适合所有的浏览器，而且不一定符合设计和开发标准。其中一些技术还尚处探讨阶段。

透明CSS下拉菜单

该示例演示了如何设计一款先进的CSS透明下来菜单。该技术需要使用JavaScript技术实现IE6下PNG图片的透明效果。

返回图片地图

你将在该示例中看到一款用非常流行的方式设计的基于CSS的带有信息弹出框的图像地图。

CSS 3D迷宫

这是一款纯CSS设计的3D迷宫。如果你也想设计出这样的效果，那么你要做好充分的心里准备，因为你会为此付出很长的时间和耐心。

CSS滚动图像地图

该示例是用CSS设计一幅使用了热点技术的全景图片。点击图片的上的热点会在旁边的区域显示它的描述信息以及一幅可缩放的图片。

CSS装饰图库

Demo: CSS Decorative Gallery

Web Designer Wall 向我们展示了一款使用背景图像技术设计的图库效果。

CSS纸牌

Demo: Playing Cards

该示例使用特殊的HTML属性显示纸牌效果，并使用CSS对其进行样式和定位设置。

CSS版辛普森一家

在该示例中，Román Cortés使用HTML和CSS重新设计了辛普森一家。 你可以点此查看动画效果。

CSS房屋造型

Demo: CSS House

Design Detector通过使用DIV和CSS设计了一款房屋造型。

使用CSS定位和透明效果设计“Secret Message”

Demo: Secret Message

该示例是由CSS-tricks 的Chris Coyier设计的使用滚动效果显示"Secret Message" 。

如何设计细边阴影效果

Demo: light-weight drop shadows

该示例使用PNG图片透明效果来制作DIV边框的阴影效果。在IE6浏览器下需要使用JavaScript技术支持。

多种位置的阴影造型

这是使用另一方式设计的页面元素阴影效果。

多种透明效果

在该示例中，CSS大师Eric Meyer展示了一些使用CSS设计的透明效果

DVD遥控器

Design Detector 使用HTML和CSS技术设计了一款遥控器效果。

划线效果

CSSplay 的Stu Nicholls使用CSS设计了一款铅笔画线的效果。将鼠标放在图片上面，铅笔将画出一条水平线。

CSS文字阴影

使用纯CSS技术设计文字阴影效果。该技术涉及了文字层叠技术。不过目前css3已经提供了文字阴影的属性。

基于CSS的flash链接效果

在该示例中，将鼠标停放在导航栏的一个标题上，箭头将从做至右滑动。

地图信息提示

该示例演示了CSS在一幅地图上的图像地图效果。

纯CSS信息提示效果

该技术实现了鼠标悬停时显示隐藏DIV块的效果。

CSS页脚固定效果

这是一个固定在页面底部的页脚效果，他可以忽略页面的高度。

等比变化的五星

使用CSS画出一个简单的五星形状。当用户调整浏览器字体大小的时候，五星图形将随之进行等比例变化。I

菜单描述

在这个使用css设计的菜单中，鼠标悬停时可以显示更多的菜单信息。

CSS渐变效果

Demo: CSS Gradients Demo

该示例演示了使用CSS样式和空DIV元素以及背景颜色模仿渐变效果。

等比例变化背景图片

Demo: Scaled Background Image

该示例演示了如何设计一个可按比例变化的背景图片。(改变你的浏览器大小试试看)。

CSS垂直柱壮图

该示例演示了使用CSS生成一个垂直的柱壮图。

CSS渐变文字效果

Demo: CSS Gradient Text Effect

该技术通过使用PNG图片为文字添加渐变效果。在IE6浏览器下需要使用JavaScript来支持透明效果。