CSS mask 与 切图艺术

9 月 25 日
阅读 8 分钟
570
相反,有些地方还是更推荐的,特别是那些奇形怪状的 UI,合理的“切图”可以极大地提高布局效率,当然,这里需要一点点技巧,将“切图”和 CSS 现有能力结合起来,一起学习一下吧
封面图

重新学习 scrollIntoView

9 月 18 日
阅读 6 分钟
774
欢迎关注我的公众号:前端侦探大家可能都知道 dom 有一个 scrollIntoview方法,它可以轻易的让目标元素滚动到可视范围之内,而无需手动计算偏移量 {代码...} 效果如下这样跳转比较生硬,因此可能还知道有这样一个参数 {代码...} 这样就能平滑滚动了仅仅只有这些了吗?其实还可以做很多一、重新学习 scrollIntoView 语法...
封面图

Google 2023开发者大会简单回顾 - Web 平台新动向

9 月 17 日
阅读 4 分钟
336
简单回顾一下 Google 2023 开发者大会(上海)关于 Web 平台的部分。web的优势首先介绍了 Web 的一些优势,以超链接为基石,把所有生态都连接起来,是最开放的平台接下来开始介绍各种新特性WebAssemblyWebAssembly 是一种新的编码方式 ,可以直接运行 C/C++等语言,更接近硬件原生性能。[链接]将浏览器端性能提升 50%支...
封面图

裁剪的3种方式,CSS 如何隐藏移动端的滚动条?

9 月 11 日
阅读 4 分钟
2.4k
在移动端开发中,经常会碰到需要横向滚动的场景,例如这样的但很多时候是不需要展示这个滚动条的,也就是这样的效果,如下你可能想到直接设置滚动条样式就可以了,就像这样 {代码...} 目前来看好像没什么问题,但在某些版本的 iOS 上却无效(具体待测试),滚动条仍然出现。那有没有其他方式可以解决这个问题呢?下面介...
封面图

twitter 换新 logo 了,用 CSS 渐变来画一个吧~

8 月 29 日
阅读 3 分钟
3.1k
大家可能知道,不久前 twitter 换了一个新 logo,从蓝色小鸟变成了一个 “x”,如下不聊其他的,看看如何用 CSS 渐变来绘制这样一个图形一、 x 的绘制整个 logo 是一个镂空的“x”形状,先不考虑镂空部分,如何绘制实心的“x”呢渐变有 3 种,线性渐变、径向渐变和锥形渐变。很显然,x 可以看成是两端倾斜的线段,用线性渐变就...
封面图

太丝滑了!了解一下原生的视图转换动画 View Transitions

8 月 21 日
阅读 10 分钟
4.5k
Android 里一般称之为共享元素(shareElement)动画,也就是动画前后有一个(或多个)相同的元素,起到前后过渡的效果,可以很清楚的看到元素的变化过程,而并不是简单的消失和出现。
封面图

CSS 如何改变网格布局偶数行的排序?

8 月 14 日
阅读 6 分钟
3.6k
欢迎关注我的公众号:前端侦探最近在项目中看到这样一个布局,如下布局本身没什么奇怪的,就是 4 * 2 的网格,比较特殊的是第二行布局是从右往左的,整体是一个这样的顺序而这个列表是通过一个数组动态渲染的,可能有很多同学会将这个数组分成两份,然后将第二份进行反向,类似于这样 {代码...} 然后,由于第二行的第一...
封面图

CSS 渐变中的颜色空间和色相插值

8 月 7 日
阅读 5 分钟
513
在 CSS 中,我们可以很轻易的实现一个渐变,比如下面是一个从黄色到蓝色的渐变 {代码...} 效果如下有没有发现有什么问题?🤔没错,在黄色和蓝色的中间,出现了灰色,看着整体颜色非常“脏”,也就是设计中常说的 “灰色死亡地带”(gray dead zone)有没有办法规避这种情况呢?这就需要用到今天要介绍的颜色插值算法和色相插...
封面图

借助 input range 实现图片对比功能

7 月 31 日
阅读 4 分钟
3.5k
欢迎关注我的公众号:前端侦探之前在项目中做了一个图片对比的工具,演示如下有一些有趣的小细节,一起看看如何实现的吧一、布局布局比较简单,两张图片上下重叠在一起就行了 {代码...} 这里可以只给第一个图片设置绝对定位,有几个好处第1张图片层级自动就高了第1张图片仍在原处,也无需设置 left、top第1张图片不占空...
封面图

CSS 滚动驱动动画终于正式支持了~

7 月 24 日
阅读 11 分钟
3.9k
在最新的Chrome 115中,令人无比期待的CSS 滚动驱动动画(CSS scroll-driven animations)终于正式支持了~有了它,几乎以前任何需要JS监听滚动的交互都可以纯 CSS 实现了,就是这么强大,一起了解一下吧
封面图

