css矩形凹陷效果_被低估的CSS滤镜:drop-shadow
如果你熟悉CSS,则可能了解 box-shadow
属性。但是你知道有一个CSS滤镜 drop-shadow
可以做类似的事情吗?就像 box-shadow
一样,我们可以输入x-offset、y-offset、模糊半径和颜色的值。
.my-element {filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
}
与 box-shadow
不同,它不需要 spread
参数(稍后会详细介绍)。
为什么drop-shadow很有用?
如果我们有 box-shadow
,为什么还需要 drop-shadow
呢?
非矩形形状
使用 drop-shadow
可以让我们给一个元素添加阴影,这个阴影并不对应于它的边界框,,而是使用该元素的Alpha蒙版。例如,我们可以在透明的PNG或SVG徽标中添加投影。
img {filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
}
我们可以比较 box-shadow
和 drop-shadow
的效果:
使用 box-shadow
为我们提供了一个矩形阴影,即使元素没有背景,而 drop-shadow
则为图像的非透明部分创建阴影。
Demo
无论图像是内联在HTML中(作为内联SVG,还是在 <img>
标签中)或CSS背景图像,这都将起作用,这意味着我们还可以为渐变背景添加阴影。这些形状是通过背景渐变创建的,并应用了 drop-shadow
滤镜:
<div class="grad"></div>
<div class="grad"></div>
<div class="grad"></div>
.grad {width: 15rem;height: 15rem;margin: 1rem;background: linear-gradient(45deg, deeppink 50%, transparent 50%);filter: drop-shadow(0.6rem 0.6rem 1rem rgba(20, 20, 180, 0.8));
}.grad:nth-child(2) {background: radial-gradient(circle at center, deeppink 50%, transparent 50%);
}.grad:nth-child(3) {background: linear-gradient(45deg, transparent 60%, deeppink 60%), linear-gradient(135deg, transparent 60%, deeppink 60%);
}
效果
剪裁元素
如果我们使用 clip-path
或 mask-image
修剪或遮罩元素,则我们添加的任何 box-shadow
也会被修剪——因此,如果它在修剪区域之外,则将不可见。
但我们可以通过在元素的父元素上应用 drop-shadow
滤镜,在剪切的元素上创建一个阴影。相当酷!
parent-element {filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
}.clipped-element {clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, , 50% 50%))
}
drop-shadow
滤镜应用于剪切形状的父元素。
查看demo
分组元素
有时候,我需要构建由重叠元素组成的组件,这本身就需要投射阴影。
如果我们在整个组件上添加 box-shadow
,则会留下奇怪的空白区域:
如果我们给每个元素单独添加一个 box-shadow
,那么每个元素都会投下自己的阴影,这可能不是我们想要的效果。我们需要采用一些巧妙的CSS来隐藏那些元素重叠的阴影。
但是通过在整个组件上使用 drop-shadow
,我们可以准确地在我们想要的地方得到阴影,而不需要求助于奇技淫巧。
查看demo
多重投射阴影
这是一件有趣的事情:你可以使用多个阴影以获得一些很酷的效果!查看以下演示。
<div class="parent-element"><div class="clipped-element"></div>
</div>
.parent-element {filter: drop-shadow(10rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(-10rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(20rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(-20rem 0 0 rgba(0, 30, 200, 0.8));transition: filter 600ms;
}.parent-element:hover {filter: drop-shadow(0 0 0 rgba(0, 30, 200, 0.8));
}.clipped-element {width: 20rem;height: 20rem;margin: 0 auto;background-color: deeppink;clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%)
}
效果:
附带说明:过渡和动画CSS滤镜的性能并不是特别好,在实际项目中可能最好不要同时制作这么多滤镜的动画。不过这个只是为了好玩!
局限性
如上所述, drop-shadow
不包含 spread
参数。这意味着我们目前无法使用它来创建轮廓效果,我认为这将非常有用。例如,如果它被支持,我们可以使用 drop-shadow
在渐变的背景上创建一个轮廓,就像我们在其他元素上使用 box-shadow
或 text-shadow
一样。
陷阱
即使给定相同的参数, drop-shadow
也无法渲染与 box-shadow
完全相同的阴影效果。我怀疑这与CSS过滤器是基于SVG过滤器原语有关。无论哪种情况,你都可能需要通过稍微调整 drop-shadow
值来补偿差异。
浏览器支持
所有现代浏览器均支持CSS过滤器(包括 drop-shadow
)。我倾向于将其作为渐进式增强,而不需要对旧版浏览器进行变通,因为它通常不会对用户体验造成任何重大影响。但如果你确实需要为旧版浏览器提供替代性的样式,你可以使用特性查询来实现,并使用 box-shadow
回退。
.my-element > * {box-shadow: 0 0.2rem 0.25rem rgba(0, 0, 0, 0.2);
}@supports (filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2))) {.my-element {filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));}.my-element > * {box-shadow: none;}
}
总结
尽管有很好的支持,但 drop-shadow
滤镜仍然没有得到充分的利用。我希望这篇文章强调了一些使用 box-shadow的
情况,也许你可以在你的下一个项目中使用它!
原文:https://css-irl.info/drop-shadow-the-underrated-css-filter/
翻译:公众号《前端全栈开发者》
css矩形凹陷效果_被低估的CSS滤镜:drop-shadow相关推荐
- css 跳动的心_如何用纯CSS为您的情人打造一颗跳动的心
css 跳动的心 Each year on February 14th, many people exchange cards, candies, gifts or flowers with thei ...
- css 点击效果_使用CSS实现逼真的水波纹点击效果
这篇文章特别介绍如何使用CSS来完成水波纹的效果. div的层层叠叠 虽然webkit具有遮罩的能力(webkit mask),不过webkit虽然强大,但在跨浏览器上总是它的罩门,况且在性能上也是往 ...
- android 按钮点击动画效果_如何用纯css打造类materialUI的按钮点击动画并封装成react组件...
作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vu ...
- java做出毛玻璃效果_手把手教你CSS如何实现毛玻璃效果
今天在做一个登录界面的时候,由于视觉给的页面背景图片太鲜艳亮眼,导致页面中间的登录表单框很不显眼,效果很差.就想到了做成毛玻璃的效果,现在分享出来,大家一起看看吧. 页面结构如下: 由于之前用过CSS ...
- 纯css实现手风琴效果_创建纯CSS手风琴的4种方法
内容手风琴是一种有用的设计模式. 您可以将它们用于许多不同的事物:用于菜单,列表,图像,文章摘录,文本片段甚至视频 那里的大多数手风琴都依赖JavaScript,主要是jQuery ,但是由于高级CS ...
- css模糊遮罩效果_如何实现遮罩模糊样式?
如下图,渐变模糊 用linear-gradient似乎不能完美实现 background: -webkit-linear-gradient(left, rgba(255, 255, 255, .8), ...
- css修改span位置_简历完善,CSS布局与定位,笔记
1.大背景图 用工具找到原网页的大背景图, 找到图片下载到桌面,再简历目录里新建一个img目录放到里面,也可以在wall haven.找自己喜欢的壁纸. css里写上高度和图片地址,不到必要是不要写高 ...
- css背景图片高斯模糊_如何将网页CSS背景图高斯模糊且全屏显示
以Path为代表的,展示了这种背景图模糊并全屏显示的方法,而且会根据屏幕分辨率放大缩小. 这种效果应该怎么实现呢? 高斯模糊是PS.FW图片处理工具搞的. 全屏显示的方法 1:使用CSS .bg { ...
- css 鼠标悬浮样式_【技术】CSS设置链接鼠标(失效)不能点样式
css关键代码: <style type="text/css">.add-link{color: #358753;}.link-notallowd{opacity: . ...
最新文章
- codevs 2075 yh女朋友的危机
- MySQL战士database_linux环境中mysql数据库的安装
- 算法----删除链表中的节点(Java)
- 联想利泰的一道做出来就给月薪7K的面试题--交通灯管理系统
- InvokeHelper,让跨线程访问/修改主界面控件不再麻烦(转)
- Java垃圾回收(4)
- (转)android WebView loadData不能解析(找不到网页)
- ETL异构数据源Datax_日期增量同步_13
- Java笔记-String.format的使用(可用于格式化字符串)
- linux history原理,linux history(命令历史)
- 将2^n (n=1000000) 转化为10进制输出
- 表示数值的字符串 剑指offer
- java 前端及后台轮询方法总结
- windows系统部署docker文档
- 为什么计算机能读懂 1 和 0 ?
- 计算机考试多少个小时,考驾照科一电脑刷几个小时
- 【ubuntu使用排坑】fsckd-cancel-msg:Press Ctrl+C to cancel all filesystem checks
- 菜刀、冰蝎、蚁剑、哥斯拉
- 计算机用户管理权限有哪些,Windows系统管理员账户和普通账户的详细权限区别有哪些?...
- 回合制游戏中的活动需要注意的