阴影有助于传达意义并为 UI 增加额外的价值。然而,如今我们在网络上看到的许多阴影并没有充分发挥其潜力。让我们改变它!
提升元素并嵌入它们,如何对阴影进行分层,当然,还有在哪个用例中使用哪个 CSS 属性。Rob 还研究了阴影带来的可访问性和性能影响,以及如何为它们设置动画。
规则与不规则阴影。一个微妙的变化创造了更多的深度。
另一篇关于该主题的精彩文章来自 Josh W Comeau。为了结束那 雅虎电子邮件列表 些“看起来不太像阴影的模糊灰色框”,Josh 描述了网络上大多数阴影的当前状态,他展示了如何将典型的框阴影转换为美丽、逼真的框阴影. 使任何 UI 更具触感的小细节。
CSS 剪纸效果 #
如果您想为标题创建剪纸效果,您可能会遇到很多困难。也许您需要设置两个单独的divs,然后它们将相互重叠。间距需要以相对单位定义,当然,跨屏幕可能有点困难。
带有一个伪元素和一个数据属性。
此外,请查看 Ahmad Shadeed 关于思考剪切效果的文章,其中详细介绍了决定 SVG 何时可能更有意义以及如何在现实生活场景中实施的所有细节。本文还提供了大量代码示例供您开始使用! Web 的迷你地图 我们以前见过它们:通常位于页面顶部的微小水平条。当用户向下滚动时,水平条被填满,因此用户知道实际还剩下多少需要滚动。 如果我们让它更符合上下文呢?也许该页面包含一些图像和视频,或引用和不同的部分——以不同的方式突出显示它们不是很有趣,同时还允许读者在页面上固定一个位置并在需要时跳回?好吧,Rauno Freiberg 也这么认为。