CSS3艺术

作品简介

本书以CSS3版本为平台，使用大量生动、美观的实例，系统地剖析了CSS与视觉效果相关的重要语法。全书分为13章，第1章回顾基础知识，第2章～第10章介绍了CSS3的伪元素，边框，背景，阴影，剪切、滤镜和色彩混合，变量与计数器，变换、缓动、动画等在视觉展现方面的内容，第11章～第13章探讨了CSS3在造型创意、动画创意和文字特效创意方面的设计思路。

张偶

拥有Web开发近20年工作经验，现为互联网公司web开发主管。曾入选SegmentFault社区年度榜排名前3位，亦是CodePe社区较受欢迎的国内开发者之一。近年来实践PBL（project-based learning）学习方法，潜心研究CSS艺术设计，积累了大量心得体会。

作品目录

• 内容提要
• 本书实战项目一览表
• 前言
• 第1章 CSS基础知识
• 1.1 CSS简介
• 1.2 在页面中应用CSS
• 1.2.1 内联样式
• 1.2.2 style元素
• 1.2.3 link标记
• 1.3 常用CSS属性一览
• 1.4 选择器
• 1.4.1 标签选择器
• 1.4.2 类选择器
• 1.4.3 后代选择器
• 1.4.4 伪类选择器
• 1.5 单位
• 1.5.1 长度
• 1.5.2 颜色
• 1.6 盒模型
• 1.6.1 内边距、边框和外边距
• 1.6.2 box-sizing
• 1.7 定位
• 1.7.1 相对定位
• 1.7.2 绝对定位
• 1.8 布局
• 1.8.1 flex布局
• 1.8.2 grid布局
• 1.9 重叠
• 1.9.1 元素之间的重叠关系
• 1.9.2 含有子元素的容器之间的重叠关系
• 1.9.3 主元素与子元素（伪元素）之间的重叠关系
• 1.10 继承和引用
• 1.10.1 继承
• 1.10.2 引用颜色
• 1.10.3 引用尺寸
• 第2章 伪元素
• 2.1 ::before和::after伪元素
• 2.2 content属性
• 2.3 灵活使用伪元素
• 2.3.1 用伪元素拼接造型
• 2.3.2 用主元素和伪元素拼接造型
• 2.3.3 用伪元素表现造型的一部分
• 2.3.4 用主元素和伪元素表现造型的3个部分
• 2.3.5 用伪元素表现成对的元素
• 2.4 项目应用
• 2.4.1 项目一：蒸锅
• 2.4.2 项目二：怪兽
• 第3章 边框
• 3.1 边框属性
• 3.1.1 边框样式border-style
• 3.1.2 边框宽度border-width
• 3.1.3 边框颜色border-color
• 3.1.4 分别设置每条边框
• 3.1.5 边框圆角border-radius
• 3.1.6 轮廓线outline
• 3.2 描边造型
• 3.2.1 同心正方形
• 3.2.2 同心圆
• 3.2.3 圆弧
• 3.3 几何造型
• 3.3.1 圆形
• 3.3.2 半圆形
• 3.3.3 扇形
• 3.3.4 三角形
• 3.3.5 组合的花形
• 3.4 项目应用
• 3.4.1 项目一：铅笔
• 3.4.2 项目二：宇宙飞船
• 第4章 背景
• 4.1 背景属性
• 4.1.1 背景颜色background-color
• 4.1.2 背景图片background-image
• 4.1.3 背景位置background-position
• 4.1.4 背景尺寸background-size
• 4.1.5 背景平铺background-repeat
• 4.2 线性渐变linear-gradient()
• 4.2.1 多个参数值
• 4.2.2 锐利的线性渐变
• 4.2.3 线性渐变的角度
• 4.2.4 有透明度的线性渐变
• 4.3 径向渐变radial-gradient()
• 4.3.1 多个参数值
• 4.3.2 锐利的径向渐变
• 4.3.3 椭圆和正圆
• 4.3.4 有透明度的径向渐变
• 4.4 项目应用
• 4.4.1 项目一：熊猫
• 4.4.2 项目二：雷达扫描
• 第5章 阴影
• 5.1 盒阴影box-shadow
• 5.1.1 外部阴影
• 5.1.2 内部阴影
• 5.1.3 多重阴影
• 5.1.4 复制自身的阴影
• 5.2 形状阴影函数drop-shadow()
• 5.3 项目应用
• 5.3.1 项目一：日历
• 5.3.2 项目二：飞机舷窗
• 第6章 剪切、滤镜和色彩混合
• 6.1 剪切clip-path
• 6.1.1 矩形剪切inset()
• 6.1.2 圆形剪切circle()
• 6.1.3 椭圆形剪切ellipse()
• 6.1.4 多边形剪切polygon()
• 6.2 滤镜filter
• 6.2.1 透明度滤镜opacity()
• 6.2.2 模糊滤镜blur()
• 6.2.3 色相滤镜hue-rotate()
• 6.2.4 亮度滤镜brightness()
• 6.2.5 对比度滤镜contrast()
• 6.2.6 多重滤镜
• 6.3 色彩混合
• 6.3.1 multiply模式
• 6.3.2 screen模式
• 6.3.3 difference模式
• 6.3.4 color-dodge模式
• 6.4 项目应用
• 6.4.1 项目一：莲花
• 6.4.2 项目二：彭罗斯三角形
• 第7章 变量与计数器
• 7.1 变量
• 7.1.1 声明和引用变量
• 7.1.2 表达式
• 7.1.3 批量描述一组元素的样式
• 7.2 计数器
• 7.2.1 计数器的声明、累加和读取
• 7.2.2 计数器初始值和步长
• 7.2.3 计数器的序列值
• 7.2.4 用计数器设计一个字母表
• 7.3 项目应用
• 7.3.1 项目一：监控眼
• 7.3.2 项目二：纸鹤
• 第8章 变换
• 8.1 变换函数
• 8.1.1 平移函数translate()
• 8.1.2 旋转函数rotate()
• 8.1.3 缩放函数scale()
• 8.1.4 扭曲函数skew()
• 8.2 变换原点transform-origin
• 8.3 多重变换
• 8.4 项目应用
• 8.4.1 项目一：炫彩旋臂
• 8.4.2 项目二：两只鹦鹉
• 第9章 缓动
• 9.1 缓动属性
• 9.1.1 持续时长transition-duration
• 9.1.2 延时启动时长transition-delay
• 9.1.3 参与缓动的属性transition-property
• 9.1.4 时间函数transition-timing-function
• 9.2 设置恢复效果
• 9.3 令一组元素缓动
• 9.4 对元素的不同状态进行交互设计
• 9.4.1 获得焦点:focus
• 9.4.2 选择选项:checked
• 9.4.3 页内跳转:target
• 9.5 项目应用
• 9.5.1 项目一：彩虹
• 9.5.2 项目二：两颗爱心
• 第10章 动画
• 10.1 动画属性
• 10.1.1 语法结构
• 10.1.2 持续时长animation-duration
• 10.1.3 延时启动时长animation-delay
• 10.1.5 播放次数animation-iteration-count
• 10.1.6 变化方向animation-direction
• 10.1.7 填充模式animation-fill-mode
• 10.1.8 播放状态animation-play-state
• 10.1.9 多个动画效果叠加
• 10.2 关键帧@keyframes
• 10.2.1 from...to...关键帧
• 10.2.2 百分比关键帧
• 10.2.3 循环效果
• 10.2.4 静止效果
• 10.2.5 关键帧的缺点
• 10.3 不同属性的动画效果
• 10.3.1 边框动画
• 10.3.2 背景动画
• 10.3.3 阴影动画
• 10.3.4 剪切动画
• 10.3.5 变换动画
• 10.4 项目应用
• 10.4.1 项目一：乒乓球对打
• 10.4.2 项目二：徘徊的果冻怪兽
• 第11章 CSS造型创意
• 11.1 螺旋形状的盘式蚊香
• 11.2 倒圆锥形状的热气球
• 11.3 逼真金属质感的笔记本电脑
• 11.4 用典型特征塑造的卓别林形象
• 第12章 CSS动画创意
• 12.1 层叠起伏的海浪
• 12.2 天体运转模型
• 12.3 充满秩序美的队列变色旋转动画
• 12.4 几何光学引起的咖啡馆墙壁错觉动画
• 第13章 文字特效创意
• 13.1 撕纸文字
• 13.2 牛奶文字
• 13.3 闪光的霓虹文字
• 13.4 立体的阶梯文字
• 附录 CSS 色彩名称对照表