【教你】CSS实现可配置阴影模糊效果

【教你】CSS实现可配置阴影模糊效果

Jym好😘,我是珑墨,今天给大家分享CSS实现可配置阴影模糊效果,嘎嘎的😍,看下面。

设置元素阴影在CSS中相当简单:声明属性,设置阴影偏移量,定义阴影度,并为其提供颜色。这是为原本扁平化的设计增加深度的好方法!本文从阴影中汲取灵感,只是用模糊效果代替了阴影。box-shadow``backdrop-filter

想象一下,对于模糊效果,一个元素的背景在该元素周围模糊,逐渐降低模糊的强度。box-shadow``box-shadow

如果我们有一个属性,或者某种关键字,我们可以设置阴影的方式,那就太奈斯了。不幸的是,CSS 没有这样的属性。但是由于 CSS 很灵活,我们仍然可以通过组合一些 CSS 功能来获得效果并对其进行破解。box-blur``blur``box-shadow``inset

给jym先上码子,可拖拽圆形移动来感觉下!👀
code.juejin.cn/pen/7338667…

从现在开始,我将向你们展示的是我创造这种效果的思考过程。有时,我发现知道即将发生的事情比蜿蜒曲折的叙述更容易。所以,对于那些像我一样想直接进入这个过程的人来说,这就是我的方法。

一、从before开始

该效果的处理方式是将其应用于某个元素的伪元素,例如某些弹出窗口/对话框/弹出窗口/工具提示。这些是这种效应的常见“目标”。我认为在这里使用伪元素是一个很好的方法,因为这意味着我们可以在技术上将样式范围限定为伪元素,并在没有任何 HTML 更改的情况下重新利用对其他元素的影响。::before

你可以为元素提供一个类,无论您喜欢什么尺寸,在其中插入内容和其他子元素,或者使用完全不同的元素。

二、定位伪元素

我们希望伪元素占据我们用于此特定演示的元素的整个区域。我们不仅希望它覆盖整个区域,甚至溢它,因为这建立了可见区域,它保持了模糊效果,所以它会向外延伸。::before``<div>

::before {  
  content: '';
  /* 确保父元素至少处于包含伪元素的相对位置。 */
  position: absolute;
  /* 模糊大小应该小于“0”,这样它就会向外延伸。 */
  inset: -100px;
  /* 这个图层位于父元素和页面背景之间。*/
  /* 确保这个值比父元素的“z-index”低1。 */
  z-index: -1;
}

代码注释阐明了关键部分。必须为该属性设置一个空字符串,以便content[::before],然后我们通过给它绝对定位来将其从文档流中取出。这允许我们确定元素的位置,并最终像在属性上一样设置模糊效果方向——只是我们用来控制它的大小。我们想要一个值,该值越低,效果越远。inset``box-shadow``inset``inset

到目前为止,我们已经为这种效果奠定了基础。

三、使用透明渐变

从技术上讲,渐变是由浏览器生成的图像,可以用作 CSS 蒙版来隐藏元素的某些部分以创建各种形状。

当涉及到渐变遮罩时,透明度是关键。透明度允许我们逐渐隐藏元素的某些部分,从而产生淡入或淡出的错觉。

在这种情况下,这当然是完美的,因为我们希望效果更强,更接近物体,并且随着物体越来越远,强度会逐渐减弱。

我们将使用两个渐变:一个是水平的,另一个是垂直的。我之所以选择这条路线,是因为它模仿了一个粗糙的矩形形状,向边缘逐渐淡出。

正如我所说,透明度是关键。两个渐变都开始,然后过渡到直到结束之前,它们回到那里淡出。请记住,这些渐变是蒙版而不是背景图像,因此它们是在属性上声明的,该属性控制应呈现的像素及其不透明度。transparent``black``transparent``mask

