陈小峰（iefreer）的专栏

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

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

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

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

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

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

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

弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使用的一些复杂而易错hacks方法（如使用float进行类似流式布局）。其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法如下：flex-flow: || flex-direction: row（初始值） | row-reverse | column | column-reversefle

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

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

这是2017年不能不了解和学习的一个CSS新特性，很简单实用，考虑到现实世界浏览器的复杂性，该特性本应该先于其他新特性出来。我们已经知道使用媒体查询（Media Query）来检测屏幕尺寸，从而实现响应式界面设计。而特性查询则用来查询用户代理（如桌面浏览器）是否支持某个CSS3的特性，这个功能除了IE之外，已被其他浏览器所支持。

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

要实现一个沙漏动画，我们首先需要实现一个漏斗的几何形状。漏斗图形我们接着把漏斗拆分成3个简单图形：一个三角形，一个倒置三角形和中间的管道（垂直线）。那么问题就简化为实现三角形和直线。要实现三角形很简单，有模式可套用。即使用零宽高的元素，设置1条边带颜色，相交的2条边为透明。这主要利用了颜色渲染区域在边界交接处按对角线平分的规则。

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

要实现标题全屏居中（同时在垂直和水平方向居中），有若干种方法，包括使用弹性布局、表格单元、绝对定位和自动外边距等。全屏居中其中目前比较流行也比较容易理解的方法是使用绝对定位+偏移实现。也就是分两步来把元素居中：1. 第一步先把元素放在离视口左上角（坐标原点）50%视口宽和50%视口高的地方；2. 第二步把元素反向偏移其自身宽高的50%。

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）

弹性项目可以按弹性容器当前行的cross axis来对齐，和justify-content类似，但在垂直方向上。其中align-items属性用于弹性容器，而align-self用于弹性项目。 align-items 为弹性容器中所有项目设置缺省对齐属性，包括匿名弹性项目。align-self 可以为单独的弹性项目设置对齐来覆盖缺省值。

内容调整（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配，也会在发生内容溢出时影响项目的对齐。

有3个属性和布局以及box的创建有关：'display', 'position' 和 'float'，彼此交互作用如下。

我们可以使用SVG、Canvas、CSS3或者背景图片来实现五角星图案及其悬停效果。使用CSS3是最为简单和高效的方法，并且代码容易调试和维护。CSS3引入的伪元素和变换特性使得实现五角星图形非常简单。

日食现象是月亮挡在了地球和太阳之间，也就是月亮遮挡住了太阳。所以要构造日食，我们需要2个对象：一个代表月亮，一个代表太阳。我们把整个日食过程分解为3个阶段：1. 缓慢移入 2. 短暂停留 3. 缓慢移出。在此期间，会产生3个彼此关联的动画。首先是月亮的位置移动，我们通过改变月亮的X坐标（left或right属性值）来实现（注意把太阳和月亮均设置成绝对定位）。其次太阳会逐步呈现出圆晕的光线效果，我

有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制，而其中图书的展示是最为简单的一种，无需复杂的建模过程，使用图片和CSS3的一些变换即可实现更好的展示效果，简洁而实用。书本的3D模型是所有商品中最为简单的，因为其本质上就是一个立方体（cube），只是带有封面/封底和左侧封条。所以要构造一个3D书本展示，问题就被分解为构造一个立方体+旋转+图片背景。

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

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

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