2022年我写了哪些CSS文章?

2023-01-16
阅读 4 分钟
1.3k
欢迎关注我的公众号:前端侦探2022 全年共计发布了 41 篇关于 CSS 的原创文章。为了方便查阅学,花了一点时间分类整理了一下,按照时间倒序排序如下CSS 如何根据背景色自动切换黑白文字?CSS 如何实现羽化效果?万能的CSS 渐变!单标签绘制一个足球场CSS、SVG、Canvas对特殊字体的绘制与导出CSS 绘制一个3d掘金 logo还在...
封面图

CSS & SVG 绘制写作网格线的3种方式

2023-01-09
阅读 6 分钟
5.7k
欢迎关注我的公众号:前端侦探最近有同事问我这样一个问题:需要绘制一个自适应文本的写作网格线,设计稿是这样的其实就是一行行虚线,要求如下虚线的纵向间隔要跟随行高自适应,确保文本在每一栏虚线上虚线后面的背景是动态的,可以是纯色,可以是渐变,也可以是图片绘制这样的虚线,看似容易,其实暗藏玄机,下面一起...
封面图

妙用 CSS 动画来实现颜色加深、减淡等混合操作

2023-01-03
阅读 4 分钟
6.1k
欢迎关注我的公众号:前端侦探在上一篇 CSS 如何根据背景色自动切换黑白文字?中,讲述了文本自适应背景色的一些小技巧,不过还存在一定局限性,比如:如果是背景是渐变色该怎么办?很容易想到的思路是将两个渐变色取过渡中间色,然后再通过前面的方式转换就行了那么问题来了,有没有办法通过 CSS 实现中间颜色的获取呢...
封面图

CSS 如何根据背景色自动切换黑白文字?

2022-12-26
阅读 4 分钟
5.9k
在项目中,经常会碰到背景色不确定的场景,为了让内容文字足够清晰可见,文字和背景之间需要有足够的对比度。换句话说,当背景是深色时,文字为白色,当背景是浅色时,文字为黑色,就像这样:
封面图

砥砺前行,再接再厉!2022年终总结

2022-12-21
阅读 4 分钟
2.2k
大家好,我是侦探(今年的新称号)~又到了年末,来看看今年做了哪些事吧关于思否截止到今天(2022-12-17),我在思否上的发文刚刚超过 100 篇在整个 2022 年当中,相比之前还算是比较勤快的,基本维持一周一更的节奏,数据如下:文章:47篇回答:120 个,其中被采纳 46个声望:+4487其他荣誉:第三季度Top Writer另外,...
封面图

原来 Canvas 也能直接绘制圆角矩形了

2022-12-19
阅读 3 分钟
6.5k
很多时候,在使用 Canvas 绘制圆角矩形都是一件比较麻烦的事,因为之前并没有直接的方法,只能通过直线和圆弧间接组合而成,下面是一个常规绘制方式
封面图

CSS 如何实现羽化效果?

2022-12-12
阅读 5 分钟
7.8k
欢迎关注我的公众号:前端侦探最近碰到这样一个问题,在一张封面上直接显示书名,可能会存在书名看不太清楚的情况(容易受到背景干扰),如下为了解决这个问题,设计师提了一个“究极”方案,将书名背后的图片模糊一下,这个在 CSS 中很好实现,仅需backdrop-filter即可 {代码...} 当然,现在模糊是模糊了,但是边缘过于“...
封面图

万能的CSS 渐变!单标签绘制一个足球场

2022-12-05
阅读 9 分钟
5.5k
一眼望去,这里的形状只有圆形和矩形,在不借助其他标签的情况下(包括伪元素),其实很容易联想到渐变,一起看看如何绘制的吧,有非常多的渐变小技巧~
封面图

CSS、SVG、Canvas对特殊字体的绘制与导出

2022-11-28
阅读 9 分钟
2.3k
欢迎关注我的公众号:前端侦探最近在项目中需要对特殊字体进行绘制与导出,如下简单解释一下:所谓绘制,就是视觉上可以看到就行(预览状态),导出呢,就是将看到的转换成图片(或者Canvas),以便于后续处理。这里总结了 3 种方式,分别是 CSS 、 SVG、Canvas,来看看各自有什么差异和优缺点吧一、CSS 的绘制与导出首...
封面图

