标签： css

发布于

CSS `mask-composite` (`add`, `subtract`, `intersect`)：组合多个遮罩层

各位朋友，大家好！今天咱们来聊聊CSS里一个挺有意思的家伙——mask-composite，这玩意儿能让你的遮罩效果玩出新花样，组合多个遮罩层，就像在PS里玩图层混合模式一样。准备好了吗？咱们这就开始！ 一、什么是 mask-composite？ 简单来说，mask-composite就是用来控制多个遮罩图层之间如何相互作用的。想象一下，你有两张透明胶片，上面分别涂了黑色的图案，你想把它们叠在一起看效果。mask-composite就决定了这两张胶片叠在一起后，哪些部分是最终显示的，哪些部分被遮盖。 二、mask-composite 的取值 mask-composite 有几个常用的取值，每个取值代表一种不同的混合模式： 值 描述 add 默认值。将所有遮罩图层的效果叠加在一起。如果任何一个图层遮盖了某个区域，那么该区域就会被遮盖。可以理解为“并集”。 subtract 从前面的遮罩图层中减去后面的遮罩图层。后面的遮罩图层会将前面的遮罩图层中与其重叠的部分“挖掉”。可以理解为“差集”。 intersect 仅显示所有遮罩图层重叠的部分。只有所有图层都遮盖的区域才会最终被遮盖。可以理解为 …

继续阅读“CSS `mask-composite` (`add`, `subtract`, `intersect`)：组合多个遮罩层”

发布于

CSS `blending-modes` 叠加 (`overlay`, `soft-light`, `hard-light`) 的数学模型

各位观众老爷们，晚上好！ 今天咱们来聊聊 CSS 里的“妖艳贱货”—— blending-modes， 尤其是叠加系列的三剑客：overlay、soft-light 和 hard-light。 这三个家伙经常被用来实现各种炫酷的视觉效果，但它们背后的数学原理，emmm… 可能让不少小伙伴望而却步。 别怕！ 今天我就带大家扒掉它们华丽的外衣，看看它们“内心”到底藏着什么。 准备好纸笔，咱们开始咯！ 一、Blending Modes：概述 首先，我们要搞清楚 blending-modes 是个什么玩意儿。 简单来说，它就是控制两个图层（通常是背景和前景）如何混合在一起的属性。 想象一下，你把两张透明的彩色玻璃叠在一起，最终呈现出来的颜色，就取决于它们的混合方式。 CSS 提供了多种混合模式，比如 multiply（正片叠底）、screen（滤色）、color-dodge（颜色减淡）、color-burn（颜色加深），以及我们今天要重点关注的 overlay、soft-light 和 hard-light。 二、RGB 颜色模型：基础知识 在深入了解叠加模式的数学模型之前，我们需 …

继续阅读“CSS `blending-modes` 叠加 (`overlay`, `soft-light`, `hard-light`) 的数学模型”

发布于

CSS `gradient` `color-space` (提案)：在特定颜色空间定义渐变

各位朋友，大家好！我是你们今天的颜色空间向导，准备好进入 CSS 渐变的新境界了吗？今天要跟大家聊聊一个超级酷炫但又容易被忽视的 CSS 属性：gradient 中的 color-space。 别担心，我会尽量用最通俗易懂的方式，让大家彻底掌握它，以后写渐变再也不发愁！ 第一幕：颜色，你是什么颜色？ 在深入 color-space 之前，我们先来聊聊颜色的本质。 颜色这玩意儿，听起来简单，其实水很深。 简单来说，我们看到的颜色，是由红、绿、蓝三种光混合而成的。 就像调色一样，不同比例的红绿蓝，就能调出千变万化的颜色。 但是，问题来了！ 用多少比例的红绿蓝，才能精确地表示一个颜色呢？ 这就涉及到颜色空间的概念了。 颜色空间，就是一个用来描述颜色的数学模型。 不同的颜色空间，对颜色的定义方式也不同。 最常见的颜色空间，莫过于 sRGB 了。 它是互联网世界的标准颜色空间，几乎所有的显示器和浏览器都支持它。 但是，sRGB 并不是完美的。 它能表示的颜色范围比较窄，有些鲜艳的颜色，它就无能为力了。 除了 sRGB，还有其他的颜色空间，比如 Display P3、Rec.2020 等。 它们的 …

继续阅读“CSS `gradient` `color-space` (提案)：在特定颜色空间定义渐变”

发布于

CSS `HDR Color` (`Rec.2020`, `Display-P3`) 支持与感知均匀性色彩空间

