CSS color-scheme 和夜间模式

2022-07-18
阅读 5 分钟
13.3k
欢迎关注微信公众号:前端侦探介绍一个和深色模式相关的CSS属性:color-scheme一、什么是 color-scheme?color-scheme顾名思义,即为“配色方案”,在系统中指的是“白天模式”和“夜间模式”。使用这个属性可以轻松的更改浏览器的默认配色方案,语法如下 {代码...} 几个关键词如下normal:表示元素未指定任何配色方案,因此应...
封面图

动画合成小技巧!CSS 实现动感的倒计时效果

2022-07-11
阅读 6 分钟
9k
欢迎关注微信公众号: 前端侦探介绍一个 CSS 动画合成小技巧。先看效果这是一个非常“动感”的倒计时效果,通常在一些活动开场中比较常见,分析一下整个动画过程,不难发现,有以下几类动画数字的变化缩小和放大透明度变化不知道小伙伴能否观察出来呢?下面来一起来看看具体实现吧一、数字的变化先来看数字的变化。这个技...
封面图

CSS层级小技巧!如何在滚动时自动添加头部阴影?

2022-07-04
阅读 4 分钟
5.2k
在网页中,经常会用阴影来突出层级关系,特别是顶部导航,但有时候设计觉得没必要一开始就显示阴影,只有滚动后才出现。比如下面这个例子,注意观察头部阴影
封面图

视觉还原小技巧!CSS 实现角标效果

2022-06-27
阅读 4 分钟
5.9k
欢迎关注微信公众号: 前端侦探最近在项目中碰到一个这样的角标设计,如下像这种可以文字可变化,自适应大小的布局,自然首选 CSS 了~下面看看如何实现的(两分钟读完)一、圆角矩形和三角形从设计上可以拆分成两部分,一个圆角矩形和一个三角形假设 HTML 是这样的 {代码...} 圆角很好实现,border-radius就行,如下 {代...
封面图

CSS实现可拉伸调整尺寸的分栏布局

2022-06-20
阅读 6 分钟
8.1k
很多页面布局,特别是那种工具类的、比如编辑器、可视化平台等,为了充分的利用屏幕空间,都会提供拖拽调节各个分栏尺寸的功能,比如像 vscode
封面图

让拖拽更加人性化?如何自定义dragover样式

2022-06-13
阅读 6 分钟
7.1k
欢迎关注微信公众号: 前端侦探在 web 开发中,经常会碰到需要拖拽的场景。为了更好的体验,拖拽区域需要有一定的变化提示,告诉用户:"现在可以放在这里了~",例如这样的之前在这篇文章讲述了如何自定义 drag 样式,这次接着探索一下如何自定义 dragover 样式。一、dragenter 和 dragleave要实现这样的效果,少不了和dr...
封面图

CSS 实现头像名称首字符自动占位

2022-06-06
阅读 5 分钟
4.2k
在 web 中经常会见到这样的设计,很多 UI 组件库也称之为 Avator 组件,也就是头像的意思,当头像未设置时,会显示名称的首字符充当默认头像,如下所示:
封面图

CSS 变量自动变色技术

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

如何自定义 drag 样式

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

自动区分不同的开发环境?我做了一个Chrome插件

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

CSS 实现树状结构目录

2022-05-09
阅读 13 分钟
5.8k
如果用到了 Ant Design 这样的框架,那可以直接用现成的组件。如果没有用到这样的框架呢?其实纯 CSS 也是可以搞定的,下面看看如何实现的,还有很多你可能不知道 CSS 小技巧哦~
封面图

没有框架怎么办?原生 CSS + JS 实现一个标签输入框

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

CSS 绘制一个时钟

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

CSS 实现切角效果

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

了解一下 ::target-text 选择器

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

还在使用定时器吗?CSS 也能实现电子时钟

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

SVG 绘制自适应的菱形

2022-03-28
阅读 4 分钟
4.4k
如果没有边框的话,用 CSS clip-path 也能很方便的裁剪出一个菱形,但是边框不太好处理(通常用嵌套一层的方式或者投影来模拟,但是效果不太好),这里介绍一个 SVG 方式,充分利用缩放特性来实现这样一个效果
封面图

CSS 也能自动补全字符串?

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

CSS 美化滑动输入条 input range

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

CSS 实现透明方格的 3 种方式

2022-03-07
阅读 4 分钟
6.8k
linear-gradient可以说是最早实现这种效果的应用了,当然实现也最为巧妙,也最为复杂。原理是绘制两个直角三角形,然后拼接而成,如下
封面图

CSS & SVG foreignObject 实现文字镂空波浪动画

2022-02-28
阅读 7 分钟
4.5k
为什么要用到混合模式呢?因为这是文本,文本内部不可能放入 HTML 节点,所以下面介绍将另一种方式,在 HTML 完全受限的情况下,借助 SVG foreignObject 也能很轻松的实现这一效果,而且会有更好的效果,一起看看吧
封面图

Web 中的“选区”和“光标”

2022-02-24
阅读 13 分钟
13k
在 web 开发中,有时不可避免会和“选区”与“光标”打交道,比如选中高亮、选中出现工具栏、手动控制光标位置等。选区就是用鼠标选中的那一部分,通常是蓝色
封面图

CSS 实现按钮点击动效的套路

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

CSS 实现 Ant Design官网Logo彩蛋效果

2022-01-25
阅读 4 分钟
5k
最近项目中 Ant Design 接入比较多,还是非常不错的。不知道大家有没有发现这样的效果,在官网上,如果鼠标放在Logo上,字母i上的图标会不停的变化,离开后停止,放上去重新变化,算得上是一个小彩蛋(可能我之前没发现🤣),演示如下:
封面图

使用 button 的 5 个理由

2021-12-06
阅读 4 分钟
3.4k
button 是平时使用最广泛的一个 HTML 元素了,只要有点击交互的地方都推荐使用这个。但是,仍然有大部分网站使用的还是div,比如某博,所到之处几乎都是 div
封面图

CSS 自适应内容宽度的输入框

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

CSS mask 实现鼠标跟随镂空效果

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

CSS 实现搜索相关交互

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

CSS 实现文本"不定行数"截断

2021-10-25
阅读 4 分钟
5k
偶然发现,在某乎热榜页有一个很有意思的布局,这里的标题会制约内容的行数,所以文本超出是"不定行"的。详细规则如下:整个容器高度是固定的,标题和内容总共 3 行标题最多2行,超出省略内容由剩余空间决定,如果标题占2行,则内容超出1行省略;如果标题占1行,则内容超出2行省略是不是很灵(离)活(谱)的交互?可以...
封面图

CSS和SVG实现文字渐变、描边、投影

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