type
status
date
slug
summary
category
tags
password
icon
曾经有段时间新拟态火爆前端圈,时过境迁,新拟态并没有走入千家万户,而只存在于一些小众的产品上。究其原因,首先是设计成本太高,其次是前端程序员知道新拟态是用 box-shadow 来实现,但就是不知道怎么才能做出符合自己审美的新拟态。
今天,我们就来扒一扒新拟态的奥妙,以前端工程师的角度总结出实现新拟态的正确思路。
在我看了一众新拟态的设计后,总结了三个要点:光与背景、box-shadow、细节打磨。且看我下文分析,看我的思路对不对。
欢迎加入「🌍独立全栈开发交流群」,一起学习交流前端和Node技术。

光与背景

理解新拟态设计的第一步,不是学习 box-shadow 的用法,而是思考光与背景的作用。新拟态的设计方法可以总结为:有光(打在平面上)就有了 box-shadow。我们得通过平面来强调光的效果,不信你看下面这张图:
notion image
上下两个新拟态按钮,除了背景不同,其他代码一样,下面的看起来明显更立体。这就是背景的作用,合理的背景能让用户好像看到光源一样。背景之于新拟态设计,就是画龙点睛的那一笔。
那么什么样的搭配更合理?我总结出来这样的规律:
  • 以白色的主题为例,背景不能用白色,而要使用较浅的色调,如灰色、蓝灰色或暖色调,这样才能指示出光源方向(如图中按钮左上白色区域)
  • 按钮可以用与背景一样或相近的颜色,这样更有凹凸感。
你也可以去观察新拟态设计的产品,他们的背景和按钮/方块也基本符合这样的规律。

box-shadow详细用法

如果背景的选择能帮你打开新拟态的设计思路,那么学好 box-shadow 则会让你打开创造新拟态产品的大门。
box-shadow 属性在CSS中用于向框添加一个或多个阴影。它可以接受多组的值来创建多层阴影,每组值描述了一个阴影的外观。以下是可能的值:
  1. inset (可选):如果不使用这个值,阴影将在框的外部;如果使用了这个值,阴影在框的内部(即凹陷效果)。
  1. offset-x (必须):水平阴影的位置。正值阴影向右,负值向左。
  1. offset-y (必须):垂直阴影的位置。正值阴影向下,负值向上。
  1. blur-radius (可选):模糊距离。其值越大,阴影就越大且越模糊。如果没有设置这个值,阴影的边缘将是硬边缘。
  1. spread-radius (可选):扩散半径。正值会使阴影扩大且边缘更加模糊,负值会使阴影收缩。
  1. color (可选):定义阴影的颜色。可以使用任何CSS颜色值(如 #rrggbb, rgb(), rgba(), hsl(), hsla() 等)。
使用示例
box-shadow 的值不复杂,但如果不常使用,我们是很难直观看出数值对应的效果,所以还是熟能生巧,多练练。

细节打磨

上面两节介绍的是新拟态的核心设计方法,但如果你实操一下,仍然会觉得创造出来的效果跟预期依然有所差异,但又不知道问题在哪里。这里还有一些设计细节的建议可以供你参考:
  1. 阴影和光效:
      • 双重阴影:利用内阴影和外阴影来创造凹凸感。通常使用较浅的阴影(浅色)模拟光源,以及较深的阴影(暗色)模拟深度。
      • 柔和阴影:阴影应该是柔和且分布广泛,避免使用过于尖锐或深色的阴影。
  1. 几何形状和边框:
      • 圆角:新拟态设计倾向于使用圆角。这些圆角可以帮助元素更自然地融入背景。
      • 简洁边框:边框通常细致且不突出,有时甚至是透明的,以增加立体感。
  1. 交互效果:
      • 交互状态:为不同的状态(如hover、active)设计不同的视觉效果,比如改变阴影深度或颜色。
      • 过渡动画:使用平滑的过渡效果,使状态变化更自然、更有吸引力。
  1. 字体和图标:
      • 简洁字体:使用简洁、易读的字体,以保持整体设计的一致性。
      • 图标风格:图标应与整体风格保持一致,避免过于复杂或扁平化的设计。
作为一名不会设计的前端工程师,只能通过不断打磨细节来提升自己的设计能力啦~
你可以在CodePen看我写的demo👇

结语

你看,看起来高大上的新拟态总结起来也不过就这么点内容,拿出你的CSS,码一个自己满意的新拟态吧!

专栏资源

专栏介绍:分享CSS新特性和好看的样式设计
专栏地址:👉简明实用CSS技巧
 
CSS前瞻:用@scope 定义你的CSS作用域CSS技巧:用CSS + SVG foreignObject实现一个动画组件