CSS 实战技巧--掘金小册课程推荐/优惠

你将获得

• 掌握更多实用的 CSS 技能
• 解锁 CSS 高级技能，实现更具创意的 UI 效果
• 掌握更多 CSS 技巧，帮助你快速定位和解决各种疑难问题
• 最佳案例与实践，有效提升 CSS 编写能力；

作者介绍

大漠，掘金优秀作者，《现代 Web 布局》、《防御式 CSS 精讲》、《现代 CSS》、《Web 动画之旅》和《深入浅出 SVG》小册作者，曾就职于淘宝。对 HTML、CSS 和 A11Y 等领域有一定的认识和丰富的实践经验。CSS 中国布道者，2014 年出版《图解 CSS3：核心技术与案例实战》。

小册介绍

CSS 简单但不等于容易！很多 Web 开发者知道如何使用 CSS，但在碰到 CSS 问题或复杂情景时，却无从下手。而且，在编写 CSS 代码时，有很多实战技巧不为人所知。

另外，近几年以来，CSS 新增了众多优秀且强大的特性（我在《现代 CSS》 中阐述了这些新特性），并且得到了众多主流浏览器的支持。这些新特性的出现，除了改变我们编写 CSS 的方式之外，还允许我们使用更现代，更高级的 CSS 技巧来创建各种复杂的 Web UI、排版、布局或用户交互动效。

因此，我希望通过一本实战性的小册子，以更接近平时开发 Web 情景的真实案例为主，带领大家在实战过程中了解 CSS 众多不为人知的技能，以及通过真实项目案例的实战进一步帮助大家快速、深入掌握 CSS 更多的技能。与此同时，希望这些真实案例能帮助大家提高 CSS 实战能力和开发效率！

如果你觉得 《现代 Web 布局》、《现代 CSS》 和《Web 动画之旅》等小册更偏向于 CSS 理论方面的知识，那么该小册（《CSS 实战技巧》）更类似于《防御式 CSS 精讲》小册，以实战和解决问题为主。这本小册将会分为四大模块，即 CSS 形状（或图形） 、排版与布局、Web UI 效果 和用户交互动效。每个模块都会以真实案例为基础，通过案例、图解的方式让大家掌握相关 CSS 技巧的背后工作原理和实际编码的能力，从而提高 CSS 能力和开发 Web 项目的效率。

CSS 形状

稍微熟悉 CSS 的 Web 开发者知道，CSS 是一位“化妆师”，甚至是一位“艺术家”！它除了提供美化 Web 页面的能力之外，还提供了很多强大的特性，例如 CSS 的边框、渐变、裁剪、遮罩等特性：

Web 开发者使用它们可以创造出令人惊叹的视觉效果，甚至可以称得上是“艺术效果”。例如，社区中很多 Web 开发者经常会基于一个 div 的元素上挑战自己的 CSS 水平，使用它来创建各种“艺术作品”：

虽然这种方式可以提高开发者掌握 CSS 能力，但我们更多的是以实战为主，希望能更接近实际的 Web 开发，解决实际问题。是的，我就是这么做的！

我们在开发 Web 页面或应用的过程中，Web UI 大多时候是一个有规则的矩形，但也难免会碰到一些异形形状的 UI 效果或布局。例如：

在这个模块中，我将通过像上图所展示的真实案例带领大家，如何借助现代 CSS 特特自备的图形能力（比如，CSS 渐变、剪切、遮罩、边框图片、三角函数等）来创建诸如三角形、多边形、心形、丝带 、锯齿形状、凹槽形状、凸起形状和波浪形等形状。

在这个学习过程中，你将能掌握现代 CSS 创建这些形状的工作原理以及更灵活、更适用的技巧。还可以通过这些技巧快速实现 Web 中的异形 UI，比如切割元素角落、各种花式边框效果、创建提示框和语音气泡、不规则形状区域分隔符、内弧圆角选项卡等。

简而言之，在这个模块中，你将学习到使用 CSS 绘制图形的各种技能和技巧，而且还可以将这些技巧用于常见的 Web 组件，例如面包屑导航（Breadcrumb）组件、步骤指示器（Stepper）组件、进度条（ProgressBar）组件、自定义范围滑块和提示框（Tooltip）组件等。

排版与布局

一个 Web 网站或应能不能给用户带来更美好的视觉感和体验，其中一个必要因素就是 Web 的排版和布局，这两者是必不可少的。虽然普通的排版和布局不会让你太烧脑，但一些更具创意的排版和布局还是需要一定的技能才能实现的。

