浅谈阴影
在我们生活中遇到的UI经常会出现阴影,阴影给我们视觉上带来立体的效果,创造舒适的观感,但是嘞,在我们设计Css阴影的时候不仅仅是添加一个box-shadow
这么简单,在不同的背景以及环境下使用阴影也是有很多讲究滴。
box-shadow: offset-x offset-y blur-radius spread color inset
分别表示:水平阴影偏移、垂直阴影偏移、模糊距离、阴影尺寸、阴影颜色、内部阴影。
增加透明度,提高模糊度
我们来创造一个box-shadow
看看效果,可见它塑料感拉满,看着十分突兀
width:100px;
height:100px;
background-color:#D7FFF1;
border-radius: 8px;
margin: 0 auto;
box-shadow:5px 5px 5px #222222;
我们不妨让阴影居中,接下来增大阴影模糊度,然后用rgba
代替#
增加阴影的透明度,嗯,计划通
width:100px;
height:100px;
background-color:#D7FFF1;
border-radius: 8px;
margin: 0 auto;
box-shadow:0 5px 10px rgba(0, 0, 0, 0.3);
使用相同颜色
当我们遇到一些深色的图标的时候,在背景的影响下直接使用阴影可能会显得很脏,我们不妨试试让阴影颜色和background-color
一样,会让图标显得更加通透
在线RGB颜色转换 - RGBA转换16进制
高斯模糊
例子
先定义div
,接着设计图片的高度背景居中等参数
HTML
<div class="parent">
<div class="Shadow ft"></div>
</div>
CSS
.ft {
margin: 0 auto;
width: 200px;
height: 200px;
border-radius: 20px;
background-image: url("https://s2.loli.net/2022/04/24/zOYeRX6EUq41Vhs.jpg") ;
background-repeat: no-repeat;
background-size: contain;
}
然后我们开始设置阴影参数,主要部分在filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.3)) blur(10px) opacity(.8);
关于drop-shadow
我不赘述了,blur
模糊度以及后面的opacity
设置不透明度,你也可以加入brightness
来调整亮度来适应你的背景,这样可以达到更好朵效果
阴影部分
.Shadow {
position: relative;
}
.Shadow::after {
content: "";
z-index: -1;
top:30%;
width: 100%;
height: 80%;
position: absolute;
background: inherit;
border-radius: 20px;
background-position: center center;
filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.3)) blur(10px) opacity(.8);
}