HTML5的视觉方案及其技术简介(下)

本文摘自 勾三股四 更早时期的 不老歌 博客。

接上一篇HTML5的视觉方案及其技术简介(上)

CSS 3

前端开发的最爱!

技术介绍和代码实现

  • 圆角 (link)
  • 颜色渐变 (link)
  • 多重背景 (link)
  • 阴影 (link)
  • 几何变换 (link)
  • 渐进变换 (link)
  • 动画 (link)
  • 选择器扩展 {}
  • :伪元素

CSS 3 的特点

优点
  • 符合传统Web前端工程师的习惯
  • 尊重主流的网页设计风格和技术需求
  • 有强大的交互机制
  • 和网页元素完美结合,不影响语义
  • 适合较为系统或简约的界面需求
缺陷和其它不确定因素
  • 归根结底都是矩形变换
  • 没有处理复杂光影效果的能力
  • 部分效果需要取巧的方式来实现
  • 运行效能尚不成熟
  • 兼容问题阴魂不散

实例演示

延伸阅读

SVG

期待重生!

技术介绍和代码实现

  • 实例1:一个简单的例子 (link)
  • 实例2:各种简单的框线和图形 (link)
  • 实例3:贝塞尔曲线 (link)
  • 实例4:二次曲线 (link)
  • 实例5:二次曲线之二 (link)
  • 实例6:填充和描边 (link)
  • 实例7:框线边缘处理 (link)
  • 实例8:绘制虚线 (link)
  • 实例9:CSS样式表 (link)
  • 实例10:模式集成 (link)
  • 实例11:元素集成 (link)
其它细节
  • 元素的层次控制
  • 遮罩和过滤
  • 几何变换
  • 文字渲染

SVG的特点

优点
  • 基于矢量图和矢量变换
  • 适用于相对静态的视觉内容
  • 各种集成管理方式
  • 全平台解决方案 (vml for IE)
  • 处理不规则形状的元素
  • 兼顾灵活度和前端开发的习惯
缺陷和其它不确定因素
  • 标记和属性都非常琐碎,不易于学习和记忆
  • 必须严格遵循 xml 文件格式,代码健壮性不够
  • 无法进行像素级编辑
  • 同样存在不同平台和浏览器的细节绘制差异

实例演示

延伸阅读

总结

  Canvas CSS 3 SVG
优势 灵活、跨平台、像素级处理 事件交互性强、小巧方便、学习成本最低 兼顾灵活性和前端开发习惯、学习难度低
劣势 事件判定、平台的视觉体系无法利用、全部都是编程 效果有限 比较陌生,平台差异、代码健壮性
适用产品 大型或复杂的界面 文档类、功能型界面 规模不大,但对设计要求较高的界面
适用人群 游戏开发者 前端设计师、前端开发者 矢量图设计师、艺术家

横向实例对比:头像编辑

引用说明

迎接挑战吧!

Thanks & Q-n-A

向本文提出修改或勘误建议