来源: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
css实现的比较无聊的链接效果(应该有很多比这更好的效果)
Map Pop地图弹出提示效果
Pure CSS Popups
纯css的提示窗口效果
CSS Sticky Footer
能吸附浏览器的底部效果,不管浏览器窗口多高,都始终处在最底部
Here’s a footer that is fixed at the bottom of the web page, regardless of height.
Scalable Star
可变大变小的星星 改变浏览器预览文字大小,星星也跟着变化
CSS: Menu Descriptions
css实现的菜单提示说明文字效果
CSS Gradients Demo
css颜色渐变效果
Demo: CSS Gradients Demo
Scaled Background Image
css实现的页面背景图片跟随浏览器窗口大小变化的效果
Demo: Scaled Background Image
CSS Vertical Bar Graphs
css柱状图效果
CSS Gradient Text Effect
css实现文字渐变纹理效果