首页 | 站长免费中心 | 新手上路 | 网站运营 | 网页制作 | 图片设计 | 动画设计 | 网页编程 | 网页特效 | 本站专题 | 虚拟主机 | 域名注册 | 网站建设 | 程序下载
       免费空间资源 | 新闻咨询 | 免费域名 | 免费网盘 | 网站推广 | 网站策划 | 建站经验 | 网站优化 | 网页代码 | 源码下载 | 音乐小偷 | 网络赚钱 | 论坛交流
网站建设
网站建设
虚拟主机
虚拟主机
域名注册
域名注册
711网络首页
站长工具
站长工具
网站源码
网站源码
站长论坛
站长论坛

 711网络 网页制作CSS教程

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

来源: 互联网    日期:2006-6-10
 

来源: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

css实现的比较无聊的链接效果(应该有很多比这更好的效果)
CSS Flashy Links screen shot.

Map Pop地图弹出提示效果

Map Pop screen shot.

Pure CSS Popups

纯css的提示窗口效果
Pure CSS Popups screen shot.

CSS Sticky Footer

能吸附浏览器的底部效果,不管浏览器窗口多高,都始终处在最底部
CSS Sticky Footer screen shot.

Here’s a footer that is fixed at the bottom of the web page, regardless of height.

Scalable Star

可变大变小的星星     改变浏览器预览文字大小,星星也跟着变化
Scalable Star screen shot.

CSS: Menu Descriptions

css实现的菜单提示说明文字效果
CSS: Menu Descriptions screen shot.

CSS Gradients Demo

css颜色渐变效果
CSS Gradients Demo screen shot.

Demo: CSS Gradients Demo

Scaled Background Image

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

Demo: Scaled Background Image

CSS Vertical Bar Graphs

css柱状图效果
CSS Vertical Bar Graphs screen shot.

CSS Gradient Text Effect

css实现文字渐变纹理效果

CSS Gradient Text Effect screen shot.



更多的21个好玩、有趣味、实验性的css技术运用实例请到论坛查看: http://BBS.TC711.COM



【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】 来源: 互联网    日期:2006-6-10   

发 表 评 论
查看评论

  您的大名:
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
认证编码: 刷新验证码
点评内容: 字数0
  精品推荐  
  本月推荐  
  友情赞助  

关于我们 | 联系我们 | 广告投放 | 留言反馈 | 免费程序 | 虚拟主机 | 网站建设 |  网站推广 |  google_sitemap baidu_sitemap RSS订阅
本站所有资源均来自互联网,如有侵犯您的版权或其他问题,请通知管理员,我们会在最短的时间回复您
Copyright © 2005-2015 Tc711.Com All Rights Reserved 版权所有·711网络   蜀ICP备05021915号
110网监备案 信息产业备案 不良信息举报