Button

Button

50%

玩box shadow,Neumorphism 清淡拟物风

本来box shadow的格式比较简单,x,y,长度,模糊,颜色,是否内部,6数值,可以表现出平面上的阴影。如果是有一定的厚度,有一个光源,也是可以用box shadow来表达。需要2个边分别不同的阴影即可,一般是左上-右下,称为双阴影。

Neumorphism

1. 色板

大多数情况下主色调为浅色,低饱和,看起来接近于白色、米色或者轻灰色。并且,仅仅使用颜色相近的渐变色来突出某些特定部分。

2. 形状

易于访问的形状用于创建重复性的用户界面。

3. 表现

不同于之前的设计,Neumorphism风格的特点是非常轻柔并且微妙,它不会过度模仿自然界中的物体,而是创建一种新的表现形式,它看起来像是一个原始的白模(3D设计的时候,模型没有上纹理材质之前呈现的一种状态)。

4. 效果

它没有试图做的特别逼真,而是采用了HTML、CSS易于实现的效果,例如双阴影、渐变、填充、描边或者内阴影,所有的这些效果都可以由初级开发工程师用现成的代码去实现。

{
box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2)),
-0.2rem -0.2rem 0.5rem var(--white));
}

checked{
box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2)),
inset -0.2rem -0.2rem 0.5rem var(--white));
}

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

Fill out this field
Fill out this field
请输入有效的电子邮箱地址。