原来 CSS 渐变也可以只用一个颜色

7 月 17 日
阅读 4 分钟
3.3k
介绍一些关于 CSS 渐变的小技巧~一、渐变通常至少需要两个颜色值通常情况下,渐变至少需要两个颜色。以linear-gradient线性渐变为例 {代码...} 示意效果如下需要注意的是,即使是纯色的,也就是两个颜色都是相同的,也需要都写上 {代码...} 示意效果如下如果只写一个颜色,就像这样 {代码...} 那么,这条语法将直接不合...
封面图

纯 CSS 实现带连接线的树形组件

7 月 4 日
阅读 7 分钟
4.5k
之前在这篇文章(CSS 实现树状结构目录)中实现了一个树状结构,效果是这样的整个实现没有用到任何 JavaScript,非常巧妙,有兴趣可以回顾一下。不过有时候还需要那种带连接线的样式,这样看起来层级会更清晰,就像这样这是如何实现的呢?一起来看看吧~一、details 和 summary简单回顾一下,整体结构需要利用到 details ...
封面图

深入了解CSS颜色混合函数color-mix

6 月 26 日
阅读 5 分钟
4.4k
所谓颜色混合,顾名思义,就是将两种颜色按照一定的比例混合起来,和调色板比较像。到目前为止,可以说是最强大、最实用的 CSS 颜色处理函数了,有了它,再也不需要用LESS、SASS等预处理工具了,还可以实现颜色动态更新,一起了解一下吧
封面图

如何理解 CSS step 函数中的 jump-* 关键词?

6 月 19 日
阅读 4 分钟
3.4k
欢迎关注我的公众号:前端侦探之前在这篇文章中:CSS 实现 Ant Design官网Logo彩蛋效果实现了一个鼠标 hover 效果,如下原理其实很简单,就是一个 CSS 动画,使用的是steps阶梯函数,不断改变background-position {代码...} 里面用到的小图标是这样一张图片(11个小图标)乍一看,动画好像非常完美,其实还是有一个小小...
封面图

