快速业务通道

21个好玩、有趣味、实验性的css技术运用实例

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-04

来源:http://sixrevisions.com/css/innovative-and-experimental-css-examples-and-techniques/
原文翻译:
css 并不总是意味着严谨、标准。这理,你将看到21个好玩、有趣味、实验性的css技术运用实例与演示其中讨论的一些技术与实例也许并没有被测试过,可能有些浏览器无法渲染,有些允许是被确认过的给予标准设计与开发的。这里大部分实例都是仅仅给予探索的目的。

Transparent CSS Menu Drop-down透明的css菜单 下拉效果

这个效果展示了如何设计一个高级的支持透明效果的css下拉菜单(需要javascript 来支持ie6png图透明问题)
Transparent CSS Menu Drop-down screen shot.

 

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

Return of the image maps screen shot.

CSS 3D puzzlecss 三维拼图

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

CSS scrolling image mapcss滚动图片热区

这个效果用了一张全景照片,点击白色框区域,右边就出现相应的大图。
CSS scrolling image map - screen shot.

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

CSS Decorative Gallery screen shot.

Demo: CSS Decorative Gallery
源码下地址:
http://www.webdesignerwall.com/file/decorative-gallery-demo.zip

Playing Cards with CSScss扑克牌

这个效果用特殊的html语言来表现扑克牌,用css来定义位置
Playing Cards with CSS - demo - screen shot.

Demo: Playing Cards

Homer CSS荷马css

这个效果,Román Cortés 用html符号和css画出了美国知名卡通形象辛普森的头像
Homer CSS - screen shot.

CSS House房子

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

Demo: CSS House

“Secret Message” with CSS Positioning and Transparency

秘密信息  css定位与透明(firefox 可以预览效果,ie无效)
Secret Message screen shot.

Demo: Secret Message

How to create light-weight drop shadows

如何做出浅色阴影效果 用png图片来实现阴影,ie6需js支持
light-weight drop shadows screen shot.

Demo: light-weight drop shadows

Multi-position shadow boxing

多方位阴影效果   这是另外一种给元素(如图片)加阴影的效果
Multi-position shadow boxing screen shot.

Complexspiralcss半透明效果

Complexspiral screen shot.

DVD Recorder Remote

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

Drawing the line

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

CSS Text Shadows文字阴影效果

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

CSS Flashy Links

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号