CSS 滤镜技巧与细节

tinylcy 发布于2019-04-23 13:34 / 2023人阅读

摘要：简单来说，滤镜就是提供类似的图形特效，像模糊，锐化或元素变色等功能。常用用法既然是标题是你所不知道的技巧与细节，那么比较常用的一些用法就不再赘述，通常我们见得比较多的滤镜用法有使用生成毛玻璃效果使用生成整体阴影效果使用生成透明度

本文主要介绍 CSS 滤镜的不常用用法，希望能给读者带来一些干货！

注意：ie不兼容

本文所描述的滤镜，指的是 CSS3 出来后的滤镜，不是 IE 系列时代的滤镜，话不多说，直接开车，语法如下：

{
    filter: blur(5px);
    filter: brightness(0.4);
    filter: contrast(200%);
    filter: drop-shadow(16px 16px 20px blue);
    filter: grayscale(50%);
    filter: hue-rotate(90deg);
    filter: invert(75%);
    filter: opacity(25%);
    filter: saturate(30%);
    filter: sepia(60%);
 
    /* Apply multiple filters */
    filter: contrast(175%) brightness(3%);
 
    /* Global values */
    filter: inherit;
    filter: initial;
    filter: unset;
}

基本用法

先简单看看几种滤镜的效果

你可以通过 hover 取消滤镜，观察该滤镜的效果。

简单来说，CSS 滤镜就是提供类似 PS 的图形特效，像模糊，锐化或元素变色等功能。通常被用于调整图片，背景和边界的渲染。

常用用法

既然是标题是你所不知道的技巧与细节，那么比较常用的一些用法就不再赘述，通常我们见得比较多的 CSS 滤镜用法有：

使用 filter: blur() 生成毛玻璃效果
使用 filter: drop-shadow() 生成整体阴影效果
使用 filter: opacity() 生成透明度

云服务器 GPU云服务器巧用CSS的MASK滤镜 css技巧使用心得与技巧 css与html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2045.html

CSS 火焰？不在话下

摘要：今天的小技巧是使用纯生成火焰，逼真一点的火焰。如上图，整个蜡烛的骨架，除去火焰的部分很简单，掠过不讲。利用上述，我们要先生成一个类似火焰形状的三角形。正文从下面开始。今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。嗯，长什么样子？在 CodePen 上输入关键字 CSS Fire，能找到这样的： showImg(https://segmentfault.com/img/...

olle 2019-08-30 15:43 评论0 收藏0
CSS 火焰？不在话下

摘要：下图是我鼓捣到另外一个小，当到元素的时候，产生火焰效果嗯，这些其实都是对滤镜及混合模式的一些搭配运用。主要几个属性默认大家已经掌握了大概，阅读后可以自行去了解补充更多细节更多精彩技术文章汇总在我的，持续更新，欢迎点个订阅收藏。正文从下面开始。今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。嗯，长什么样子？在 CodePen 上输入关键字 CSS Fire，能找到这样的：或者...

Cciradih 2019-04-23 11:43 评论0 收藏0
你所不知道的 CSS 阴影技巧与细节

摘要：本文的题目是阴影技巧与细节。立体投影好，我们继续。下一个主题是立体投影。但是，使用它们生成的阴影通常只能是单色或者同色系的。你这么说，难道还可以生成渐变色的阴影不成额，当然不行。关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于 box-shadow 的用法。最近一个新的项目，CSS-Inspira...

supernavy 2019-08-29 17:12 评论0 收藏0
你所不知道的 CSS 阴影技巧与细节

摘要：本文的题目是阴影技巧与细节。下一个主题是立体投影。正常而言，我们使用来生成文字阴影，像这样嗯，挺好的，就是不够立体。但是，使用它们生成的阴影通常只能是单色或者同色系的。你这么说，难道还可以生成渐变色的阴影不成额，当然不行。关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于 box-shadow 的用法。最近...

stormzhang 2019-04-23 13:13 评论0 收藏0
不可思议的纯 CSS 实现鼠标跟随效果

摘要：原理以上面的为例子，要使用实现鼠标跟随，最重要的一点就是如何实时监测到当前鼠标处于何处，其实很多效果，都离不开障眼法二字。直接进入正题，鼠标跟随，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样： showImg(https://segmentfault.com/img/remote/1460000018405114); 通常而言，CSS 负责表现，JavaScr...

sshe 2019-08-30 15:56 评论0 收藏0