欢迎关注微信公众号： 前端侦探在思否上看到这样一个设计，当阅读量比较少时，文字呈灰色，当阅读量比较多（>=100）时，文字就变成褐色了，示意效果如下是不是非常醒目呢？另外，还有那种可以根据进度自动变色的进度条，如下其实通过纯 CSS 也能实现这样的逻辑判断，主要用到了 CSS 变量和边界值计算，现在分享一下一...

欢迎关注我的公众号：前端侦探在 web 中，图片默认是可以拖拽的，通常是一个半透明的预览图（下面简称“预览图”），如下这个预览图是系统自动生成的，一般无法进行自定义，但有时候会觉得拖拽的预览图尺寸太大了，不方便放置，例如在这种场景下这是一个拖拽图片保存的功能，需要将图片拖拽至指定区域触发保存操作。由于拖...

不知道大家有没有碰到这样的问题：很多时候一个项目会存在多个环境，当浏览器标签页比较多的时候就完全分不清了其实这里是有3个开发环境的但是单独从 favicon 是没法快速区分哪个跟哪个的，为此，我做了一个 Chrome 插件可以很方便的解决这个问题，效果如下是不是非常清晰呢？安装和使用在 Chrome 网上商店 直接搜索 "au...

如果用到了 Ant Design 这样的框架，那可以直接用现成的组件。如果没有用到这样的框架呢？其实纯 CSS 也是可以搞定的，下面看看如何实现的，还有很多你可能不知道 CSS 小技巧哦~

欢迎关注我的公众号：前端侦探最近在项目中需要做一个标签输入框，还挺实用的，演示效果如下主要交互要求是这样的点击输入框可以输入内容按回车可以生成标签按退格键可以删除标签点击标签上的关闭按钮可以删除标签习惯了各种 react 框架或者UI库，大家有多久没接触没有原生开发了呢？有时候页面比较简单，没必要引入一个...

欢迎关注微信公众号：前端侦探练习 CSS 一个很好的方法就是绘制各式各样的 UI，比如这样一个时钟？你也可以访问这个 CSS clock查看实际效果CSS 绘制这样一个布局有几个难点：环形排列的刻度环形分布的数字自动运行的指针下面就来一一实现它，相信能学到很多 CSS 绘制和动画的小技巧一、环形排列的刻度提到“环形”，可以想...

欢迎关注我的公众号：前端侦探最近项目中看到这样的一个切角效果，如下所示就是一个正常的矩形，然后被“切”了一块，而且是沿着右上角切的。那么，这种布局如何实现呢？一、自适应方式这种布局一般有两种自适应方式，当然具体需要哪种可以根据实际设计师需求1. 固定距离无论宽高怎么变化，切角距离顶部的距离是固定的，如...

欢迎关注我的公众号：前端侦探最近在 MDN 官网看到了一个从未见过的选择器，::target-text。简单研究了一下，觉得还有点意思，也有点实际用处，现在分享一下。一、::target-text 是干什么的想必大家都用过:target这个选择器，可以很方便的从URL中匹配到页面上的内容，并且实现锚定定位。比如文档目录上经常看到这样的但...

欢迎关注我的公众号：前端侦探通常要做一个时钟，肯定离不开 JS 定时器。今天换一种思路，用 CSS 来实现一个时钟，如下：你也可以访问这个CSS time (codepen.io)查看实际效果当然借用了一点点 JS 用于初始化时间，整个时钟的运行都是由 CSS 完成的，有很多你可能不知道的小技巧，一起看看吧一、数字的变换先看看数字是如...

如果没有边框的话，用 CSS clip-path 也能很方便的裁剪出一个菱形，但是边框不太好处理（通常用嵌套一层的方式或者投影来模拟，但是效果不太好），这里介绍一个 SVG 方式，充分利用缩放特性来实现这样一个效果

欢迎关注我的公众号：前端侦探很多时候都会碰到字符串补全的需求，典型的例子就时间或者日期中的补零操作，例如 {代码...} 通常的做法是 {代码...} 后来，JS 中出现了原生的补全方法padStart()和padEnd()，如下 {代码...} 其实呢，在 CSS 中也是可以实现这样的效果的，并且有多种方案，下面一起看看吧，相信能有不一样的...

欢迎关注我的公众号：前端侦探关于原生 input range 滑动输入条如何自定义样式一直都是我心里的一道坎，一般情况下，可以很轻易的美化到这个程度为什么很容易呢？因为这些都是有对应的伪元素可以修改的 {代码...} 可是，偏偏没有已滑过部分的样式，如果要定义下面这样的样式，单纯的 CSS 可能没办法实现了注意：Firefox ...

linear-gradient可以说是最早实现这种效果的应用了，当然实现也最为巧妙，也最为复杂。原理是绘制两个直角三角形，然后拼接而成，如下

为什么要用到混合模式呢？因为这是文本，文本内部不可能放入 HTML 节点，所以下面介绍将另一种方式，在 HTML 完全受限的情况下，借助 SVG foreignObject 也能很轻松的实现这一效果，而且会有更好的效果，一起看看吧

在 web 开发中，有时不可避免会和“选区”与“光标”打交道，比如选中高亮、选中出现工具栏、手动控制光标位置等。选区就是用鼠标选中的那一部分，通常是蓝色

在 Web 中，大部分按钮可能都是平平无奇的，有时候为了强调品牌特殊或者满足特殊功能，可能需要给按钮添加一点点击动效。比如，用过 Ant Design 的小伙伴应该都能发现，在点击按钮的时候会有一个很微妙的水波动画

