HTML5的视觉方案及其技术简介(下)
本文摘自 勾三股四 更早时期的 不老歌 博客。
CSS 3
前端开发的最爱!
技术介绍和代码实现
CSS 3 的特点
优点
- 符合传统Web前端工程师的习惯
- 尊重主流的网页设计风格和技术需求
- 有强大的交互机制
- 和网页元素完美结合,不影响语义
- 适合较为系统或简约的界面需求
缺陷和其它不确定因素
- 归根结底都是矩形变换
- 没有处理复杂光影效果的能力
- 部分效果需要取巧的方式来实现
- 运行效能尚不成熟
- 兼容问题阴魂不散
实例演示
- 傲游浏览器在这方面的实践
- CSS 3 Heart
- CSS 3 Logos (傲游/新浪/腾讯/百度/机器猫)
- “2.5D”视觉效果
延伸阅读
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 | |
---|---|---|---|
优势 | 灵活、跨平台、像素级处理 | 事件交互性强、小巧方便、学习成本最低 | 兼顾灵活性和前端开发习惯、学习难度低 |
劣势 | 事件判定、平台的视觉体系无法利用、全部都是编程 | 效果有限 | 比较陌生,平台差异、代码健壮性 |
适用产品 | 大型或复杂的界面 | 文档类、功能型界面 | 规模不大,但对设计要求较高的界面 |
适用人群 | 游戏开发者 | 前端设计师、前端开发者 | 矢量图设计师、艺术家 |
横向实例对比:头像编辑
- Canvas方案:傲游3设置头像
- CSS方案:傲游账户中心设置头像
- SVG方案:用Raphael实现的demo
引用说明
- 部分代码片段引用自:
- MDC: http://developer.mozilla.org/
- HTML5 Presentation: http://slides.html5rocks.com/
迎接挑战吧!
Thanks & Q-n-A