用 CSS 设计漂亮的阴影,css阴影和原理,所有知识点多图动画演示

以我的拙见,好的网站和 Web 应用程序应具有“真实”品质,实现这种效果涉及很多因素,但阴影是一个重要因素。

但是,当我浏览互联网时,各大网站大多数阴影都很虚假,布局盒子被模糊的灰色框覆盖,看起来并不像阴影。

本文讨论的就是如何将常见的阴影转换为美丽的、栩栩如生的阴影:

在这里插入图片描述

阅读受众

  • 本文适用于有一些 CSS 基础知识的开发人员。

1.为什么要使用阴影?

阴影意味着海拔,更大的阴影意味着更高的海拔。
如果我们有策略地使用阴影,我们可以创造深度视觉,就好像页面上的元素在不同层次上,并且漂浮在背景之上。

例子:

在这里插入图片描述

好处

  • 构建的应用程序具有触感和真实感,就好像浏览器是进入另一个世界的

  • 还有一个好处,通过使用不同的阴影,给人一种对话框比标题离我们更近的印象。我们的注意力往往会被吸引到离我们最近的元素上,因此通过提升对话框,我们更有可能让用户首先关注它。我们可以使用海拔作为引导注意力的工具。

使用阴影的目的:要么增加特定元素的显着性,要么让应用程序感觉更触手可及、栩栩如生。

2.动画讲述原理

2.1创建一致的阴影

当我想为一个元素添加阴影时,我会添加`box-shadow并修改值,直到得到我喜欢结果。

问题是:如果孤立地创建每个阴影,你会得到一堆不协调的阴影。如果我们的目标是创造深度视觉,我们需要每个阴影都相互配合。否则,他们看起来就是一堆垃圾:
在这里插入图片描述

2.2投影角度

在自然界中,阴影是光投射出来的。阴影的方向取决于灯光的位置:
悬停、聚焦或点击以进行交互

一般来说,我们应该为页面上的所有元素确定一个单一的光源,通常位于左上方:

[图片上传失败...(image-b5d8a-1638417220609)]

如果 CSS 有一个照明系统,我们可以为所有元素指定同一个光源,可惜CSS 没有这样的东西。

我们通过指定水平偏移和垂直偏移来移动阴影。例如,在上图中,生成的阴影具有 4px 的垂直偏移和 2px 的水平偏移。

这是内聚阴影的第一个技巧:页面上的每个阴影都应该共享相同的比例这将使每个元素看起来都来自同一个光源。

为啥所有元素比例要一样?

为什么我建议对每个元素使用相同的比例,难道每个元素相对于光源的位置都是一样的吗?

  • 如果光源就在附近,每个元素相对于光源的角度差异很大。
  • 但是如果光源很远(比如太阳),所有元素的阴影角度都是一样的。

为了便利性考虑,我们一般使用相同的角度,因为计算每个元素的角度很麻烦。

2.3海拔

如何创造一种深度视觉?

查看演示,注意值是如何变化的:

在这里插入图片描述

前两个数字 - 水平和垂直偏移 - 一起缩放。垂直偏移始终是水平偏移的 2 倍,这里使用了相同的比例。

当卡片升高时,有两个变化:

  • 模糊半径变

  • 阴影变得不透明

从算法来讲,这里面又复杂的数学算法。
我们可以从人类常识来理解这件事:

如果您在光线充足的房间内,请将手按在桌子上,然后慢慢抬起。 注意阴影是如何变化的:它远离你的手(更大的偏移),它变得更模糊(更大的模糊半径),它开始逐渐消失(更低的不透明度)。

因为我们生活中有很多经验,所以我们不需要记住一堆规则。在设计阴影时,我们只需要运用我们的常识

2.4总结:

  1. 页面上的每个元素都应该由相同的全局光源照亮。

  2. box-shadow属性使用水平和垂直偏移表示光源的位置。为确保一致性,每个阴影应使用这两个数字之间的相同比例。

  3. 随着元素离用户越来越近,偏移量增加,模糊半径增加,阴影的不透明度降低。

  4. 可以使用我们的生活常识跳过其中的一些计算。

3.实战技巧

3.1分层

Blender 等现代 3D 插图工具可以使用光线跟踪技术产生逼真的阴影和照明。
一个看起来很害怕的鬼的 3D 渲染

在光线追踪中,数百束光从相机中射出,从场景的表面反射数百次。这是一种计算成本很高的技术​​;生成单个图像可能需要几分钟到几小时!

网络用户没有那种耐心,所以box-shadow算法要简陋得多,它只实现了基本的模糊算法。

因此,box-shadow阴影永远没有照片逼真,但我们可以巧妙地优化:分层

我们不使用单个 box-shadow,而是把多个阴影叠加起来,阴影之间的偏移量和半径略有不同:
在这里插入图片描述

Philipp Brumm 一个很棒的生成分层阴影工具:shadows.brumm.af
在这里插入图片描述

性能权衡

不可否认,分层阴影是美丽的,但它们确实需要付出代价。如果我们叠加 5 个阴影分层,我们的设备必须多做 5 倍的工作!

在好的硬件上不是什么大问题,但会减慢在较旧的廉价移动设备上的渲染速度。

3.2颜色匹配阴影

到目前为止,我们所有的阴影都使用了半透明的黑色,比如hsl(0deg 0% 0% / 0.4)。这实际上并不理想。

当我们在背景颜色上叠加黑色时,不仅会使它变暗,也会使其饱和度降低很多。

比较这两个框:
在这里插入图片描述
左边的盒子使用了透明的黑色。右侧的框匹配颜色的色调和饱和度,但降低了亮度。我们得到了一个更有活力的盒子!

当我们为阴影使用较深的颜色时,会发生类似的效果:
在这里插入图片描述

但是,左边的饱和度太低,右边的饱和度不够,感觉更像是光晕而不是阴影!

实验一下:
在这里插入图片描述

通过匹配色调并降低饱和度/亮度,我们可以创建一个真实的阴影,没有那种“褪色”的灰色质量。

饱和度和亮度的关系

如果您熟悉hsl颜色格式,就会知道饱和度和亮度是独立控制的。

那么,降低亮度似乎也对饱和度有影响是不是有点奇怪?

这个问题以后有时间给大家细讲。

3.3总结

  1. 使用分层创建更逼真的阴影。

  2. 调整颜色以防止“褪色”灰色阴影。

4.最后讲一下:filter: drop-shadow

在本文中,我们一直在使用box-shadow属性。box-shadow是一个很好的全面工具,但它不是我们在 CSS 中唯一的阴影选项。😮

看看filter: drop-shadow
在这里插入图片描述

语法几乎相同,但它产生的阴影不同。这是因为filter属性实际上是SVG过滤器的 CSS 挂钩。drop-shadow使用 SVG 高斯模糊,这是一种与box-shadow`不同的模糊算法。

两者之间还有一些其区别,drop-shadow有一个超能力:它能勾勒出元素的形状。

例如,如果我们在具有透明和不透明像素的图像上使用它,阴影将只对不透明像素起作用,也就是能勾勒出物体的轮廓:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
请大喊一句:EDG NB!

这不仅适用于图像,它也适用于 HTML 元素!

结果

希望能启发您,给您一些帮助!

  • 33
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是不会选择做一个普通人的

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值