来源:http://sixrevisions.com/css/innovative-and-experimental-css-examples-and-techniques/ 原文翻译: css 并不总是意味着严谨、标准。这理,你将看到21个好玩、有趣味、实验性的css技术运用实例与演示其中讨论的一些技术与实例也许并没有被测试过,可能有些浏览器无法渲染,有些允许是被确认过的给予标准设计与开发的。这里大部分实例都是仅仅给予探索的目的。
Transparent CSS Menu Drop-down透明的css菜单 下拉效果
这个效果展示了如何设计一个高级的支持透明效果的css下拉菜单(需要javascript 来支持ie6png图透明问题)

Return of the image maps图片热区返回提示窗口 你将看到一个很棒的方法,用css来定义的图片热区提示窗口效果

CSS 3D puzzlecss 三维拼图
这个三维拼图是纯css编写的(肯定花了不少时间 ),打开页面,鼠标移动,鼠标一定要在连贯的道路上移动,移到道路尽头,小人才会跟着走,鼠标在水里就会灰屏了,要移开鼠标重新开始

CSS scrolling image mapcss滚动图片热区
这个效果用了一张全景照片,点击白色框区域,右边就出现相应的大图。

CSS Decorative Gallerycss装饰画廊 让图片列表展示的更有个性

Demo: CSS Decorative Gallery 源码下地址: http://www.webdesignerwall.com/file/decorative-gallery-demo.zip
Playing Cards with CSScss****牌
这个效果用特殊的html语言来表现****牌,用css来定义位置

Demo: Playing Cards
Homer CSS荷马css
这个效果,Román Cortés 用html符号和css画出了美国知名卡通形象辛普森的头像

CSS House房子
设计师用div加标准css创造出了一栋房子

Demo: CSS House
“Secret Message” with CSS Positioning and Transparency
秘密信息 css定位与透明(firefox 可以预览效果,ie无效)

Demo: Secret Message
How to create light-weight drop shadows
如何做出浅色阴影效果 用png图片来实现阴影,ie6需js支持

Demo: light-weight drop shadows
Multi-position shadow boxing
多方位阴影效果 这是另外一种给元素(如图片)加阴影的效果

Complexspiralcss半透明效果

DVD Recorder Remote
css做的dvd遥控器面板

Drawing the line
描线 Stu Nicholls 用css实现出一支笔的效果,鼠标移到笔上,还会画出线条

CSS Text Shadows文字阴影效果
一个纯CSS的办法适用于下拉阴影的文字。文字重复叠加,这不是好的方法。

CSS Flashy Links
|