随笔分类 -  滤镜

摘要:假设,我们有这样一张 Gif 图: 利用 CSS,我们尝试来搞一些事情。 图片的 Glitch Art 风 在这篇文章中 --CSS 故障艺术,我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。有点类似于抖音的 LOGO。 像是这样: 假设,我们有这样一张图: 只需要一个标签即可 <div clas 阅读全文
posted @ 2022-12-19 10:40 ChokCoco 阅读(3374) 评论(29) 推荐(53) 编辑
摘要:大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样: 当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。 像是这样,我们仅仅需要给 HTML 添加一个统一的滤镜即可: html { filter: grayscal 阅读全文
posted @ 2022-12-02 10:29 ChokCoco 阅读(3550) 评论(4) 推荐(38) 编辑
摘要:本文将介绍一种巧用 background 配合 backdrop- filter 来构建有趣的透视背景效果的方式。 本技巧源自于一名群友的提问,如何构建如 ElementUI 文档的一种顶栏背景特效,看看效果: 仔细看,在页面的的滚动过程中,顶栏的背景不是白色的,也不是毛玻璃效果,而是能够将背景颗粒 阅读全文
posted @ 2022-08-04 10:26 ChokCoco 阅读(2898) 评论(1) 推荐(11) 编辑
摘要:本文,将另辟蹊径,介绍一种使用滤镜去构建圆角的独特方式。 首先,我们来看这样一个图形: 一个矩形,没什么特别的,代码如下: div { width: 200px; height: 40px; background-color: #000; } 如果,我们现在需要给这个矩形的两端加上圆角,像是这样,该 阅读全文
posted @ 2022-07-25 10:30 ChokCoco 阅读(1776) 评论(2) 推荐(8) 编辑
摘要:不借助 Javascript,利用 SVG 快速构建马赛克效果之前在公众号转发了好友 Vajoy 的一篇文章 -- 巧用 CSS 把图片马赛克风格化。 核心是利用了 CSS 中一个很有意思的属性 -- image-rendering,它可以用于设置图像缩放算法。 何为 image-rendering? CSS 属性 image-rendering 用于设置图像 阅读全文
posted @ 2022-04-12 10:50 ChokCoco 阅读(1233) 评论(1) 推荐(4) 编辑
摘要:最近,有同学询问,如何使用 CSS 实现如下效果: 看起来是个很有意思的动效。 仔细思考一下,要想实现这类效果,其实用到的核心属性只有一个 -- background-clip: text。 有意思的 background-clip: text background-clip: text 之前也提到 阅读全文
posted @ 2022-04-07 09:55 ChokCoco 阅读(2893) 评论(8) 推荐(38) 编辑
摘要:最近,我们内部的一个低代码平台完工上线,它的首页大概是这样子(数据脱敏): 当然,这个不是项目不是本文的重点。主要看看这个页面的背景,一个磨砂(毛玻璃)质感效果的渐变背景图,看上去是比较高级的。 剥离掉页面的内容元素,只剩下背景的话,大概是这样: 一开始是打算切图实现的,但是仔细一想,这个效果使用 阅读全文
posted @ 2022-01-26 10:11 ChokCoco 阅读(5530) 评论(11) 推荐(39) 编辑
摘要:背景 某日,群友们在群里抛出这样一个问题,如何使用 CSS 实现如下的布局: 在 CSS 世界中,如果只是下述这种效果,还是非常容易实现的: 一旦涉及到圆角或者波浪效果,难度就会提升很多。 实现这种连续平滑的曲线其实是比较麻烦的,当然,也不是完全没有办法。本文,就会带大家看看,使用 CSS 实现上述 阅读全文
posted @ 2022-01-07 10:12 ChokCoco 阅读(5883) 评论(4) 推荐(13) 编辑

点击右上角即可分享
微信分享提示