最近项目中 Ant Design 接入比较多，还是非常不错的。不知道大家有没有发现这样的效果，在官网上，如果鼠标放在Logo上，字母i上的图标会不停的变化，离开后停止，放上去重新变化，算得上是一个小彩蛋（可能我之前没发现🤣），演示如下：

button 是平时使用最广泛的一个 HTML 元素了，只要有点击交互的地方都推荐使用这个。但是，仍然有大部分网站使用的还是div，比如某博，所到之处几乎都是 div

通常我们见到的输入框都是宽度固定的，但有时也会碰到自适应内容宽度的，像这样目前我所知道的有两种方式，相信不难找到给普通 div 标签设置 contenteditable="true"，设置 inline-block 以后，就可以自适应内容宽度了将 input 的输入内容同步到一个透明的 div ，父级宽度跟随 div 的宽度，然后设置 input 为绝对定位并...

偶然在某思看到这样一个问题，如何使一个div的部分区域变透明而其他部分模糊掉？，最后实现效果是这样的进一步，还能实现任意形状的镂空效果鼠标经过的地方清晰可见，其他地方则是模糊的。可能一开始无从下手，不要急，可以先从简单的、类似的效果开始，一步一步尝试，一起看看吧。一、普通半透明的效果比如平时开发中碰...

先来看一个很常见的搜索框的交互，大概逻辑如下当输入框有内容才显示清除按钮点击清除按钮输入框会清空当输入框有内容并且处于聚焦情况下才显示搜索结果浮层点击搜索条目后关闭整个搜索结果浮层示意如下看着逻辑好像很多的样子，其实也是可以纯 CSS 实现的，花两三分钟一起看看吧一、输入框清除按钮的交互首先来看原生的...

偶然发现，在某乎热榜页有一个很有意思的布局，这里的标题会制约内容的行数，所以文本超出是"不定行"的。详细规则如下：整个容器高度是固定的，标题和内容总共 3 行标题最多2行，超出省略内容由剩余空间决定，如果标题占2行，则内容超出1行省略；如果标题占1行，则内容超出2行省略是不是很灵（离）活（谱）的交互？可以...

在一些 web 活动页中经常能看到特殊处理的标题文字，比如这样的暂时忽略掉特殊字体，通过设计稿的图层样式可以发现，共有 3 个文字特效，分别是渐变、描边、投影作为一个有追求的前端，当然不会直接用图片啦~ 这里分别用 CSS 和 SVG 两种方式来实现，一起看看吧温馨提示：文章细节较多，不感兴趣的也可以直接跳到底部查...

什么样的场景决定使用什么样的动画。比如一些比较轻量、装饰性的动画，CSS 动画就足够了，而一些对动画要求比较高的运营活动，创意小游戏等，JS 动画肯定是首选，必要情况下还需要借助一些图形库，比如 Pixi.js。

之前做过很多特殊的布局，比如在这两篇文章 CSS 实现优惠券的技巧 、CSS 实现支持渐变的提示框（tooltips），如下但是一直有一个痛点就是：无法给这些图形加上边框今天带来一个小技巧：利用 drop-shadow 一行代码搞定所有不规则边框一、投影这里需要利用投影 drop-shadow， 不太了解的可以参考 这篇文章: 被低估的CSS滤...

经常在某些文档中或者文章中可以看到这样一个"返回顶部"的功能，具体有两个交互只有滚动一定距离才会出现，返回到顶部重新隐藏点击会返回到顶部比如 LuLu UI又是点击的，又是滚动的，看着好像必须要借助 JavaScript 了，其实也可不必，经过我的一番琢磨，仅仅使用一点点 CSS 就能实现这样的交互效果，一起看看吧一、粘性...

这次来看一个带特殊圆角导航栏布局，如下谷歌浏览器的标签栏：这样一个布局如何实现呢？下面介绍几种方法一、伪元素拼接假设有这样一个 HTML 结构 {代码...} 首先可以考虑的一种方式就利用两个伪元素拼接中间的圆角比较容易，左右两边的反向圆角如何实现呢？其实可以想想有哪些可以实现圆形的样式，这里想到了border-rad...

经常在某些 app 中看到这样的九宫格设计。当缩略图不足 9 张时，正常排列，当超过 9 张时，会提示还剩多少张，如下：如何使用纯 CSS 实现这一效果呢？一起来看看吧一、九宫格布局布局就很简单了，一个很普通的九宫格布局，这里使用 grid {代码...} 这里正方形可以用aspect-ratio简易实现，对应的 CSS 如下 {代码...} 效...

那么，有没有办法在不使用 js 的情况下实现呢？我一看就来了兴致，看着好像和之前这篇文章 CSS 实现多行文本“展开收起” (juejin.cn) 有点类似？不过这次的布局要简单的多，交互琢磨了半天发现也是可以完美实现的，并且是完全不一样的思路，一起来看看吧

现在差不多已经是 flex 的天下了，简单灵活，但有时还是不可避免的会接触到 IE 浏览器，比如我最近接触的 阅文作家专区 (qq.com)，这个就是需要兼容 IE9， 也自然不能使用 flex 布局了。不能使用 flex 怎么办（这个项目怎么这么XX，都 2021 年了还要兼容 IE）？那只能回归传统布局方式了，也就是浮动布局。