在这个模块中，我将带领大家如何使用**现代 CSS 特性和现代 Web 布局技术**来优化 Web 的排版效果和创建一些具有创意的布局。比如，我们可以借助 CSS 的比较函数、三角函数、变换、相对单位和颜色相关的函数（比如 color-mix() 和 color-contrast()）来创建流体排版、圆形环绕的文本等排版效果，以及如何增强文本可读性等。

除了探讨 Web 排版相关的 CSS 技巧之外，在这个模块中，将会用多节课的篇幅与大家探讨如何借助 CSS 网格、锚点定位、媒体查询、容器查询等特性来创建自动布局、不规则布局、交叉布局、全屏布局、居中布局、多语言布局和响应式布局。

Web UI 效果

通常情况之下，CSS 主要用来控制呈现给用户的静态 UI 视觉效果。随着现代 CSS 特性的出现，以往需要依赖图片和 JavaScript 的 Web UI 效果，我们可以使用纯 CSS 或借助少量的 JavaScript 来实现。例如，常见的切换按钮、手风琴、旋转木马（幻灯片）、无限滚动、主题切换等。下面展示的两个是我们在 Web 中常见的 UI 效果：

这是一个典型的手风琴 UI 效果，在实现卡片收缩与展开的交互效果过程中，没有使用任何 JavaScript 代码。你是不是很好奇，不使用 JavaScript 的前提之下，是如何实现的？具体的答案，你可以在小册的实际案例中找到。

你会发现，上面这个示例中，不同的提示信息拥有不同的背景和文本颜色，并且能自动适配暗黑模式。如果我告诉你，整个 UI 的颜色控制都是基于一个名为 --color 变量控制的。你是不是会感到意外。其实，对于现代 CSS 而言，我们使用 color-mix() 函数就可以同时控制元素的背景颜色、文本颜色和边框颜色，甚至还可以通过 color-contrast() 函数来提高文本颜色和背景颜色的对比度。对于暗黑模式的切换，可以使用 CSS 的 light-dark() 函数来实现，你都不需要依赖 CSS 的媒体查询，更不需要依赖任何的 JavaScript。

诸如此类的案例，在这个模块中还有很多，比如说，通过 :has() 选择器来根据表单控件的状态为 UI 提供不同的效果：

通过 CSS 的渐变和遮罩来创建拥有模糊效果的彩色文本：

你也可以给卡片添加光晕效果，并且光能跟随用户鼠标在卡片上移动：

你也可以给图片添加美轮美奂的、各式各样的装饰效果：

诸如此类的 Web UI 效果举不胜数。而且这些具有创意和创新的 Web UI 效果将决定着 Web 网站或应用的美感和用户体验。在这个模块中，将通过大量的实际用例，向大家阐述如何使用现代 CSS 来实现具有创意和吸引力的 UI 效果。

Web 动效

在当今数字时代，Web 页面已经不再是简单的文本和图像，已经演化成了充满生命的艺术品。其中，关键元素就是 Web 动效。这也意味着，Web 动效已然是 Web 网站或应用中必不可少的部分，它除了能吸引用户注意力之外还能提高用户的体验，以及品牌的影响力。

正因如此，我才专门出了一本与 Web 动画相关的小册——《Web 动画之旅》！这本小册涉及了制作 Web 动画的诸多方面与细节，例如 Web 动画的基本原理与设计原则，如何使用 CSS 、JavaScript 和 SVG 创建 Web 动画等等。要是你想深入学习 Web 动效相关的知识，我个觉得这本小册是一本不错的选择。

虽然有一本单独聊 Web 动画的小册，但我还是在这本小册中新增了一个 Web 动效相关的模块。在这个模块中，我将向大家阐述，如何借助最新的 CSS 特性，例如滚动驱动动画、锚点定位、CSS 视图过渡等特性来实现具有丰富且吸引人的 Web 动效。

与之前几个模块相似，我将通过更多真实的案例与大家一起探讨 CSS 创建 Web 动画的相关技巧。比如，将 CSS 自定义和变换相结合来创建类似跑马灯的动画效果：

比如，借助 CSS 锚点定位特定来创建一个交叉动画效果：

以及使用锚点定位创建熔岩导航菜单：

通过 CSS 的滚动驱动动画特性来创建滚动视差的交互效果：

通过 CSS 视图过渡 API 来创建折叠与展开的交互动效：

结合 CSS 的裁剪、遮罩、渐变等特性，创建更多奇妙的、炫酷的悬浮交互效果：

以及如何使用 :has() 选择器来增强页面的交互效果：

你除了在这个模块中能学习到制作上述提到的 Web 动效的原理与技巧之外，在这个模块中你还将掌握其他一些制作 Web 动画的技巧，例如：

