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


来源: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装饰画廊   让图片列表展示的更有个性

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

Playing Cards with CSScss扑克牌

这个效果用特殊的html语言来表现扑克牌,用css来定义位置Playing Cards

Homer CSS荷马css

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

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

“Secret Message” with CSS Positioning and Transparency

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

How to create light-weight drop shadows

如何做出浅色阴影效果 用png图片来实现阴影,ie6需js支持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

能吸附浏览器的底部效果,不管浏览器窗口多高,都始终处在最底部Scalable Star

可变大变小的星星     改变浏览器预览文字大小,星星也跟着变化CSS: Menu Descriptions

css实现的菜单提示说明文字效果CSS Gradients Demo

css颜色渐变效果CSS Gradients Demo

Scaled Background Image

css实现的页面背景图片跟随浏览器窗口大小变化的效果Scaled Background Image

CSS Vertical Bar Graphs

css柱状图效果CSS Gradient Text Effect

css实现文字渐变纹理效果


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3