用 CSS 设计漂亮的阴影，css阴影和原理，所有知识点多图动画演示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用 CSS 设计漂亮的阴影，css阴影和原理，所有知识点多图动画演示相关的知识，希望对你有一定的参考价值。
参考技术A以我的拙见，好的网站和 Web 应用程序应具有“真实”品质，实现这种效果涉及很多因素，但阴影是一个重要因素。
但是，当我浏览互联网时，各大网站大多数阴影都很虚假，布局盒子被模糊的灰色框覆盖，看起来并不像阴影。
本文讨论的就是如何将常见的阴影转换为美丽的、栩栩如生的阴影：
阅读受众
阴影意味着海拔，更大的阴影意味着更高的海拔。
如果我们有策略地使用阴影，我们可以创造深度视觉，就好像页面上的元素在不同层次上，并且漂浮在背景之上。
例子：
使用阴影的目的：要么增加特定元素的显着性，要么让应用程序感觉更触手可及、栩栩如生。
当我想为一个元素添加阴影时，我会添加`box-shadow并修改值，直到得到我喜欢结果。
问题是： 如果孤立地创建每个阴影，你会得到一堆不协调的阴影。如果我们的目标是创造深度视觉，我们需要每个阴影都相互配合。否则，他们看起来就是一堆垃圾：
在自然界中，阴影是光投射出来的。阴影的方向取决于灯光的位置：
一般来说，我们应该为页面上的所有元素确定一个单一的光源，通常位于左上方：
如果 CSS 有一个照明系统，我们可以为所有元素指定同一个光源，可惜CSS 没有这样的东西。
我们通过指定水平偏移和垂直偏移来移动阴影。例如，在上图中，生成的阴影具有 4px 的垂直偏移和 2px 的水平偏移。
这是内聚阴影的第一个技巧： 页面上的每个阴影都应该共享相同的比例 。 这将使每个元素看起来都来自同一个光源。
为啥所有元素比例要一样？
为什么我建议对每个元素使用相同的比例，难道每个元素相对于光源的位置都是一样的吗？
为了便利性考虑，我们一般使用相同的角度，因为计算每个元素的角度很麻烦。
如何创造一种深度视觉？
查看演示，注意值是如何变化的：
前两个数字 - 水平和垂直偏移 - 一起缩放。垂直偏移始终是水平偏移的 2 倍，这里使用了相同的比例。
当卡片升高时，有两个变化：
从算法来讲，这里面又复杂的数学算法。
我们可以从人类常识来理解这件事：
如果您在光线充足的房间内，请将手按在桌子上，然后慢慢抬起。 注意阴影是如何变化的：它远离你的手（更大的偏移），它变得更模糊（更大的模糊半径），它开始逐渐消失（更低的不透明度）。
因为我们生活中有很多经验，所以我们不需要记住一堆规则。在设计阴影时，我们只需要 运用我们的常识 。
Blender 等现代 3D 插图工具可以使用 光线跟踪 技术产生逼真的阴影和照明。
在光线追踪中，数百束光从相机中射出，从场景的表面反射数百次。这是一种计算成本很高的技术；生成单个图像可能需要几分钟到几小时！
网络用户没有那种耐心，所以 box-shadow 算法要简陋得多，它只实现了基本的模糊算法。
因此， box-shadow 阴影永远没有照片逼真，但我们可以巧妙地优化： 分层 。
我们不使用单个 box-shadow，而是把多个阴影叠加起来，阴影之间的偏移量和半径略有不同：
Philipp Brumm 一个很棒的生成分层阴影工具： shadows.brumm.af ：
性能权衡
不可否认，分层阴影是美丽的，但它们确实需要付出代价。如果我们叠加 5 个阴影分层，我们的设备必须多做 5 倍的工作！
在好的硬件上不是什么大问题，但会减慢在较旧的廉价移动设备上的渲染速度。
到目前为止，我们所有的阴影都使用了半透明的黑色，比如 hsl(0deg 0% 0% / 0.4) 。这实际上并不理想。
当我们在背景颜色上叠加黑色时，不仅会使它变暗，也会使其饱和度降低很多。
比较这两个框：
左边的盒子使用了透明的黑色。右侧的框匹配颜色的色调和饱和度，但降低了亮度。我们得到了一个更有活力的盒子！
当我们为阴影使用较深的颜色时，会发生类似的效果：
但是，左边的饱和度太低，右边的 饱和度不够 ，感觉更像是光晕而不是阴影！
实验一下：
通过匹配色调并降低饱和度/亮度，我们可以创建一个真实的阴影，没有那种“褪色”的灰色质量。
饱和度和亮度的关系
如果您熟悉 hsl 颜色格式，就会知道饱和度和亮度是独立控制的。
那么，降低亮度似乎也对饱和度有影响是不是有点奇怪？
这个问题以后有时间给大家细讲。
在本文中，我们一直在使用 box-shadow 属性。 box-shadow 是一个很好的全面工具，但它不是我们在 CSS 中唯一的阴影选项。😮
看看 filter: drop-shadow ：
语法几乎相同，但它产生的阴影不同。这是因为 filter 属性实际上是 SVG 过滤器的 CSS 挂钩。 drop-shadow使用 SVG 高斯模糊，这是一种与 box-shadow`不同的模糊算法。
两者之间还有一些其区别， drop-shadow 有一个超能力： 它能勾勒出元素的形状。
例如，如果我们在具有透明和不透明像素的图像上使用它，阴影将只对不透明像素起作用，也就是能勾勒出物体的轮廓：
请大喊一句：EDG NB!
这不仅适用于图像，它也适用于 html 元素！
希望能启发您，给您一些帮助！
分享10款漂亮的 CSS 按钮源码
网页设计师已经不必再依赖 Photoshop 制作酷炫的按钮了。通过使用 CSS3，你可以实现背景的渐变、阴影以及光泽/闪亮的效果。
1、Plastic Buttons
这组按钮设计很干净，它们有许多不同的颜色和尺寸，你可以轻松地重新设计这些按钮。
有多种风格可以选择，小型，中型或大型按钮。 有默认按钮，禁用按钮和设计为开关或标签的按钮行。 对于纯CSS解决方案，这是Web上最干净的按钮样式之一。
2、Cool Buttons
这是一组由 Felipe Marcos 制作的酷炫按钮，与上面的塑料按钮略有不同，但它们也易于使用。虽然没有闪亮的塑料设计，但当你点击后，依然会感受到有种“推”的效果。
你可以从六种预先设计的颜色中选择或自定义你想要的颜色。 CSS被分成不同的类名，因此您可以在一个类上设置默认按钮样式，并将颜色与其他类交替。
译者注：以下是部分按钮类型的截图
3、Google Buttons
Google的在线工具，如Blogger，云端硬盘，Gmail及其搜索功能都有不同的按钮样式。 开发人员Tim Wagner在这支笔中克隆了这些风格。
它们完全是用CSS3构建的，这些按钮展示了许多谷歌风格的效果，你可以构建它们看起来都很棒。 这是一个类似的例子，由Monkey Raptor在这些按钮上进行扩展，同时添加了一些其他按钮。
4、Bunch-o-Buttons
另外这种塑料风格的光泽按钮套装，可以在Alan Collins创建的这支钢笔中找到。 它支持多种颜色，并具有不同的样式，适用于小型，中型和大型按钮。
这套设计的独特之处在于如何在一个类别中切换光泽风格和平面风格。 大多数按钮都有一个“样式”，但你可以用一个CSS类启用或禁用光面设计，非常方便。
5、Social Buttons
这组可能是最具有独特配色方案和品牌图标的社交按钮的集合。
开发者Stan Williams在GitHub上发布了这个具有更新颜色和更新按钮的设置。 然而，这个演示是他的质量的明确指标，具有超过50个不同的按钮。 它们都具有闪亮的渐变作为背景，但程度和质量差别很大。
如果你需要在你的网站上进行社交分享，可以使用这组有趣的纯CSS打造的按钮包。
6、Jelly Animation
乍一看，它可能看起来像一个普通的按钮。 但是点击按钮以后，你会发现非常有趣的动画效果。
除了令人难以置信的动画，我还对下面的半真实按钮阴影印象深刻。 它与按钮一起动画，可以使其成为任何创业网站或社交网络的完美号召性用语，提升点击欲望。
7、Parallax Button
这组按钮，开发者Tobias Reich使用CSS3径向渐变和一些非常古怪的颜色创建了这个按钮。
就其本身而言，CSS3按钮令人印象深刻。 整个背景和投影仅通过CSS创建。 但是通过一些JavaScript，Tobias能够在悬停和点击时添加视差失真。
这是我在一段时间内看到的更有高级按钮的效果之一，它可以很好地融入任何网页。
8、Hubspot Pills
这组按钮是开发者Joe Henriod根据Hubspot的设计创建的。 它们的功能与传统的HTML按钮类似，但它们是使用CSS类构建的，可以应用于任何元素。
此组使用参考The Matrix的红色和蓝色药丸按钮，但您可以将颜色更改为您喜欢的任何颜色。 而悬停+点击状态非常华丽，可以吸引任何人的注意力。
9、Sexy SCSS Buttons
大多数前端喜欢使用Sass / SCSS，因为它提供了更多的控制，并且比传统的CSS更容易编写。 这些SCSS按钮经久耐用，内部和外部阴影效果令人印象深刻。
你可以使用单个类更改颜色，甚至可以将自己的颜色添加到混合中。 悬停状态使按钮在被按下到页面时感觉3D以及活动状态。
这些按钮应该易于在任何网站上实现，你可以直接从CodePen将SCSS转换为CSS。
10、Mozilla-Style Buttons
Mozilla的网站经历了一次重塑品牌，放弃了塑料风格按钮。 当我很喜欢他们的之前的设计风格，幸运的是，这个效果由Felix Schwarzer制作出来了。
蓝色三角形形状实际上是使用纯CSS以及背景渐变和3D斜角效果创建的。 这些按钮风格复杂，设计精良，容易吸引用户注意力。
总结
这10个按钮都是独一无二的，易于自定义任何布局。 由于它们是纯CSS3进行设计，因此你可以将其大小，颜色和样式更改为适用于企业，博客，社交网络或电子商务商店的项目。
但这个列表只是CodePen上非常少的一部分。 如果您正在寻找更多，你可以浏览CodePen以查看更纯CSS按钮。
以上是关于用 CSS 设计漂亮的阴影，css阴影和原理，所有知识点多图动画演示的主要内容，如果未能解决你的问题，请参考以下文章