• 给 auto 添加过渡动效

• 使用 transition-dealy 创建悬停效果

• 使用 display 和 size 属性简化CSS动画

• 控制动画速度：加速、减速和停止

• 等等

总而言之，《CSS 实战技巧》是一本专注于探索与应用 CSS 的实用指南，涵盖了从基础到高级的各种技巧，帮助 Web 开发者掌握 CSS 的核心功能并解锁其无限潜力。这本小册通过丰富的实际案例和技巧演示，将复杂的 CSS 概念转化为易于理解的知识点和可直接使用的解决方案。

小册的内容不仅囊括图形制作、Web 排版、Web 布局和 Web 动画效果等基础内容，还深入了探讨了 CSS 渐变、剪切、遮罩、三角函数、Grid 、Flexbox、颜色函数、自定义属性、视图过渡、滚动驱动动效和 CSS 锚点定位等高级特性。同时，它还针对现代 Web 开发需求，提供了更多专业性技术的指导和实战演练，能帮助大家快速高效提高 CSS 领域的专业知识和实战技能。除此之外，还能帮助大家快速解决 CSS 方面的痛点和提高开发效率。

通过系统学习这些技巧，你可以：

• 增强排版与布局能力，构建灵活且高效的页面结构

• 提升设计的美感与交互体验，打造吸引用户的视觉效果

• 快速解决复杂布局问题，从容应对多样化的开发挑战

• 掌握 CSS 的最新特性与趋势，如 CSS 锚点定位、滚动驱动动效和视图过渡等

适宜人群

不论你是 CSS 新手，还是希望提升技能的前端开发者，这本小册都能为你提供实用的解决方案与灵感。借助《CSS 实战技巧》，你将在 Web 开发的世界中更加游刃有余，设计出具有卓越用户体验的现代化网站。

• 现代 CSS 创建形状指南

• CSS 图形：创建正多边形和星爆形状

• CSS 图形：绘制三角形

• CSS 图形：创建心形

• CSS 图形：创建丝带效果

• CSS 图形：创建花式边框效果（Part2）

• CSS 图形：切割元素角落

• CSS 图形：带圆角的形状

• CSS 图形：创建花式边框效果（Part1）

• CSS 图形: 自定义虚线

• CSS 图形: 创建面包屑导航

• CSS 图形：创建进度条

• CSS 图形：创建步骤指示器

• CSS 图形：创建分隔符

• CSS 图形：创建自定义范围滑块

• CSS 图形：创建工具提示和语音气泡

• CSS 图形：自定义下拉选择框

• CSS 图形：创建多边框效果

• CSS 图形：创建内弧圆角选项卡

• CSS 图形：自定义选择控件

• CSS 图形：创建渐变边框

• CSS 图形：创建内中外边框

• CSS 图形：创建渐变阴影和发光效果

• CSS 图形: 创建突破元素（Breakout Element）

• CSS 图形：创建镂空头像

• CSS 图形：创建用户头像堆叠

• CSS 图形：用CSS锚定位绘制连接元素的线

• CSS 图形: CSS 渐变技巧

• CSS 图形：创建弧形与圆角边缘形状

• CSS 图形：创建内凹曲线形状

• CSS 图形：使用图片边框创建形状的技巧

• CSS 图形: 使用三角函数改进 CSS 形状

• CSS 布局：隐式网格和自动放置

• CSS 布局：网格区域

• CSS 布局: CSS 的 gap

• CSS 布局：构建不规则网格布局（Part1）

• CSS 布局：减少使用绝对定位的技巧

• CSS 布局：构建不规则网格布局（Part2）

• CSS 布局：水平居中

• CSS 布局：构建不规则网格布局（Part4）

• CSS 布局：构建不规则网格布局（Part3）

• CSS 布局：构建不规则网格布局（Part5）

• CSS 布局：CSS 与 Popover API 的结合

• CSS 布局：切换内容的现代方式

• CSS 布局：将元素浮动到底部角落

• CSS 布局：使用最小宽高的小技巧

• CSS 布局：创建全屏布局

• CSS 布局：创建手风琴组件

• CSS 布局：处理宽高比变化

• CSS 布局：使用现代 CSS重构评论组件

• CSS 布局：防止锚点链接滚动到固定或粘性头部后面

• CSS 布局：创建完美的 Logo 展示

• CSS 布局：重聊 CSS 锚点定位

• CSS 排版：CSS的 cap 单位

• CSS 排版：美化多语言网站技巧

• CSS 布局：创建熔岩导航菜单

• CSS 排版：圆形文本

• CSS 排版：利用 field-sizing 属性实现自动尺寸调整

