陈小峰（iefreer）的专栏

使用纯CSS3实现的明信片，未使用图片，比较简洁实用。思路是通过DIV和DIV:after元素叠加而成，DIV:after用来构造一个斜向渐变（linear-gradient方法）彩色条纹，然后放置在DIV的背后，调整好相对位置。

CSS3引入了新的网格布局（grid layout），以适应显示和设计技术的发展（尤其是移动设备优先的响应式设计）。主要目标是建立一个稳定可预料且语义正确的网页布局模式，用来替代过往表现不稳定的混合table、flow以及JS脚本技术来实现的网页动态布局。本文摘自踏得网HTML5在线课程，拟结合实例简单而准确的介绍网格布局属性的基本概念和使用方法。

网格模板（grid-template）属性及其普通写法（longhands）定义了一个固定数量的轨道，构成显式网格。 当网格项目定位在这些界限之外，网格容器通过增加隐式网格线生成隐式网格轨道。 这些隐含的和显式的网格线一起构成隐式网格（implicit grid）。 隐式网格轨道的尺寸由网格自动行（grid-auto-rows）和网格自动列（grid-auto-columns）属性来确定。

CSS伪类(pseudo-classes)和伪元素(pseudo-elements)是用来支持根据DOM树之外的信息来格式化文档的能力。使用语法常被混用，但两者有着明显的不同。

CSS selector level 3规范中定义了一些和文档层级结构有关的连接选择器（或称组合选择器），分为后代选择器（Descendant combinator/Child combinators）和同级选择器（Sibling combinators）

要给按钮添加酷炫的绕边动画，可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素，内置在按钮元素中。然后在Canvas上实现边线环绕的动画。requestAnimationFrame接口我们使用requestAnimationFrame接口来实现动画帧的绘制，该接口告诉浏览器在重画（repaint）之前先执行一个动画回调函数。通过这样的回调机制，浏览器可以把多个动画函数

我们有时候想在踏得网页面上显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果，以使其更为逼真。所谓的“卷角”实际上可以用小角度倾斜的阴影效果来模拟。用CSS3的伪元素实现这个效果很容易。

纺锤形分割线用于仿真纸中间被剪开时的阴影效果，也就是中间咧开而两边收拢的情况。简单讲就是两头小，中间大。使用CSS3来实现这种效果，可以使用border-radius和box-shadow两个属性。

要实现3D文本，基本上有3种方法：1. 使用CSS3的投影滤镜（filter: drop-shadow）2. 使用3d建模和CSS3 3d变换来实现（最真实）3. 使用CSS3 text-shadow属性来实现（最简单，可复制，现代浏览器都支持）本例简单说明使用text-shadow属性来实现3D文本的原理和方法。

CSS sizing level3规范中，和布局尺寸相关内容，经常会出现min-content size和max-content size等术语。这需要分为两类：一类是和块元素相关，一类是和行内元素相关。1. min-content inline size最小内容行内尺寸表示在尽可能使用软性（即非硬性指定）包含技术（比如自动换行）后，刚好包含了元素内容而不出现溢出的尺寸。2. max-conten

在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面，如下所示：那么在表单总长度受限的情况下，当中间的邮箱名称过长时，会遮盖到旁边的按钮。我们可以把中间邮箱设定最大宽度，然后对于长度超出部分设置overflow: hidden来解决这个问题。但是这可能会引发另一个经典的 baseline 对齐问题，也就是本文要讨论的主要问题。

我们在网站开发过程中常常遭遇UI交互效果设计和实现的双重困扰。设计师一方面努力寻找创意，一方面担忧技术层面可实现性，而Web工程师则缺少好的开发参考。为此我们希望为自己建立一个HTML5技术资源库并提供专业的搜索服务，这个技术资源库应该要涵盖基础知识、高级应用实例、在线教程、工具以及创新的UI设计。这是踏得网（techbrood.com）的开发初衷。然后在这个资源库之上，我...

我们结合实例来感受和学习Material Design设计规范。本例包含的原质化设计元素有如下几个：1. 文本输入框用户未输入时，文本输入框的位置显示为Label（而不是通常的空白输入框+左侧Label），用户点击Label后，Label文本渐变缩小到左上角，文本输入处的下划线高亮显示。输入为空时，出现带箭头的提示框（几秒后自动消失），这是通过require属性实现的。2.单选框、复选框点击选择框

