Coco
https://csscoco.com/inspiration/#/./filter/filter-frosted-glass-effect csc inspiration guide online
https://csscoco.com/inspiration/#/./others/pure-css-various-button-unconventional-buttons csc inspiration guide online
https://csscoco.com/inspiration/#/./text/pure-css-word-smoke-disappear-effect csc inspiration guide online
https://csscoco.com/inspiration/#/./text/pure-css-word-mix-show-effect csc inspiration guide online
每天，我们都在和各种文档打交道，PRD、技术方案、个人笔记等等等。 其实文档排版有很多学问，就像我，对排版有强迫症，见不得英文与中文之间**不加空格**。 所以，最近在做这么一个谷歌扩展插件 [chrome-extension-text-formatting](https://github.com/chokcoco/chrome-extension-text-formatting)，通过谷歌扩展，快速将选中文本，格式化为符合 [中文文案排版指北](https://github.com/sparanoid/chinese-copywriting-guidelines) 的文本。 emmm，什么是排版指南？简单来说它的目的在于**统一中文文案、排版的相关用法，降低团队成员之间的沟通成本，增强网站气质。** 举个例子： ### **[中英文之间需要增加空格](https://github.com/sparanoid/chinese-copywriting-guidelines/blob/master/README.zh-Hans.md#%E4%B8%AD%E8%8B%B1%E6%96%87%E4%B9%8B%E9%97%B4%E9%9C%80%E8%A6%81%E5%A2%9E%E5%8A%A0%E7%A9%BA%E6%A0%BC)** 正确： > 在 LeanCloud 上，数据存储是围绕 `AVObject` 进行的。 错误： > 在LeanCloud上，数据存储是围绕`AVObject`进行的。 > > 在 LeanCloud上，数据存储是围绕`AVObject` 进行的。 完整的正确用法： > 在 LeanCloud 上，数据存储是围绕...
今天，有个群友问了我这么一个问题，如果不想切图，是否有办法实现带渐变边框的字体效果？如下所示：  本文，就将尝试一下，在 CSS 中，我们可以如何尽可能的实现这种渐变边框字体效果。 ## 元素叠加 首先，比较容易想到的写法是通过元素叠加实现。 1. 元素本身实现文字效果本身 2. 通过元素的伪元素，配合 `background-clip: text` 实现渐变文字，并且通过 transform 或者设置大几号的文字，实现渐变字体 3. 将（1）（2）进行叠加 我们尝试一下这种方式： ```HTML ``` ```CSS div { position: relative; width: 300px; height:...
最近，群里在讨论这么一个有趣的交互效果，来源于：[vueflow.dev](https://vueflow.dev/)：  通过审查元素，发现原效果借助了 Canvas 实现。 思索了一番，觉得这个效果利用 CSS 配合部分 Javascript 代码完全也是可以做到的。 于是动手尝试了一番，最终完美的复刻了该效果：  过程中还是有非常多有意思的技巧存在的，因此，本文将带大家一起，从 0 到 1 实现这个有趣的交互效果。 ## 利用混合模式实现叠加效果 整个效果，比较核心的一块便是当鼠标 Hover 上去时，整个元素叠加上一层黑色图层，但是呈现了不一样的叠加效果。 这个了解混合模式（`mix-blend-mode`）的同学应该一下就能想到。 在之前，我们也有多篇文章讲解过混合模式，感兴趣的可以随意快速浏览一下，下面是我写过的 15 篇与混合模式相关的合集链接： + [iCSS - 混合模式](https://github.com/chokcoco/iCSS/labels/%E6%B7%B7%E5%90%88%E6%A8%A1%E5%BC%8F)...
本文，我们将一起探讨探讨，如下所示的一个卡片 Hover 动画，应该如何实现：  这个效果的几个难点： 1. 鼠标移动的过程中，展示当前卡片边缘的 border 以及发光效果； 效果只出现在鼠标附近？这一块的实现方法就有很多种了，可以计算鼠标附近的范围，在范围内去实现的效果，但是这样成本太高了。 转换一下思维，其实也可以利用遮罩的思想。在一开始就已经实现好了整体效果，也就是渐变色的整个边框以及整体的内发光效果，通过遮罩的思想，让整个遮罩层跟随鼠标进行移动。 2. 整体的效果需要适配鼠标的移动，跟随鼠标移动，进行效果的切换； 基于上述动图中，到目前为止，纯 CSS 在鼠标移动效果跟随上，是没法解决的，这里需要引入一定量的 Javascript 代码。 基于上述难点（1）（2），下面我们就一起看看如何一步一步实现这个效果。 ## 搭建整个静态效果 首先，我们需要搭建整个静态效果。也就是在没任何 hover 的状态下的效果，如下所示：  由于，每张图背后的虚化图效果，应该是基于图片不同而千图千面，因此，不可能能够用一张背景图 Cover 所有情况。 并且，图片背后的虚化图的效果，需要与实际图片的颜色保持大致一致。 基于上述两点，我们很容易想到使用...
之前在知乎看到一个很有意思的讨论 [**一行代码可以做什么？**](https://www.zhihu.com/question/285586045/answer/754139603) 那么，一行 CSS 代码又能不能搞点事情呢？ ## CSS Battle 首先，这让我想到了，年初的时候沉迷的一个网站 [CSS Battle](cssbattle.dev) 。这个网站是核心玩法就是： 官方给出一张图形，在给定的 400 x 300 的画布上，能够用越短的代码实现它，分数就越高。 **注意是，完全一模一样还原**。 其中，[第一题](https://cssbattle.dev/play/1)就非常有趣，看看题目：  嗯，想一想，如果给定这样一张图形，告诉你 HTML 的大小是 `400px` x `300px`，图片中使用到的颜色是 `#5D3A3A, #B5E0BA`，你会怎么用 CSS 去实现它呢？...
最近，群里聊到了一个很有意思的布局效果。大致效果如下所示，希望使用 CSS 实现如下所示的布局效果：  正常而言，我们的 HTML 结构大致是如下所示： ```HTML Tab 1 Tab 2 Tab 3 Tab 4 ... ... ... ... ``` 对于 Hover 导航 Tab 时候的内容切换，暂且不谈。本文，我们核心想探讨的是两个点： 1. 一是对于如下所示的不规则布局，应该如何实现：  并且，这里我们可能还需要给它加上阴影效果：...