搜索

浅谈阴影

在我们生活中遇到的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);
}

版权属于:skyxiaotao
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
0
查看目录

目录

来自 《更好看的Css阴影设计》
评论

酚小酞

自律已有成果,勤练带来力量