iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
本文内容源自：[A Sorted List of CSS Code Examples: Master Styling HTML Elements](https://www.bitdegree.org/learn/css-code) 非完全直译，按照我的理解有所改动。 如果你是一名初学者，并且希望系统性的掌握 CSS，那么这里有一整套可供你理解并且模仿学习的 DEMO(HTML+CSS)，并且是所见即所得。 ## CSS 知识点拆分 这里，首先我们会将整个 CSS 知识点分拆，分为： [1. Color](https://www.bitdegree.org/learn/css-code#color) [2. Backgrounds](https://www.bitdegree.org/learn/css-code#backgrounds) [3. Borders](https://www.bitdegree.org/learn/css-code#borders) [4. Margins](https://www.bitdegree.org/learn/css-code#margins) [5....
最近 S12 LPL 春季赛开赛，在看比赛的过程中，我发现新赛季的 Ban/Pick 选人阶段，出现了一种新的，有意思的遮罩效果，如下图所示：  当然，它是一个动态的效果，当选人的过程中，会有一种呼吸的效果：  Gif 图有点糊，总的而言，就是一种接近迷雾的遮罩效果。并且，他是能够动态变化的。 本文将探究，在 CSS 中，我们应该如何去实现类似的效果。 ## 实现烟雾化遮罩效果 首先，我们来尝试实现这样一个动态遮罩：  假设没有模糊的边缘，及烟雾化的效果，它其实就是一个渐变： ```HTML ``` ```CSS div { width: 340px; height: 180px; border: 2px...
今日，群里有个很有意思的问题，问我如何实现一个彩色的，带渐变的二维码，像是这样：  很有意思的问题，我们在百度谷歌，搜索 **qrcode**，能搜到非常多在线制作二维码的工具，它们其中一些也会带有制作渐变二维码的功能。但是它们大部分都是 Canvas 或者其它编程语言实现的。 如果我们现在已经有了一张白底黑字的普通二维码，想把它变成一个渐变色的二维码？该如何做呢？  本文就将介绍，**使用 CSS，快速将一个普通黑色二维码，变成任意我们想要的彩色渐变二维码**。 ## 强大的混合模式 拥有一张原图，想改变其颜色。在 CSS 中，我们很快可以想到 **滤镜 filter**、或者是 **混合模式 mix-blend-mode**。 这里，我们就需要用到 **混合模式 mix-blend-mode**。混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。目前 CSS 已经原生支持了大部分的混合模式。 原理其实非常简单，我们实现一张渐变图形，这张图形通过混合模式中的 `mix-blend-mode:...
今天，在 CodePen 上看到一个很有意思的效果 -- [GSAP 3 ETC Variable Font Wave](https://codepen.io/Chokcoco/pen/BamYMYg)，借助了 JS 动画库 GSAP 实现，一起来看看：  我寻思着能否使用 CSS 复刻一版，鼓捣了一会，利用纯 CSS 成功实现了原效果。 上述效果，最核心的就是文字的动画，文字从**较细贴着较紧**，到**较粗隔着较远**不断变化。有人会认为这里是 `transform: scale()`，实则不然。 `scale` 是等比例放大缩小一个物体，而仔细观察上述效果，明显是有字体的粗细、字体的字宽的变化。这里，其实用到了 CSS 比较新的特性 -- **可变字体**，也就是 `font-variation`。...
源自 [Amit Sheen](https://codepen.io/pro)。 CSS 3D 诞生之初，只是为了解决一些简单的 3D 场景，实现基于 Web 的轻量 3D 效果，虽然比之 WebGL 在能力上逊色不少，但是还是有人不断再利用 CSS 3D 创造艺术。 本文，就带领大家欣赏一下 CSS 3D 实现的一些不可思议的动画效果，来自于 Amit Sheen 的 CodePen。 **注意，以下效果均为纯 CSS 实现**： ## Newton's...
最近有个小伙伴问我，在[某个网站](https://fffuel.co/nnneon/)看到一个使用 SVG 实现的炫彩三角边框动画，问能否使用 CSS 实现：  很有意思的一个动画效果，立马让我想起了我在 [CSS 奇思妙想边框动画](https://github.com/chokcoco/iCSS/issues/92) 一文中介绍的边框动画，非常的类似：  其核心就是利用了角向渐变（`conic-gradient`），然后将图案的中心区域通过覆盖遮罩一个小号的图形实现。 然而，这个三角形动画里有两个难点： 1. **整个图形是个三角形** 在 CSS 中，我们可比较轻松的实现矩形与圆形，但是三角形这里无疑会棘手很多。 2. **整个边框还附带阴影，并且阴影还是在边框的两侧** 这里看似不复杂，实则困难重重，如果采用上述的方法，将图案的中心区域通过覆盖遮罩一个小号的图形实现镂空，那么另外一侧的阴影如何产生？即便使用 `drop-shadow`，也会被覆盖的内侧图形给遮挡住。 当然，CSS 还是可以实现这个图形的，本文就将讲解如何使用 CSS 实现上述炫彩三角边框动画。 ## 通过角向渐变实现主体动画 首先，我们还是需要借助角向渐变 `conic-gradient`...
今天，在[知乎](https://www.zhihu.com/question/516570618)看到一题比较有意思的题目。 题目大致是如何实现下述图片的效果，如果使用 div 前置遮挡的话，会影响 div 后面的按钮，使其无法被点击。  本文将简单介绍几种这个效果的实现方案。 ## 渐变配合 pointer-event 第一种方式，比较容易想到。使用渐变配合 `pointer-event` 实现。 简单模拟一下场景，假设我们有如下一个 `ul` 列表，超出可以滚动： ```CSS Button Button Button Button Button Button ``` ```CSS ul { width: 300px;...
最近几年 CSS 界的大事之一是每年年底的 《State Of CSS》，也就是 CSS 现状调查，去年年底发布了[《State Of CSS 2021》](https://2021.stateofcss.com/zh-Hans/)。其中关于特性这一章，会列出一些比较新的 CSS 特性在当年的**使用情况概览**：  每个图代表一个特性，上图是按照**使用数量**进行区分，外圈表示**听说过**，而内圈表示**使用过**，最后几行的基本可以理解为，**听说过的人很少，用过的人更少**。 本文将介绍其中关于**颜色**的几个冷门新特性。 ## color-gamut 色域 `color-gamut` 为 2021 最冷门特性，它到底是何方神圣？ `color-gamut` 直译过来就是色域。它属于媒体查询的其中一个，有 3 个取值： ```CSS color-gamut: srgb;...
## 11、IFC、BFC、GFC 与 FFC 知多少 这么多 `*FC` 都是些啥？ FC 即是 Formatting Contexts ，译作格式化上下文。 `*FC` 可以称作视觉格式化模型。CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制。这是 CSS 的一个基础概念。 比较常见的是 CSS2.1 规范中的 IFC（Inline Formatting Contexts）与 BFC（Block Formatting Contexts），至于后面两个，则是 CSS3...
本文的标题是**如何写出让别人看不懂的选择器**，但是本意不是希望大家去写如此复杂的选择，一些复杂（怪异）的选择器在一些特定场景下也许有着妙用，又或者写出这种选择器是基于当时的特殊背景。 通过这些案例，我们窥见一些 CSS 选择器的有意思之处。从中得到一些有益经验。 ## 五花八门的伪类叠加 首先来看第一类，在单个选择器中，叠加各种伪元素。 像是这个： ```CSS a:not(main *:not(:is(h2, h3) > *)) { color: red; } ``` 这个选择器不认真看个一分钟根本不知道它到底是个啥。（认真看也不一定知道...） 它混入了比较新的两个伪类选择器 + `:not()`：用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class） + `:is()`：将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。 当然，对于它的拆解： 1. `a:not(main *)`：选择不是...