CSS 绘制一个3d掘金 logo

2022-11-21
阅读 5 分钟
2k
尝试一下用 CSS 绘制简单的 3d 图形,比如一个掘金 logo?相比 2d 绘制,3d 有哪些需要注意的小细节呢?一起看看吧一、金字塔形/四棱锥形除去挖空部分,整个外形其实是一个金字塔形,或者叫四棱锥形(四角锥)一共有5个面,所以我们可以准备5个元素 {代码...} 其中,bottom表示底部的正方形,其余4个表示侧面4个三角形。...
封面图

还在用 JS 做节流吗?CSS 也可以防止按钮重复点击

2022-11-14
阅读 3 分钟
4.6k
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库
封面图

由 transform 被占用引发的思考🤔

2022-11-08
阅读 6 分钟
5.1k
欢迎关注我的公众号:前端侦探聊一聊关于transform的一些事以及复杂属性的处理方式一、transform 很容易被占用众所周知,CSS 中的transform是一个包含很多值的属性,例如 {代码...} 但是,这并不是简写,而是就该这么写,这一点和background不一样 {代码...} 分开写的好处在于,如果只需要改变某一部分就很容易覆盖 {代...
封面图

CSS 如何设置自动滚动定位的“安全”间距?

2022-11-01
阅读 4 分钟
6.2k
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到与之相对应的内容上,如下但是,这种通过锚点触发的定位默认是紧贴滚动容器边缘的,如果一些定位元素,比如...
封面图

CSS 实现自适应文本的头像

2022-10-24
阅读 5 分钟
1.9k
欢迎关注我的公众号:前端侦探Ant-design 中有一个这样的头像组件,当字符串较长时,字体大小可以根据头像宽度自动调整,效果如下当然,这里是通过JS根据字符数量自动缩放文本实现的而现在,仅仅通过 CSS也能达到类似的效果,如下一起看看吧你也可以提前访问线上 demo: CSS avator (runjs.work)一、CSS 容器尺寸单位实...
封面图

CSS 绘制一只思否猫

2022-10-18
阅读 9 分钟
6.8k
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^<)独角猫,也是社区的首席摸鱼官你也可以提前查看完整代码 CSS sifou cat (runjs.work)其实还是有点小复杂...
封面图

两分钟小技巧!如何阻止 macOS 的触底弹性滚动和双指手势导航

2022-10-18
阅读 2 分钟
5.9k
通常情况下,反弹效果可以反映出是否滚动到了边界,让滚动体验更加丝滑,算是一种体验的提升,但是如果页面总有fixed定位元素,同样也会受到影响,在视觉上不是那么美观,那有没有办法阻止呢?
封面图

快速了解 inert 属性

2022-10-11
阅读 3 分钟
4.7k
欢迎关注我的公众号:前端侦探介绍一个全新的、和用户行为息息相关的属性:inert。HTMLElement.inert - Web APIs | MDN (mozilla.org)有了这个属性,可以更加轻易地控制很多交互行为,花几分钟了解一下吧一、inert 是什么?inert是 HTMLElement 的一个布尔属性,意为"惰性",简单来说,可以禁用一切交互,包括鼠标点击、...
封面图

CSS transition 小技巧!如何保留 hover 的状态?

2022-09-27
阅读 6 分钟
9.1k
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页排行榜效果这里的主要交互有以下几个鼠标滑过触发选中态鼠标移出列表后仍然保留上一次的选中态(重点)默认...
封面图

借助 :has 实现3d轮播图

2022-09-20
阅读 6 分钟
8k
前不久在这篇文章:CSS 有了:has伪类可以做些什么 中介绍了:has伪类的一些使用场景,可以说大大颠覆了 CSS 选择器的认知,让很多繁琐的 js逻辑通过灵活的CSS轻易实现了。这次带来一个比较常见的案例,3d 轮播图,就像这样的
封面图

CSS 有了:has伪类可以做些什么?

