通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质
常常听到人们对于HTML5的讨论,看了页面头部这个那个就是HTML5,误认为HTML5只是新增些标签“而已”,学完了W3School似乎就理解了。实际上很多从业人员并不理解业界为什么要推出HTML5系列技术标准,为什么HTML5代表了下一代网页技术。这里我们通过实际的例子来说明HTML5不是想象中的那么单薄,而是一本厚厚的需要长期学习的长篇巨著,HTML5甚至使得技术含量的天平在从后端向前端工程师倾斜。(这里且忽略websocket/webworker这类偏幕后的内容)。
HTML5
HTML5不只是简化了协议声明(标签语法),添加了若干标签和API,其核心目标是把网页变成富媒体,最重要的就是给了你随心所欲的画布(canvas),Web再也不是枯燥的文本内容和使用JS制作的简单DOM变化效果,前端工程师利用数学知识可以成为网页魔法师(艺术家)。
CSS3
CSS3的核心改变在于引入了动画和特效,再也不是静态的样式,你可以利用filter、animation、gradient、shadow、blend制作出PS都做不出来的电子艺术!你可以撇开PS来制作动态的特效!CSS3还有一个重要特性是媒体查询,用来支持响应式设计。
SVG
SVG的核心是几何图形,为网页引入了矢量图,通过矢量图的操作,可以实现很棒的变形动画特效。
SVG已经15岁了,只不过在HTML5里面用起来更方便,和CSS3的交互也更方便。
注意SVG的动画部分行将废弃,将使用统一的Web Animation API来代替。
WebGL
WebGL的核心很简单,就是把网页从2D变成3D展示和交互。(CSS3也有3D效果,但是WebGL是硬件加速的!)
ReactJS/AngularJS等框架
大公司的前端工程化工具,通过组件化规范化的方式试图“简化”Web编程,但需要提醒的是大公司工具往往是小团队的坑。
在用户需求更为灵活和个性化的中小项目市场,关注HTML5和创意设计本身可能要更为重要。
最新评论
- 相关文章
2019年NodeJS框架Koa和Express选型比较
Koa和Express都是NodeJS的主流应用开发框架。
Express是一个完整的nodejs应用框架。Koa是由Express团队开发的,但是它有不同的关注点。Koa致力于核心中间件...HTML5动画背后的数学 - 粒子群仿生算法简介
本站收录了多个算法可视化动画,如模拟鸟群运动:http://wow.techbrood.com/fiddle/30529等等。这里面除...
HTTP/2背景和新特性简介
Three.js入门教程6 - 创建全景图和纹理
全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...
Three.js入门教程5 - 10个必须知道的编程技巧
作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...
Three.js入门教程4 - 创建粒子系统动画
嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。
S3TC(S3 Texture Compression)纹理压缩格式详解
使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...
WebGL入门教程6 - 光照效果和Phong光照模型
正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...
如何实现SVG clipPath自适应被裁剪对象
CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁...WebGL入门教程4 - 使用纹理贴图(Texture Map)
3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...
如何使用CSS3实现一个平滑的3D文本标题
要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...
Processing.js和P5.js的功能简介和区别
什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
什么是Processing.js为了能让Proce...在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...