mask:
  linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
  linear-gradient(to left, transparent 0%, black 25% 75%, transparent 100%);
  • 垂直梯度 (to top) 创建从底部的透明到中间的黑色,然后又回到顶部的透明的淡入淡出。
  • 水平梯度 (to left) 产生从右侧的透明到中间的黑色,然后又变回左侧的透明的淡入淡出。

这种双梯度方法对黑色区域进行定位,使它们合并,从而创建圆形形状的粗略基线,该基线将在下一步中进行细化。该属性最好声明为先加前缀,然后不加前缀,以涵盖更多浏览器的支持:遮罩

-webkit-mask:
  linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
  linear-gradient(to left, transparent 0%, black 25% 75%, transparent 100%);
mask:
  linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
  linear-gradient(to left, transparent 0%, black 25% 75%, transparent 100%);

四、使用 mask-composite 属性进行优化

mask-composite属性是 CSS 遮罩模块的一部分,支持对遮罩内容的混合进行像素级控制,从而实现复杂的合成。

source-in此属性的值对于我们所追求的效果非常有用,因为它告诉浏览器只保留蒙版的重叠区域,因此只有包含两个(上面提到的)渐变的像素才会被渲染。这将锁定一个矩形形状,然后可以将其应用于任何没有或中等弯曲角的 DOM 元素。border-radius

五、逐渐模糊背景

现在我们有了一个可以使用的基本壳子,我们需要做的就是使用它。CSS 属性可以使用以下函数模糊呈现在元素“后面”的任何内容:backdrop-filter``blur()

::before {
 backdrop-filter: blur(10px);
}

该值越大,模糊越强烈。我是任意使用的。事实上,我们可以稍后对这些东西进行变换,以使实现更加灵活且易于配置。10px

Safari浏览器需要一个前缀的兼容才能起效:backdrop-filter

::before {
 -webkit-backdrop-filter: blur(10px); /* Safari */
  backdrop-filter: blur(10px);
}

六、设置阴影

我认为,添加一个轻微的半不透明的黑色来覆盖模糊区域,会给效果带来一点额外的深度。唯一的问题是,你需要将其添加到元素本身中,而不是将其添加到伪元素中:box-shadow``::before

div {
  box-shadow: 0 0 40px #00000099;
}

不过,这完全是可选的。

七、最终css码子如下

最终效果如图所示:

【教你】CSS实现可配置阴影模糊效果
将上面所有内容组合在一起,CSS码子如下。

/* 可以在它所应用的元素的::前的pseudo上设置。 */
::before {    
  content: '';
  /* 这个图层位于一些元素和它的背景之间。 */
  position: absolute;
  /* 不影响容器的内容。 */
  z-index: -1;
  /* 模糊大小应该小于“0”,这样它就会向外延伸。 */
  inset: -100px;
  /* 模糊效果 */
  -webkit-backdrop-filter: blur(10px); /* Required for safari */
  backdrop-filter: blur(10px);
  
/*蒙版淡化模糊效果,所以它变得更弱。* /  
/*朝向边缘,远离容器盒子。* /  
/*(填充颜色是无关的,所以使用“红色”,因为它是最短的颜色名称。)*/
  mask: 
    linear-gradient(
      to top, 
      transparent 0%,
      red 100px calc(100% - 100px),
      transparent 100%), 
    linear-gradient(
      to left,
      transparent 0%,
      red 100px calc(100% - 100px),
      transparent 100%);
  
 /*将合并上面的蒙版,所以只有重叠的像素被渲染。* /
 /*创建了一个淡出蒙版的错觉。* /
  mask-composite: intersect;
  -webkit-mask-composite: source-in; /* Required for Safari */
}

好了,今天就分享到这里吧。
更多css大法,请看juejin.cn/column/7107…

感谢jym浏览本文,共同进步🤞,若有更好的观点,欢迎评论区讨论哈🌹。

原文链接:https://juejin.cn/post/7338628873134276660 作者:珑墨

(0)
上一篇 2024年2月24日 上午10:17
下一篇 2024年2月24日 上午10:27

相关推荐

发表评论

登录后才能评论