CSS3艺术

CSS3艺术

作者:张偶

出版社:人民邮电

出版年:2020年3月

ISBN:9787115518712

所属分类:经济金融

书刊介绍

《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
色彩名称对照表

相关推荐

微信二维码