2022-09-16
阅读 7 分钟
8.2k
:has伪类是一个非常强大的伪类,强大到难以置信,可以做很多梦寐以求的事情,很多以前只能更改 dom 结构 或者只能用 JS 才能实现的功能现在也能纯 CSS 实现了,一起看看吧
封面图

还在用定时器吗?借助 CSS 来监听事件

2022-09-14
阅读 3 分钟
3.8k
平时工作中很多场合都要用到定时器,比如延迟加载、定时查询等等,但定时器的控制有时候会有些许麻烦,比如鼠标移入停止、移出再重新开始。这次介绍几个借助 CSS 来更好的控制定时器的方法,一起了解一下吧,相信可以带来不一样的体验
封面图

使用 SVG 生成带标识的 favicon

2022-09-06
阅读 6 分钟
6.4k
欢迎关注我的公众号:前端侦探之前做了一个 Chrome 插件,可以根据地址的不同生成不同的图标,这样可以很方便的区分不同的开发环境,效果如下主要实现过程其实不复杂,首先获取网站 favicon,然后给 favicon 添加标识,重新绘制生成就行了其中,这里的图标就是通过 SVG 生成的,下面看看具体实现吧。一、favicon 的获取...
封面图

如何让CSS计数器支持小数的动态变化?

2022-08-30
阅读 7 分钟
6.3k
最近在几篇文章中都用到了 CSS 计数器,可以将 CSS 变量通过伪元素content动态展示出来,还可以做出很多有趣的动画。有兴趣的可以先回顾一下之前的这几篇文章:
封面图

自定义计数器小技巧!CSS 实现长按点赞累加动画

2022-08-23
阅读 5 分钟
6.5k
欢迎关注我的公众号:前端侦探在某条 APP 中,如果长按点赞,会出现这样花里胡哨的动画,如下这个动画有两部分组成,其中这个随机表情的实现可以参考 coco 的这篇文章 巧用 transition 实现短视频 APP 点赞动画比较类似,这里就不重复了,我们这里要实现的是这个不断变化的数字动画,如下演示仔细观察,主要有以下几个交...
封面图

Windows滚动条如何美化成 macOS 那样?

2022-08-16
阅读 4 分钟
9.1k
欢迎关注我的公众号:前端侦探众所周知,Windows和macOS的滚动条在默认情况是不一致的,最显著的区别就是 macOS滚动条是不占据屏幕尺寸的,如下而Windows下是这样的很多设计师会吐槽Windows滚动条不太美观,能不能自定义成macOS那样呢?当然也是可以的!一起看看吧一、自定义滚动条外观考虑到桌面端现在已经是-webkit-的...
封面图

快速了解navigator API setAppBadge

2022-08-09
阅读 3 分钟
6.3k
欢迎关注我的公众号:前端侦探在很多客户端应用程序中,一般会通过应用图标的角标来显示当前消息的数量,例如其实,web 中也有类似的设定,花两分钟了解一下吧一、navigator.setAppBadge现在的navigator早已不是以前的navigator了,印象中的navigator通常用于获取设备的信息,浏览器发展这么多年,现在navigator也赋予了...
封面图

提升web输入体验!JS 如何自动配对标点符号?

2022-08-01
阅读 11 分钟
6.9k
欢迎关注微信公众号前端侦探温馨提示:在阅读本文之前,可以先回顾这篇文章:Web 中的“选区”和“光标”,有很多你可能不太知道的原生 API,以下内容是对该内容的实践运用在写作编辑中,有很多需要成对出现的标点符号,比如引号、括号、书名号等,如下所示:为了方便输入,某些输入法自带了标点自动配对功能。什么意思呢?...
封面图

今҈天҈真҈是҈热҈化҈了҈!

2022-07-25
阅读 3 分钟
6.9k
欢迎关注我的公众号:前端侦探今天真是太热了,不信你看标题今҈天҈真҈是҈热҈化҈了҈!也可以查看下面截图相信大家最近都能看到这样“热化了”的标题。那么,这是如何实现的呢?CSS 可以实现类似的效果吗?一起看看吧一、菊花字符 488首先,这类字符效果实现很简单,本质就是插入了一个特殊的“花漾字符”,可以在控制台上看到...
封面图

CSS color-scheme 和夜间模式

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

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

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