• CSS 排版：如何使文本适应容器宽度

• CSS 布局：CSS 中的各种 *-box

• CSS 排版：颜色和对比度

• CSS 排版：Web 排版技巧

• CSS 排版：CSS 实现文本淡化效果的不同姿势

• Web UI：使用 :has() 增强页面交互效果（Part2）

• CSS 排版：margin-trim 最佳实践

• Web UI：驾驭高级CSS选择器

• Web UI：你所不知道的 color-mix()

• Web UI：使用 :has() 增强页面交互效果（Part1）

• Web UI：使用 mask 创建褪色文本效果

• Web UI：暗黑模式新的切换姿势 light-dark()

• Web UI：CSS 视图过渡之主题切换

• Web UI：使用相对颜色创建主题

• CSS 布局：HTML 和 CSS 下拉菜单的真相

• Web UI：根据控件状态调整 UI 效果

• Web 动效：滚动驱动动效之创建电梯导航菜单

• Web UI：交替样式查询

• Web UI：创建逐步模糊效果

• Web UI：多行文本强调色

• Web UI：创建渐变文字与投影效果

• Web UI：创建模糊闪烁效果

• Web UI：创建渐进式灰度效果

• Web UI：创建半色调效果

• Web UI：创建连续动态渐变

• Web UI：分层切换

• Web UI：循环依赖空间切换

• Web UI：随机函数： round()

• Web UI：纯 CSS 检测文本是否溢出

• Web UI：CSS 中的真假切换

• Web UI：数量检测

• Web UI：你需要的是 @property

• Web UI：尺寸检测

• Web UI：CSS 三角函数实现随机性

• Web UI：创建数字密码输入框

• Web UI：添加和删除徽标

• Web UI： 创建计时器

• Web UI：创建返回顶部按钮

• Web UI：用于按钮上的小技巧

• Web UI：创建拆分效果

• Web UI：奇妙的图像装饰效果

• Web UI：创建磁性悬停效果

• Web UI：给图像添加碎片效果

• Web UI：悬停显示密码

• Web UI：给产品图片换色

• Web UI：制作 3D 图像效果

• Web UI：制作 3D 视差效果

• Web UI：替代 !important 的新姿势

• Web UI：制作磨砂玻璃效果

• Web 动效：创建水波纹文本动画

• Web UI：CSS 如何穿透 SVG 的 use

• Web UI：你所不知道的 pointer-events

• Web UI：你所不知道的 min() 函数

• Web UI：CSS 中的新值和新函数

• Web 动效：故障悬停效果

• Web 动效：边框动画

• Web 动效：制作旋转木马效果

• Web 动效：无限滚动

• Web 动效：跑马灯效果

• Web 动效：淡入淡出过渡动效

• Web 动效：创建 Loading 动效

• Web 动效：给auto 添加过渡动效

• Web 动效：文本显示动效

• Web 动效：创建数字翻滚动效

• Web 动效：奇妙的悬停效果

• Web 动效：创建带有方向感知的交互按钮

• Web 动效：使用 transition-dealy 创建悬停效果

• Web 动效：CSS 视图过渡之模态框动画

• Web 动效：使用display和size属性简化CSS动画

• Web 动效：混合单位之速度与持续时间

• Web 动效：使用三角函数创建平滑的交错过渡延迟

• Web 动效：模拟动画重复延迟

• Web 动效：控制旋转动效：加速、减速和停止

• Web 动效：动画与 clip-path

• Web 动效：CSS 视图过渡之没有框架的单页应用

• Web 动效：CSS 视图过渡之收缩和展开动效

• Web 动效：滚动驱动动效之创建滚动指示器

• Web 动效：滚动驱动动效之滚动阴影

• Web 动效：滚动驱动动效之反转显式

• Web 动效：滚动驱动动效之创建带渐变的滚动条

• Web 动效：滚动驱动动效之缩放动画

• Web 动效：滚动驱动动效之按钮到导航

• Web 动效：滚动驱动动效之元素淡入淡出效果

• Web 动效：滚动驱动动效之滚动图库效果

• Web 动效：滚动驱动动效之 3D 翻转

• Web 动效：滚动驱动动效之滚动视差效果

• Web 动效：滚动驱动动效之弹出窗口

• Web 动效：锚点定位之交叉动效

• Web 动效：滚动驱动动效之收缩与展开效果

• Web 动效：锚点定位之 OSX Dock 导航

• Web 动效：锚点定位之滑动悬浮效果

• CSS 布局：创建响应式表格

• CSS 排版：上标与下标

• CSS 排版：CSS 中的文本均衡 text-wrap