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 文件格式，代码健壮性不够
  • 无法进行像素级编辑
  • 同样存在不同平台和浏览器的细节绘制差异

实例演示

延伸阅读

总结

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

横向实例对比：头像编辑

引用说明

迎接挑战吧!

Thanks & Q-n-A