iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
## CSS实现瀑布流布局（display: flex） + 本例使用 CSS flex 实现瀑布流布局 + 关键点，横向flex布局嵌套多列纵向flex布局，使用了 vw 进行自适应缩放 https://codepen.io/Chokcoco/pen/wYgYXX ## CSS实现瀑布流布局（column-count） + 本例使用 CSS column 实现瀑布流布局 + 关键点，`column-count` -- 元素内容将被划分的最佳列数 + 关键点，`break-inside` -- 避免在元素内部插入分页符 https://codepen.io/Chokcoco/pen/LgjazE?editors=1100 ##...
在页面布局中，我们经常会遇到/使用这么一类常见的布局，也就是列表内容水平居中于容器中，像是这样： ```HTML ``` ```CSS ul { width: 500px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 10px; } ``` 效果如下：  这里，外层的容器是定宽的，内层的 flex-item 也是定宽的。 当 flex-item 个数较小时，是没有问题的。但是，如果当元素内容过多，并且设置了...
本文未完成.... --------- ## 法一：使用 filter: invert 主要借助 invert 这个滤镜实现，定义一个 `.dark-mode-invert` 挂载在全局根元素 ``上： > **filter: invert()**: 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。 图片不能使用 `filter: invert` 处理，需要再 invert(100%) 转变回来。 ``` .dark-mode-invert { filter: invert(100%); } .dark-mode-invert...
`accent-color` 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。 简单而言，CSS `accent-color` 支持使用几行简单的 CSS 为**表单元素**着色，是的，只需几行代码就可以将主题颜色应用到页面的表单输入。 表单元素一直被吐槽[很难自定义](https://codepen.io/GeoffreyCrofte/pen/BiHzp)。而 `accent-color` 就是规范非常大的一个改变，我们开始能更多的自定义原生的表单的样式了！ ## 如何使用 `accent-color` OK，我们一起来学习一下，我们应该如何使用 `accent-color`。 首先，我们来实现这么一个简单的表单界面： ```HTML Accent-color Demo Strawberries Radio Buttons Range Slider Progress element 50%...
最近，有群里在群里发了这么一个非常有意思的卡片 Hover 动效，来源于此网站 -- [key-drop](https://key-drop.com/en/)，效果如下：  非常有意思酷炫的效果。而本文，我们不会完全还原此效果，而是基于此效果，尝试去制作这么一个类似的卡片交互效果：  该效果的几个核心点： 1. 卡片的 3D 旋转跟随鼠标移动效果 2. 如何让卡片在 Hover 状态，有不同的光泽变化 3. 如何让卡片在 Hover 状态，有 Blink，Blink 的星星闪烁效果 当然，要做到**卡片的 3D 旋转跟随鼠标移动效果**需要一定程度的借助 JavaScript，因此，最终的效果是 CSS 配合 JavaScript...
在 23 年的 CSS 新特性中，有一个非常重要的功能更新 -- **相对颜色**。 简单而言，相对颜色的功能，让我们在 CSS 中，对颜色有了更为强大的掌控能力。 其核心功能就是，让我们**能够基于一个现有颜色 A，通过一定的转换规则，快速生成我们想要的颜色 B**。 其功能能够涵盖： + [精简](https://developer.chrome.com/blog/css-relative-color-syntax?hl=zh-cn#lighten-a-color) + [调暗](https://developer.chrome.com/blog/css-relative-color-syntax?hl=zh-cn#darken-a-color) + [饱和度](https://developer.chrome.com/blog/css-relative-color-syntax?hl=zh-cn#saturate-a-color) + [降低饱和度](https://developer.chrome.com/blog/css-relative-color-syntax?hl=zh-cn#desaturate-a-color) + [色度增强](https://developer.chrome.com/blog/css-relative-color-syntax?hl=zh-cn#chroma-boost-a-color) + [调整不透明度](https://developer.chrome.com/blog/css-relative-color-syntax?hl=zh-cn#adjust-opacity-a-color) + [反转](https://developer.chrome.com/blog/css-relative-color-syntax?hl=zh-cn#invert-a-color) + [补充](https://developer.chrome.com/blog/css-relative-color-syntax?hl=zh-cn#complement-a-color)...
大部分同学都知道，在 CSS 世界中，有 vw、vh、vmax、vmin 这几个与视口 Viewport 相关的单位。 正常而言： 1. 1vw 等于1/100的视口宽度 （Viewport Width） 2. 1vh 等于1/100的视口高度 （Viewport Height） 3. vmin — vmin 的值是当前 vw 和 vh 中较小的值 4. vmax —...
今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样：  这个我们使用 CSS 还是可以轻松解决的，代码也很简单，核心代码： ```CSS div { border-radius: 25px; border: 2px dashed #aaa; } ``` 但是，原生的 `dashed` 有一个问题，就是我们**无法控制虚线的单段长度与间隙**。 假设，我们要这么一个效果呢虚线效果呢：  此时，由于无法控制 `border: 2px dashed #aaa` 产生的虚线的单段长度与线段之间的间隙，border 方案就不再适用了。 那么，在 CSS...
鼠标拖拽元素移动，算是一个稍微有点点复杂的交互。本文，就将打破常规，向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果。 在之前的这篇文章中 -- [不可思议的纯 CSS 实现鼠标跟随](https://github.com/chokcoco/iCSS/issues/46)，我们介绍了非常多有意思的纯 CSS 的鼠标跟随效果，像是这样：  但是，可以看到，上面的效果中，元素的移动不是很丝滑。如果你了解上述的实现方式，就会知道它存在比较大的局限性。 本文，我们还是仅仅通过 CSS，来实现一种丝滑的鼠标点击拖动元素移动的效果。 ## 鼠标点击拖拽跟随效果 OK，什么意思呢？我们先来看一个最最简单的效果示意图，点击一个元素，能够拖动元素进行移动：  好，到这里，在继续往下阅读之前，你可以停一停。这种效果，正常而言，都是必须要借助 JavaScript 才能够实现的。从表现上来看： 1. 首先拖拽元素，可以任意将元素进行移动 2. 然后放置元素，让元素停留在另外一个地方 思考一下，如果不借助 JavaScript 的话，有办法将元素小球从 A 点移动到...
假设，我们有这样一张 Gif 图：  利用 CSS，我们尝试来搞一些事情。 ## 图片的 Glitch Art 风 在这篇文章中 --[CSS 故障艺术](https://github.com/chokcoco/iCSS/issues/78#top)，我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。有点类似于抖音的 LOGO。 像是这样： 假设，我们有这样一张图：  只需要一个标签即可 ```HTML ``` 给两张同样的图片，叠加上 青色`#0ff` 和 红色`#f00`，并且错开一定的距离，两张图都要加上 `background-blend-mode: lighten`，其中一张再加上 `mix-blend-mode: darken`： ```CSS...