天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网 > 软件 > 网页>软件应用>Adobe精彩HTML5和CSS3特性展示网站

Adobe精彩HTML5和CSS3特性展示网站

天极网软件频道2011-08-16 10:11我要吐槽

  更多精彩相关文章推荐:

  HTML5和JavaScript将是Office平台新重点

  Adobe Edge预览版发布 支持HTML5

  Adobe首席技术官谈论Flash与HTML5   

点击查看更多互联网资讯>>

  Adobe有一个展示HTML5和CSS3特性的网站项目:The Expressive Web(beta.theexpressiveweb.com),该网站以形象生动的例子演示了现代Web中极富创造性和表现力的功能,还提供了众多具有视觉冲击力的HTML5和CSS3学习资源。

  Adobe推出该网站的目的是让Web设计人员和开发人员能够快速了解HTML5和CSS3新特性,并提供丰富的资源和链接让Web设计人员和开发人员更深入的认识这些特性,了解它们的用处以及学会如何使用。

Adobe的HTML5和CSS3特性展示网站
The Expressive Web网站展示HTML5和CSS3特性

  该网站界面左边桔色导航突出展示了以​​下HTML5和CSS3特性,大家可以分别点击查看。

桔色导航

  CSS3 animation   动画
  CSS3 gradients   渐变
  CSS3 media queries 改变页面布局以精确适应不同设备
  CSS3 shadows    阴影
  CSS3 transforms  变形(拉伸,压缩,旋转,偏移等)
  CSS3 transitions  过渡
  CSS3 web fonts   字体
  HTML5 audio    音频
  HTML5 canvas   代码绘图
  HTML5 forms    表单
  HTML5 video    视频
  Web storage    客户端存储

  每个特性的展示页面下半部分包含如下内容:

  功能特性演示
  浏览器支持情况
  外部应用实例
  更深入的资源和教程
  特性检测和兼容方案

 

  示例:CSS3 animation中有趣的方快小人跨栏动画

CSS3 animation中有趣的方快小人跨栏动画
CSS3 animation中有趣的方快小人跨栏动画(右上角可以调节栏架高度)

  网页下半部分给出该特性的浏览器支持情况、应用实例、深入资源和教程、特性检测和兼容方案等。


支持CSS3 animation的浏览器列表、应用实例


深入资源和教程、特性检测和兼容方案

  示例:CSS3 shadows

Adobe的HTML5和CSS3特性展示网站
CSS3 shadows示例(用鼠标点击不同位置的光源可以看到阴影的变化)

  对HTML5和CSS3特性感兴趣的朋友不妨去这个网站观摩学习一下吧!记得参阅《主流浏览器CSS3和HTML5兼容性详细清单》。

 

作者:SSS责任编辑:杨玲)
请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
热点推荐
微软Windows 10操作系统Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。[详细]
Windows 10 新视界 [进入频道][使用技巧][微博互动]
手机整机DIY企业级