Low Poly是计算机主流设计风格的一种。当前主流设计风格包括：1.拟物（Skeuomorph）2.平面化（Flat Design）3.长阴影（Long Shadow）4.响应式（Responsive）5.原质化（Material）6.平行视差（Parallax）。低多边形（Low Poly）不强调细腻的拟物模拟，而是使用抽象的几何方式来构造模型轮廓，同样达到栩栩如生的效果。下面是一个简单的字母

Greensock公司的TweenMax是很好的HTML5动画操作JS库。本例是演示如何使用TweenMax来模拟跑车的机械自动化制造/自动化装配过程。思路就是把一些汽车零部件图片按时序以渐入动效入场到Web页面指定位置，从而形成汽车整体自动组装的动画。$(document).ready(function() { var miniBoxesHolder = $('#ruler_1_wrap

原则上不同的页面，资源重新加载，音乐的播放会被重置。要实现音乐的连续播放，可以尝试使用如下的一些方法：1. 主页面使用frame,实际上是隐藏了music.html，只显示index.html，然后页面切换只是在index.html所在的那个frame发生，而主页面和music页面实际未重新加载。这样音乐可以连续播放，但缺点是没办法在index.html页面中控制音频播放。2. 使用Ajax动态加

页面评论功能，当评论较多时，有时需要滚动到评论头部。可以使用scrollTop方法，加上一点延时动画（animate），可访问在线演示，代码大体如下： $(document).ready(function (){ $("#scroll").click(function (){ $('html, body')

我们在网站设计开发过程中常常需要实现一些与众不同的效果。设计师努力寻找创意，Web工程师针对这些创意寻找到合适的参考代码。我们自己的体会是比较难找到这些前沿资源，因为缺少好的搜索、匹配服务。为此我们希望为自己建立一个高品质HTML5特效作品库，这个开放库涵盖了基础知识、高级应用实例、编码模式以及新颖的界面设计。

使用Bootstrap3的时候，好处是有很多现有的控件可以使用，坏处是个性化起来会遇到不少麻烦，单独的静态页面显示正常的， 引入Bootstrap后，有些类/通用界面组件的样式会被覆盖。想去除默认风格或定制input输入框的边框风格，可以使用如下代码：input:focus { outline: none; border-color: #cfdc00; box-shadow

getContext是用来获取画布上下文的，如果出现not a function错误，一般是由于获取Canvas元素的方法不正确引起的。在某些浏览器中，变量和类命名也会导致奇怪的问题，注意尽量不用使用screen/canvas来作为元素的类名或JS中的变量名，以免和特定浏览器的默认定义冲突。本例出现的错误代码实例在：http://wow.techbrood.com/fiddle/11770解决方法

对于电子商务类的3D打印网站，一个主要功能是把商品以3D的方式呈现出来，也就是3D数据可视化技术。HTML5（WebGL）可以用来构建3D视图、立体动画、人机交互。Three.js是一个主流的JS框架用来支持和简化WebGL编程。本例是一个简单的Three.js应用，即把一个外部可用于打印的3D标准建模文件（STL文件）载入到浏览器中绘制出来。

在天气预报类的Web移动应用中，常常需要实现屏幕的雨滴效果，表示阴雨天气。感觉上比较神奇，其实想通了，这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素，其次雨滴是一个个凸透镜，能折射出远处的景色。

使用3D缎带形状的标签是常见的一个设计模式，用在商品折扣、文章标题或网站推荐信息上，来突出显示重点内容，吸引用户视觉焦点。实现的方法有2种，一种是使用背景图片，一种是使用三角形的CSS3伪元素。本文介绍第2种方法，使用一个最简化的实例来讲解如何实现这个效果

在天气预报类移动网页应用中，我们常常需要使用到雷雨天气时的闪电动画。本文介绍如何使用Canvas来很简单的实现这个效果。对于Canvas不熟悉的，可阅读踏得网免费HTML5在线教程Canvas基础知识部分。

我们在读纸质书的时候，经常用笔划波浪线来突出重点内容，以强化视觉感受。而在Web页面上，没有CSS3之前，我们只能用背景图片来实现类似功能，这当然不是个高效的方式，且难于维护和调整。比如你只是想调整下颜色、线条大小和倾斜的角度，你都得打开作图软件来折腾一下。现在我们可以使用CSS3伪元素及其背景渐变（gradient）来实现这一有趣而实用的效果。

3D虚拟试衣系统的使用场景主要是在线电商或数字营销，为品牌服装、服饰、饰品添加高端3D虚拟购物动效，提升用户感官体验和交互体验。踏得网基于网页/HTML5独家研发了一套在线3D虚拟试衣间系统。纯网页版，跨平台支持，无需用户安装插件。

网格布局支持弹性尺寸（flex-size），这是一个很好的自适应布局技术。弹性尺寸使用fr尺寸单位，其来自 "fraction" 或 "fractional unit" 单词的前两个字母，表示整体空间的一部分。

常常听到人们对于HTML5的讨论，看了页面头部这个那个就是HTML5，误认为HTML5只是新增些标签“而已”，学完了速查手册似乎就理解了。实际上很多从业人员并没有深入理解业界为什么要推出HTML5系列技术标准，为什么HTML5代表了下一代网页乃至移动应用技术。

Three.js是当下最流行的网页3D渲染JS引擎，其主要是对WebGL编程以面向对象方式进行的封装。踏得网专注于HTML5技术生态链的资源开发，鉴于网络上Three.js方面的资料比较散乱，且良莠不齐，因此我们把Three.js的官方文档、示例和我们的平台上已有资源整合起来，提供在线中文文档以及方便的调试学习环境。

踏得网精选2016年度最酷最新的HTML5动画集，评选标准为：创意新颖度+实现技术难度+趣味程度。技术全面覆盖HTML5/CSS3/SVG/WebGL/ES6。

WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实（VR）体验，但从工程化的角度而言，开发社区还需要更多方便强大的开发库来简化编程，Mozilla的 A-Frame 框架就是这样一个工具，提供了一个Web开发者所熟悉的标记语言来快速构建3D VR场景动画原型，而不需要编写过多的JavaScript和GLSL语句。本文将介绍如何使用A-Frame构建一个简单的在线可运行实例。

HTML5（纯移动Web应用）和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能，搞出来一些混合APP的解决方案。比如Apache的Cordova（也就是以前的PhoneGap）、微软的Xamarin、Facebook的React Native、Google的NativeScript。

使用HTML5的FileReader接口和Canvas的toDataURL接口来实现客户端图片压缩以减轻系统负荷。

屏幕分辨率、设备像素（device-width）和CSS像素（width）这些术语，在很多语境下，是可互换的，但也因此容易在有差异的地方引起混淆，实际上它们是不同的概念。屏幕分辨率和设备像素是物理概念，而CSS像素是WEB编程的概念；屏幕分辨率和设备像素的差别在于设备像素显示密度。当设备屏幕ZOOM=100%的时候，浏览器CSS像素尺寸和设备像素相等，而当像素密度(pixel density)为1的时候，屏幕分辨率和设备像素相等。

原质化设计（Material Design），也叫材料化设计，是Google提出并应用于触摸屏（移动应用）上的一种交互设计风格。强调一种能给用户自然反应的高级纸质触感。其中一个实例就是在触摸按钮或菜单时，呈现一个以触摸点为中心位置的涟漪（水波）动画。要实现这样的动画，主要需要处理2个任务，一个是实现脉冲波效果，还有一个是检测触摸（点击）位置。

要实现一个逼真的泡沫，涉及到比较复杂的光学/物理学知识，我们这里先简化下问题，实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中，比如水景、泡咖啡、啤酒甚至火焰特效中。

在计算机图形学（数学）中，矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值（RGBA）表示成一个四维空间向量：color = (r, g, b, a);那么就可以应用矩阵相乘的方法来对其进行变换操作。SVG标准中的feColorMatrix，当类型取值为matrix时，就是利用这个方法来实现的图像过滤效果。

CSS3中的媒体查询（media query）是响应式设计的关键技术。媒体查询技术本质就是检测设备不同的尺寸来应用不同的样式，所以我们需要对尺寸检测有一个统一的参考标准。从最佳用户体验来看，材料化设计用户界面应该适应如下布局尺寸：480、600、840、960、1280、1440和1600dp（设备独立像素）：分界点(dp)手机/平板电脑竖屏手机/平板电脑横屏屏幕列数间隔宽度(dp)0small

很多营销页面中需要实现类似流星雨的动画背景，营造节日浪漫的气氛。要实现这样的效果，有两种方法，一个是使用Canvas，一个是使用纯CSS3，我们这里介绍第2种方法，在粒子数量少的时候，实现起来要更为简单，且便于调试。流星雨的构成流星雨=流星+雨。流星本身包含2个部分，一个是带光晕的星星，一个是尾部的运动轨迹。而雨实际上就是一个重力掉落的动画。

真实世界是不完美的，当我们需要模拟真实世界时，经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canvas生成随机大小的不完美圆形。首先我们要了解，在几何学上圆形可以通过增加等边对称多边形边数来无限逼近。那么所谓不完美圆形，实际可以通过一个不等边不对称的多边形来实现。原文来自踏得网技术博客。