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

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

查阅电子书
手机扫码
  • 微信扫一扫

    关注微信公众号

编辑推荐

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艺术:网页设计案例实战》关注和支持,如本书内容有不良信息或侵权等情形的,请联系本网站。

你可能喜欢
工业设计手绘案例教程 电子书
本书主要内容包括:一章工业设计产品手绘基础练习、第二章工业设计手绘快速表现技巧、第三章不同手绘工具表现方法介绍、第四章不同材质处理的产品手绘表现方法、第五章工业产品手绘必须要有的三维转换思路分析、第六章工业设计手绘作品欣赏
字游:字体设计技巧与实战 电子书
一个设计师对自己工作的总结,同时把自己的工作经验和心得分享给大家。
字体设计实战从入门到精通 电子书
这是一本全面介绍商业字体设计的图书。本书突破了传统字体设计书的编排方式,将字体设计的理念与软件操作技巧完美地展现给读者,是快速、全面掌握字体设计的必备参考书。全书共4章,将文字的基础知识、文字设计的基本原则与设计手稿、设计思路点拨相结合,并用100个商业字体设计案例全面而深入地向读者展示了字体设计制作过程。另外,本书所有内容均采用CorelDRAWX6软件进行编写,请读者使用此版本软件进行学习。本
墨象艺术 品牌设计与创作思路 电子书
《墨象艺术品牌设计与创作思路》分享了作者的成长经历和其作品的创意实现过程。全书共分为7章,第1章讲述作者入行前和入行时的一些故事;第2章分享作者品牌创作的灵感来源和过程;第3章分享作者源于生活的作品,以及作品背后的故事;第4章分享作者源于情感的以海报为主的艺术作品;第5章分享作者的商业案例,分析了每个项目的背景、要点、灵感和执行过程;第6章分享作者的跨界合作与跨界艺术实践;第7章分享作者的经验,以
蝈蝈的概念艺术——商业游戏概念设计流程解析 电子书
本书是一本全面解析商业游戏概念设计的行业流程及创作规范的从业指南。全书共分为4章:第1章为规划与准备,介绍了概念设计的前期准备工作;第2章为设计法则,讲解了游戏概念设计的相关法则;第3章为视觉表达,剖析了设计理念的视觉化表现方式;第4章则为实战,用真实案例详细地阐述了概念设计的整个过程。本书不但案例丰富,还分享了作者近二十年的从业经验和心得体会。本书适合游戏概念设计爱好者、初学者和相关从业人员学习