CSS3艺术:网页设计案例实战

丰富案例·190个前端开发实例，在实战中了解CSS3艺术设计技巧
全彩印刷·关键代码+知识重难点一目了然，学习不单调不枯燥
扫码视频·作者细致拆解实例结构，引导读者快速上手
丰富资源·演示文件+常用色卡+海量更新资源，多方面提高读者实战技能

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

张偶，拥有Web开发近20年工作经验，现为互联网公司web开发主管。曾入选 SegmentFault 社区年度榜排名前3位，亦是 CodePen 社区较受欢迎的靠前开发者之一。近年来实践 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   背景位置backgroundposition
4.1.4  背景尺寸background-size
4.1.5   背景平铺backgroundrepeat
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   持续时长transitionduration
9.1.2   延时启动时长transitiondelay
9.1.3   参与缓动的属性transitionproperty
9.1.4   时间函数transition-timingfunction
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   持续时长animationduration
10.1.3   延时启动时长animationdelay
10.1.4   时间函数animation-timingfunction
10.1.5   播放次数animation-iterationcount
10.1.6   变化方向animationdirection
10.1.7   填充模式animation-fillmode
10.1.8   播放状态animation-playstate
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 色彩名称对照表