深入阴影

让我们探索阴影在Web设计中的多面作用。阴影不仅仅是装饰元素。它们增加了深度，纹理和视觉兴趣，从而增强了对象的三维性。掌握光和阴影技术可以将平坦的接口转变为丰富的触觉体验。

考虑此示例：冰岛自行车之旅的着陆页。请注意，骑自行车的人在骑自行车的人中如何创造一种运动感，使图像看起来像在屏幕上“弹出”。这种动态效果完美地补充了冒险的主题。

现在，将其与无阴影的简约“平坦”设计进行比较。缺乏深度将重点直接转移到自行车本身上。缺乏现实主义使自行车能够明确脱颖而出。

这些示例突出了设计选择的重要性。阴影和深度应始终提供整体主题和信息。

光，阴影和深度

如前所述，深度显着增强了含量。但是什么构成阴影？答案很轻！

光线和阴影密不可分。光决定了阴影的方向，强度和柔软度 - 没有另一个阴影。

Google的材料设计系统体现了有效的光线和阴影实现。由于Google在其产品生态系统中利用它，它的影响很广泛。

材料设计从物理世界中汲取灵感，使用光，表面和铸造阴影在三个维度上代表界面。他们的全面准则详细介绍了这些技术。

材料设计使用虚拟灯来照亮UI，创建钥匙阴影（尖锐，定向）和环境阴影（扩散，柔软）。阴影对于此设计系统至关重要。与Apple的MACOS人类界面指南进行对比，该指南优先考虑半透明和模糊以实现深度。光仍然至关重要，影响元素如何与桌面或其他UI面板融合。方法的选择是设计决策。

光源，颜色和阴影类型

了解光影关系需要更深入地了解光如何影响阴影方向和颜色。光强度决定了阴影深度，但方向和颜色同样重要。

存在两种主要的影子类型：掉落阴影并形成阴影。

掉落阴影

当物体阻碍光源时，会铸造阴影。它的音调（色相与灰色混合）和价值（整体亮度或黑暗）是可变的。在网络设计中，这些方面对于彩色拾取器而言是不可或缺的。

形成阴影

形式阴影出现在远离光源的物体的侧面。它具有较软的边缘，而定义的边缘比落下阴影较少，传达了音量和深度。

阴影外观取决于光方向，强度和对象表面距离。更强壮的光会产生更黑暗，更敏锐的阴影。柔软的光会产生淡淡的阴影。方向光甚至会导致乌姆布拉（完全阻塞的光）和半阴茎（部分挡光）。靠近表面也会影响清晰度。

物体表面或周围区域的光反射进一步影响阴影。明亮的表面反射，深色表面吸收光。

这些是光线的关键方面，要掌握有效的网络设计。光的物理学很复杂，这是一个简化的概述。有关基于不同光源的阴影铸造的视觉示例，请参阅有关漫画绘制阴影的指南。

定位光源和高程

阴影本质上链接到光源。定义光源，甚至实际上，对于创造有影响力的阴影效果至关重要。一致性是关键；阴影应始终与光源的位置有关。顶部光源在下面投放了阴影；左光源向右投下阴影。来自各个方向的多个光源否定阴影。

光源可以任意定位，但在整个设计中保持一致性。

阴影还传达高程。材料设计有效地使用阴影来创建元素之间的感知分离。

内部阴影，分层和可访问性

box-shadow属性独特地启用了内部阴影，使用inset关键字创建沉没效果。这对于模拟按钮按下很有用。可以使用其他技术模拟内部文本阴影。

可以使用box-shadow中的逗号分隔列表或filter: drop-shadow() 。这使阴影和有趣的视觉效果更加顺畅，甚至通过text-shadow增强了版式。请注意，阴影分层顺序会影响视觉外观。

阴影可以改善可访问性。研究表明，阴影和大纲可以增强组件识别和相互作用，特别是对于低视力的用户而言。 WCAG 2.0指南建议对比度，文本阴影可以帮助实现这一目标。

性能考虑

阴影影响性能。 filter: drop-shadow()使用GPU，通常会用硬件加速来加速。但是，过多的层可能会损害GPU记忆，从而降低性能。模糊在计算上很昂贵，因此明智地使用它。大的模糊半径明显缓慢渲染。

阴影特性和行为

阴影不会影响文档布局；除非通过spread radius参数修改，否则它们的大小与元素相同。阴影隐式具有较低的z指数。剪辑或掩盖会影响阴影的可见性，具体取决于阴影类型。斜阴影需要创建阴影元素并使用transform: skew() 。 box-shadow尊重border-radius ，而filter: drop-shadow()尊重透明度和内容形状。

最好的用例

各种CSS属性和功能会产生阴影，但是选择适当的类型对于有效性至关重要。

• box-shadow ：符合元素边界框的阴影多功能。
• text-shadow ：专门针对文本元素。
• filter: drop-shadow() ：遵循任何元素的渲染形状，包括伪元素。
• <fedropshadow></fedropshadow> ：用于直接在SVG标记中创建掉落阴影。

从简单的掉落阴影到复杂的效果，可能性是巨大的。

现代网络设计中的阴影

阴影无处不在，并且不断发展。 “ Neumorthism”是一个非常依赖阴影的设计趋势，是一个很好的例子。创意设计师使用阴影来产生复杂的模式和效果。但是，过度使用会对性能产生负面影响。

伪元素和动画

阴影属性与伪元素兼容，例如::before和::after ，以及::first-letter和::first-line 。这打开了创造性的可能性。

阴影是使用CSS动画和过渡的动画。动画阴影可以指示交互性或完成的动作。优化动画性能可能涉及使用drop-shadow()而不是box-shadow或使用伪元素以使结果更光滑。

结论

CSS阴影比最初出现的要复杂得多。了解光源，阴影类型，颜色，分层，可访问性，性能和动画技术对于有效的Web设计至关重要。该概述为进一步的探索和实验提供了基础。

以上是深入阴影的详细内容。更多信息请关注PHP中文网其他相关文章！