编辑推荐
190个经典网页设计实例,重难点细致拆解。
内容简介
本书分为13章。由CSS的基础知识引入,详细介绍了CSS3在边框、背景、阴影、遮罩、过滤器、计数器、变形、动画和特效等在视觉展现方面的潜力,最后还介绍了一些实用的网页造型创意。每个知识点均附有设计实例,引导读者理解不同模块的设计模式。每章最后的两个项目实例还配备视频讲解,以便读者更好的理解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 背景位置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 色彩名称对照表
CSS3艺术:网页设计案例实战是2020年由人民邮电出版社出版,作者张偶。
得书感谢您对《CSS3艺术:网页设计案例实战》关注和支持,如本书内容有不良信息或侵权等情形的,请联系本网站。