为啥CSS不会支持双斜杠(//)注释?

6 月 12 日
阅读 4 分钟
3.8k
欢迎关注我的公众号:前端侦探众所周知,CSS 仅支持多行注释,也就是/**/注释 {代码...} 习惯了 SCSS或者LESS这些预处理器的同学,肯定非常希望有双斜杠注释 {代码...} 很明显这种写法要比/**/简洁的多,那么,为啥官方迟迟不支持双斜杠注释呢?下面就来探讨一下这个问题以及关于 CSS 语法的一些思考。一、语法冲突CSS ...
封面图

使用 CSS 渐变来实现波浪动画

6 月 5 日
阅读 4 分钟
5.4k
之前看到coco的这样一篇文章: 纯 CSS 实现波浪效果!,非常巧妙,通过改变border-radius和不断旋转实现的波浪效果,有兴趣的可以去研究一下。这次尝试一下使用 CSS 渐变来实现这样一个效果,还可以用在文字背景上,如下不需要混合模式,花几分钟一起看看吧一、波浪的原理首先可以分解一下波浪的原理,看似有点复杂,又...
封面图

原生popover终于来了!

5 月 29 日
阅读 5 分钟
2.3k
欢迎关注我的公众号:前端侦探提到 popover,相信大家都很熟悉,没错,就是组件库里经常见到的悬浮层(或者叫“气泡卡片”),比如 Ant Design现在,这个好用的特性终于在Chrome 114上正式支持了~下面花几分钟快速了解一下吧一、popover 属性其实这个名称以前叫做popup,后来才更改成了popover😂。popover是一个全局属性。...
封面图

CSS MASK 实现 loading动画

5 月 22 日
阅读 3 分钟
4.2k
欢迎关注我的公众号:前端侦探分享一个简单的loading效果,如下本案例来源于 Temani Afif on CodePen,略有修改仔细观察,主要有两个动画小球的运动背景的变化看似有点复杂,其实换个角度,实现要比想象的容易很多,也非常巧妙,一起看看吧一、整体思路如果按照正常的思路,可能会做两个动画,小球的动画还好,只是方位...
封面图

一个有意思的CSS图片hover效果

5 月 15 日
阅读 6 分钟
4k
欢迎关注我的公众号:前端侦探今天来分享一个比较有意思的图片 hover 效果,如下案例来源于[链接],略有修改仔细观察,这个效果主要有两个要点图片被切割成多个矩形每个矩形会旋转 90 度那么,这个是如何实现的呢?花几分钟时间一起看看吧一、分割的矩形假设HTML是这样的,很简单,就一个图片 {代码...} 然后,我们需要...
封面图

纯CSS渐变绘制 Chrome 图标

5 月 8 日
阅读 5 分钟
4k
欢迎关注我的公众号:前端侦探今天学习一下利用 CSS 渐变来绘制一个 Chrome 图标,如下如何仅使用渐变而不借助其他标签呢?一起看看如何实现的吧一、图形拆解乍一看好像没法直接通过渐变写出来,所以需要对图形进行简单的拆分。中间的圆圈没有什么难度,主要是周围的“扇形”,但是好像又不是完整的“扇形”,互相都有遮挡经...
封面图

了解一下全新的CSS动画合成属性animation-composition

4 月 23 日
阅读 4 分钟
4.4k
欢迎关注我的公众号:前端侦探介绍一个在Chrome 112上刚刚正式推出的 CSS 动画合成属性:animation-composition[链接]日后非常有用的一个特性,快来了解一下吧一、从 CSS 抛物线运动说起众所周知,抛物线运动是一个水平方向上匀速、垂直方向上匀加速的合成运动这个其实用 CSS 动画也很好实现,水平和垂直两个方向的位移...
封面图

你可能不需要JS!CSS实现一个计时器

4 月 17 日
阅读 5 分钟
5.2k
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起看看吧一、数字时钟的变化这个功能之前在这篇文章中有详细介绍,有兴趣的可以回顾一下还在使用定时器吗?CSS...
封面图

泪目了!CSS nth-child伪类终于支持了of关键词

4 月 10 日
阅读 3 分钟
1.3k
欢迎关注我的公众号:前端侦探介绍一个关于CSS :nth-child 选择器的新特性。不知道大家有没有碰到过这样的问题或者需求,从一个特殊的、不可更改的HTML结构中选择出你想要的元素,比如 {代码...} 请问,如何选择第2个.p2标签,如下如果不借助 JS,好像并不是很容易?今天一起来探讨这样一个问题一、nth-child 和 nth-of-...
封面图

别用图片了,CSS遮罩合成实现带圆角的环形loading动画

4 月 4 日
阅读 6 分钟
1.5k
欢迎关注我的公众号:前端侦探今天来用 CSS 实现一个带圆角的环形 loading 动画,效果是这样的先不考虑动画,其实就是这样一个图形那么,如何来绘制呢?下面花两分钟一起看看吧一、CSS实现思路首先,看到这环形逐渐消失的效果,也就是透明度渐变的效果,肯定要联想到锥形渐变conic-gradient() - CSS:层叠样式表 | MDN (...
封面图

突发奇想!借助CSS自定义彩色字体来实现多行文本展开收起

3 月 27 日
阅读 7 分钟
4.1k
之前写过这样一篇文章:CSS 实现多行文本“展开收起”,介绍了一些纯 CSS 实现多行文本展开收起的小技巧,特别是右下角的“展开收起”按钮,用到了浮动布局,非常巧妙,有兴趣的可以回顾一下。
封面图

CSS 锥形渐变只能画圆锥吗?conic-gradient 10大应用举例

3 月 20 日
阅读 7 分钟
3.9k
欢迎关注我的公众号:前端侦探提到锥形渐变conic-gradient(也有的称“角向渐变”),很多人都被这个名称给迷惑了,以为就是用来画圆锥的,比如 {代码...} 这样可以得到锥形的放射性图案当然,再进一步,可以绘制饼图 {代码...} 这个也比较容易想到,如下这类锥形都比较直观,除了这些,还能绘制哪些图案呢?下面就来介绍...
封面图

又出 bug 了 ?Safari 下文字和省略号重叠问题

3 月 13 日
阅读 4 分钟
6.7k
Safari不愧是新时代的 IE,各种 bug 层出不穷。比如有这样一个多行省略打点的布局 {代码...} 这样在文本超过三行的时候就会出现省略号没啥问题,和正常浏览器一样。但是这样有个问题,每行文字右端空隙太大,不美观,如下下面加上文本两端对齐 {代码...} 啪!bug 就出现了当然,如果设计不介意的话,不使用文本两端对齐...
封面图

CSS 颜色混合的N种方式

3 月 6 日
阅读 4 分钟
5.9k
如果出现一种颜色就定义一个变量,每次都要维护多个颜色变量太麻烦了。有没有办法只用一个颜色呢?在这里也就是,如何将一个颜色变浅一点?这样做的好处是,如果需要更换主题色,只用修改一个变量就行了,如下
封面图

你可能不知道的绝对定位

2 月 27 日
阅读 5 分钟
1.2k
其实,有些情况下是可以不需要偏移量的,不仅实现上更加简洁,适应性也更强,甚至还能实现加上偏移量反而实现不了的布局,一起看看吧,相信会有不一样的体会
封面图

CSS 实现超过固定高度后出现展开折叠按钮

2 月 20 日
阅读 5 分钟
1.2k
传统的思路肯定是通过JS去动态计算容器的高度,但这样就涉及到加载时机的问题,获取早了可能元素还没渲染好,晚了又会有明显的卡顿感,或者会引起页面的闪烁。
封面图