iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
本文属于 CSS 绘图技巧其中一篇。之前有过一篇：[在 CSS 中使用三角函数绘制曲线图形及展示动画](https://github.com/chokcoco/iCSS/issues/72) 想写一篇关于 CSS 创造艺术的文章已久，本文主要介绍如何借助 [CSS-doodle](https://css-doodle.com/) ，利用 CSS 快速创造美妙的 CSS 图形。 ## 中心布局 本文的所有技巧都会围绕这个布局展开，属于一类技巧。 首先，我们需要这样一种中心布局。简单的 HTML 结构如下： ```HTML ``` ```CSS .g-container { position: relative; width: 300px; height:...
这两天接触到一个很有意思的 CSS 属性 -- `box-decoration-break`。下面就一起去一探究竟。 因为 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break) 上关于这个属性，没有中文文档，所以一直在想一个合理贴切的中文翻译。直译一下： + box -- 盒，可以理解为元素盒模型 + decoration -- 装饰，理解为元素样式 + break -- 断行，参考`word-break` ，理解为断行时候的表现 那么，这个属性可以先理解为，元素在发生断行时其样式的表现形式。 > MDN 上英文释意为：The box-decoration-break CSS property specifies how...
## 10、CSS 斜线的实现 如何使用单个标签，实现下图所示的斜线效果。  这种类似于表格的斜线效果，细细研究一下，还是有一些挺有趣的方法可以实现之。 我们假定我们的 `HTML` 结构如下： ```HTML ``` 假定高宽各为 100px，在单个标签局限内，看看能有多少种方法实现。 ### 法一、CSS3 旋转缩放 这个应该属于看到需求第一眼就可以想到的方法了。 这里我们使用 **伪元素** 画出一条直线，然后绕 div 中心旋转 45deg ，再缩放一下就可以得到。 简单的一张流程图：  示意图如下：  [CodePen Demo...
CSS 故障艺术
 本文的主题是 Glitch Art，故障艺术。 什么是故障艺术？我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻的感觉，看起来具有闪烁、震动的效果，很吸引人眼球。 故障艺术它模拟了画面信号出现故障导致成像错误的感觉。青色色块与红色色块无法重合就是这种故障的体现。从胶片时代开始到今天的数码时代，这种故障一直是观众非常熟悉的现象。即使抖音的 LOGO 只是静态的，大脑也会自己补完整个效果，甚至还会自己脑补信号干扰的噪音。 当然，广义的故障艺术不仅仅指这种效果，我觉得是很宽泛的，本文将介绍一些 CSS 能够模拟完成的故障艺术效果。 ## 使用混合模式实现抖音 LOGO 首先从静态的开始，抖音的 LOGO 就是很好的一个例子。  它看着像是 3 个 J 形重叠在一起。而实际上，是两个 J 形重叠在一起，重叠部分表现为白色，这个特性，使用 CSS 的混合模式 `mix-blend-mode`...
直接进入正题，鼠标跟随，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样：  通常而言，CSS 负责表现，JavaScript 负责行为。而鼠标跟随这种效果属于行为，要实现通常都需要借助 JS。 当然，本文的重点，就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标跟随的行为动画效果。 ## 原理 以上面的 Demo 为例子，要使用 CSS 实现鼠标跟随，最重要的一点就是： **如何实时监测到当前鼠标处于何处？** OK，其实很多 CSS 效果，都离不开 **障眼法** 二字。要监测到当前鼠标处于何处，我们只需要在页面上铺满元素即可： 我们使用 100 个元素，将整个页面铺满，hover 的时，展示颜色，核心 SCSS...
在 CSS 中，倒影是一种比较常见的效果。今天，我们就将尝试，使用 CSS 完成各类不同的倒影效果，话不多说，直接进入主题。 ## 实现倒影的两种方式 首先，快速过一下在 CSS 中，实现倒影的 2 种方式。 ### 使用 -webkit-box-reflect 正常而言，`-webkit-box-reflect` 是一种非常便捷及快速的实现倒影的方式。 `-webkit-box-reflect` 的语法非常简单，最基本的用法像是这样： ```CSS div { -webkit-box-reflect: below; } ``` 其中，below 可以是 below |...
在许久之前，曾经写过这样一篇文章 -- [不定宽溢出文本适配滚动](https://github.com/chokcoco/iCSS/issues/81)。我们实现了这样一种效果： 1. 文本内容不超过容器宽度，正常展示 2. 文本内容超过容器的情况，内容可以进行跑马灯来回滚动展示 像是这样：  但是，之前的方案，有一个很明显的缺点，**如果我们事先知道了容器的宽度，那么没问题，但是如果没法确定容器的宽度，也就文本宽度不确定，容器宽度也不确定的话，那么整个效果会有一点瑕疵**。 瑕疵在于，**当时的 CSS 技术，其实没法判断当前文本内容长度是否超过了其容器宽度**，导致即便文本没有没有超长，Hover 上去也会进行一个来回滚动，像是这样：  ## 容器查询 cqw 和 CSS 数学函数 max 背景描述大概是这样，感兴趣的同学，可以简单翻看一下上午提到的文章 -- [不定宽溢出文本适配滚动](https://github.com/chokcoco/iCSS/issues/81)。 到今天，我们重新审视这个问题。看看到今天，我们可以如何更加简单便捷的解决这个问题！ 首先，我们的问题其实可以抽象成： 1. 判断文本宽度与容器宽度的大小差异，文本宽度是否大于容器宽度 2....
每年的苹果新产品发布，其官网都会配套更新相应的单页滚动产品介绍页。其中的动画特效都非常有意思，今年 [iPhone 14 Pro](https://www.apple.com.cn/iphone-14-pro/) 的介绍页不例外。 最近，刚好有朋友问到，其对官网的一段文字特效特别感兴趣，看适用简单却不知从何下手，我们来看看：  整个动画大致是，随着页面的向下滚动，整个文字从无到出现，再经历一轮渐变色的变化，最后再逐渐消失。 本文，就将介绍 2 种使用 CSS 实现该效果的方式。 ## 使用 background-clip 实现 第一种方式是借助 `background-clip`。 `background-clip`：background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。 而 `background-clip: text` 可以实现背景被裁剪成文字的前景色。使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。 看个最简单的 Demo ，没有使用 `background-clip:text` :...
在 CSS 中，渐变（Gradient）可谓是最为强大的一个属性之一。 但是，经常有同学在使用渐变的过程中会遇到渐变图形产生的锯齿问题。 ## 何为渐变锯齿？ 那么，什么是渐变图形产生的锯齿呢？ 简单的一个 DEMO： ```HTML ``` ```CSS div { width: 500px; height: 100px; background: linear-gradient(37deg), #000 50%, #f00 50%, #f00 0); } ``` 效果如下： ...
对 Chrome 扩展功能熟悉的小伙伴，可能都有用过 Chrome 的 3D 展示页面层级关系这个功能。 可以通过 **控制台 --> 右边的三个小点 --> More Tools --> Layers** 打开。即可以看到页面的一个 3D 层级关系，像是这样：  这个功能有几个不错的作用： 0. 页面层级概览 1. 快速厘清页面 z-index 层级之间的关系 2. 用于排查一些重绘过程（滚动过程）页面卡顿 当然，也会存在一些问题，譬如当页面的...