各位观众老爷，大家好！今天咱们就来聊聊CSS里那些个“高大上”的色彩玩意儿：HDR Color（Rec.2020, Display-P3）和感知均匀性色彩空间。别怕，听名字唬人，其实理解起来很简单，保证你听完能跟人吹牛皮！ 第一部分：HDR Color，让你的屏幕亮瞎眼 啥叫HDR？High Dynamic Range，高动态范围。简单来说，就是能显示更亮、更暗，以及更多的颜色。以前的sRGB色彩空间就像个小房间，HDR色彩空间就像个大别墅，住的颜色多了去了。 CSS支持两种主要的HDR色彩空间：Rec.2020和Display-P3。 Rec.2020： 这货是个野心家，目标是覆盖人眼能看到的大部分颜色。但目前来说，大部分显示器还hold不住它，只能显示它的一部分子集。 Display-P3： 相对务实一点，是苹果搞出来的，比sRGB颜色更广，而且现在很多显示器都支持，兼容性更好。 怎么在CSS里用它们？ 很简单，用color()函数。这函数就像个万能钥匙，可以打开各种色彩空间的大门。 /* 使用Display-P3 */ body { background-color: color …

继续阅读“CSS `HDR Color` (`Rec.2020`, `Display-P3`) 支持与感知均匀性色彩空间”

发布于

CSS `color()` 函数：在 CSS 中直接使用 `Display-P3` 等广色域颜色

各位观众老爷们，大家好！今天咱们来聊聊CSS里的“色彩大爆炸”—— color() 函数，以及它如何让我们在网页上直接玩转广色域色彩，让你的设计瞬间高大上。准备好了吗？Let’s roll! 第一部分：色彩空间是个啥？为啥需要广色域？ 在咱们深入 color() 函数之前，先得搞清楚色彩空间的概念。 简单来说，色彩空间就是用来定义和表示颜色的一个数学模型。不同的色彩空间能表示的颜色范围是不一样的。 sRGB： 这是网页上最常用的色彩空间，也是历史最悠久的。它的优点是兼容性好，几乎所有设备都能正确显示。但缺点也很明显：能表示的颜色范围比较窄，尤其是绿色和蓝色区域，和真实世界相比差远了。想象一下，你看到一片翠绿的草地，用sRGB一显示，可能就变成了一种平淡无奇的颜色。 Display P3： 这是苹果公司推出的一种广色域色彩空间，比sRGB能表示的颜色范围广得多，尤其是在红色和绿色区域。这意味着在支持Display P3的设备上，你能看到更鲜艳、更逼真的色彩。想想你在iPhone或MacBook上看到的图片，是不是感觉色彩更丰富？ Rec.2020： 这是广播电视领域使用的一种 …

继续阅读“CSS `color()` 函数：在 CSS 中直接使用 `Display-P3` 等广色域颜色”

发布于

CSS `color-mix()` `space` 参数：在不同颜色空间进行颜色混合

早上好，各位颜色爱好者，今天我们来聊聊CSS color-mix() 中那个神秘又强大的 space 参数。 开场白：颜色，不仅仅是RGB 大家平时写CSS，颜色是不是 red、blue、#ffffff 这样直接招呼？ 或者更高级一点，用 rgba() 加上透明度？ 没毛病！ 但颜色世界远比你想象的精彩。它不仅仅是红绿蓝的简单组合，还涉及色彩的感知、物理特性，以及各种数学模型。color-mix() 函数的 space 参数，就是打开这个精彩世界的一把钥匙。 color-mix() 基础回顾：先学会走路，才能跑 在深入 space 参数之前，咱们先快速回顾一下 color-mix() 的基本用法。这就像学开车前，先得知道方向盘和油门在哪儿。 color-mix() 函数的基本语法是： color-mix( in <color-space>, <color> <percentage>?, <color> <percentage>? ) <color-space>: 这就是我们今天要重点讨论的 space 参数，指定颜 …

继续阅读“CSS `color-mix()` `space` 参数：在不同颜色空间进行颜色混合”

发布于

CSS `text-decoration-skip-ink`：下划线跳过文字下缘

各位观众老爷们，掌声在哪里！今天咱们就来聊聊CSS里一个有点意思，但又经常被忽视的小家伙——text-decoration-skip-ink。别看名字长，其实作用很简单，就是让你的下划线、上划线、删除线，在碰到文字下缘（比如字母’g’, ‘j’, ‘y’的尾巴）的时候，优雅地跳过去，而不是无情地穿过去。 好，废话不多说，咱们这就开始今天的讲座！ 1. 什么是text-decoration-skip-ink？ 首先，让我们来明确一下text-decoration-skip-ink到底是干嘛的。 简单来说，它控制的是文本装饰线（下划线、上划线、删除线）在绘制时，是否跳过字母的降部（descender）。降部指的是字母下伸的部分，比如’g’，’j’，’p’，’q’，’y’这些字母的下半部分。 如果没有text-decoration-skip-ink，这些装饰线会直接穿过这些字母的降部，看起来可能有点拥挤 …

继续阅读“CSS `text-decoration-skip-ink`：下划线跳过文字下缘”

发布于

CSS `counter-set` (提案)：直接设置计数器值，更灵活的列表编号

各位观众老爷，晚上好！我是你们的老朋友，今天咱们来聊聊一个CSS新玩意儿——counter-set。这玩意儿啊，说白了，就是让你能更任性地控制列表编号，想从哪儿开始就从哪儿开始，想设成啥数就设成啥数，简直是列表界的“乾坤大挪移”。 一、为啥要搞个counter-set？ 在没counter-set之前，咱们用CSS计数器来做列表编号，一般都是这么玩的： ol { counter-reset: my-counter; /* 初始化计数器 */ } li::before { counter-increment: my-counter; /* 每次递增计数器 */ content: counter(my-counter) “. “; /* 显示计数器值 */ } 这段代码很简单，就是定义了一个名为my-counter的计数器，然后在每个<li>元素前面显示计数器的值，并且每次递增。 但是！问题来了。如果我们想让某个列表项的编号直接从一个特定的值开始，或者想在列表的中间突然跳到另一个编号，那可就麻烦了。以前的做法要么是改HTML结构，要么是用JavaScript，总之就是不优雅。 …

继续阅读“CSS `counter-set` (提案)：直接设置计数器值，更灵活的列表编号”

发布于

CSS `font-synthesis` `weight` / `style` / `small-caps` 的浏览器实现细节

各位观众老爷，大家好！今天咱们来聊聊CSS font-synthesis 这个有点冷门但关键时刻能救命的属性，特别是它的 weight, style, 和 small-caps 这三个小伙伴。这玩意儿涉及到浏览器如何“脑补”缺失的字体变体，属于底层实现细节，了解一下绝对不亏。 开场白：字体家族的那些事儿 话说，咱们在网页上显示文字，得先有字体吧？字体家族就像一个大家庭，里面有不同的成员，比如“微软雅黑”这个大家族，可能包含“微软雅黑 Regular（常规）”，“微软雅黑 Bold（加粗）”，“微软雅黑 Italic（斜体）”等等。 问题来了，如果设计师想要用一个特定的字体变体（比如“微软雅黑 ExtraBold Italic”），但是用户的电脑上偏偏没有这个变体，那怎么办？难道显示一片空白？ 这时候，font-synthesis 就登场了！它告诉浏览器，如果找不到完全匹配的字体变体，能不能尝试“合成”一个出来。 font-synthesis 的语法 font-synthesis 属性可以接受以下值： none: 禁用所有字体的合成。浏览器必须完全匹配字体，否则就用默认字体显示。 wei …

继续阅读“CSS `font-synthesis` `weight` / `style` / `small-caps` 的浏览器实现细节”

发布于

CSS `initial-letter` `align-to-line-grid` (提案)：首字下沉与基线网格对齐

各位前端小伙伴们，早上好/下午好/晚上好！我是今天的主讲人，很高兴能和大家一起聊聊一个CSS里比较冷门但又挺有意思的属性——initial-letter，以及一个与之相关的提案 align-to-line-grid。 这俩家伙，一个负责首字下沉，另一个负责让首字下沉的时候还能规规矩矩地对齐网格线。听起来是不是感觉有点像强迫症患者的福音？别急，我们慢慢展开。 第一部分：initial-letter——首字下沉的艺术家 顾名思义，initial-letter就是用来设置首字母样式的。它接收两个值： initial-letter: <number> <integer>? <number>：首字母占据的行数。比如，initial-letter: 2，首字母就占两行的高度。 <integer> (可选)：首字母沉降的行数。这个值可以理解为首字母基线距离第一行基线的距离。如果省略，浏览器会自己算一个合适的值。 我们先来个简单的例子： <p class=”drop-cap”> 这是一个段落，我们来做个首字下沉的效果。 </p> …

继续阅读“CSS `initial-letter` `align-to-line-grid` (提案)：首字下沉与基线网格对齐”