[vc_raw_html]JTNDZGl2JTIwY2xhc3MlM0QlMjJjb250YWluZXIlMjIlM0UlMEElMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMmNvbXBvbmVudHMlMjIlM0UlMEElMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMnN3aXRjaCUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIyc3dpdGNoX18xJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDaW5wdXQlMjBpZCUzRCUyMnN3aXRjaC0xJTIyJTIwdHlwZSUzRCUyMmNoZWNrYm94JTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDbGFiZWwlMjBmb3IlM0QlMjJzd2l0Y2gtMSUyMiUzRSUzQyUyRmxhYmVsJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJzd2l0Y2hfXzIlMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NpbnB1dCUyMGlkJTNEJTIyc3dpdGNoLTIlMjIlMjB0eXBlJTNEJTIyY2hlY2tib3glMjIlMjBjaGVja2VkJTNEJTIyJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDbGFiZWwlMjBmb3IlM0QlMjJzd2l0Y2gtMiUyMiUzRSUzQyUyRmxhYmVsJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJjaGVja2JveCUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIyY2hlY2tib3hfXzElMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NpbnB1dCUyMGlkJTNEJTIyY2hlY2tib3gtMSUyMiUyMHR5cGUlM0QlMjJjaGVja2JveCUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2xhYmVsJTIwZm9yJTNEJTIyY2hlY2tib3gtMSUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2klMjBjbGFzcyUzRCUyMm1hdGVyaWFsLWljb25zJTIyJTNFJTNDJTJGaSUzRSUzQyUyRmxhYmVsJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJjaGVja2JveF9fMiUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2lucHV0JTIwaWQlM0QlMjJjaGVja2JveC0yJTIyJTIwdHlwZSUzRCUyMmNoZWNrYm94JTIyJTIwY2hlY2tlZCUzRCUyMiUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2xhYmVsJTIwZm9yJTNEJTIyY2hlY2tib3gtMiUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2klMjBjbGFzcyUzRCUyMm1hdGVyaWFsLWljb25zJTIyJTNFJTNDJTJGaSUzRSUzQyUyRmxhYmVsJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJyYWRpbyUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIycmFkaW9fXzElMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NpbnB1dCUyMGlkJTNEJTIycmFkaW8tMSUyMiUyMHR5cGUlM0QlMjJyYWRpbyUyMiUyMG5hbWUlM0QlMjJyYWRpbyUyMiUyMHZhbHVlJTNEJTIyMSUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2xhYmVsJTIwZm9yJTNEJTIycmFkaW8tMSUyMiUzRSUzQyUyRmxhYmVsJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJyYWRpb19fMiUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2lucHV0JTIwaWQlM0QlMjJyYWRpby0yJTIyJTIwdHlwZSUzRCUyMnJhZGlvJTIyJTIwbmFtZSUzRCUyMnJhZGlvJTIyJTIwdmFsdWUlM0QlMjIyJTIyJTIwY2hlY2tlZCUzRCUyMiUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2xhYmVsJTIwZm9yJTNEJTIycmFkaW8tMiUyMiUzRSUzQyUyRmxhYmVsJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJidG4lMjBidG5fX3ByaW1hcnklMjIlM0UlM0NwJTNFQnV0dG9uJTNDJTJGcCUzRSUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIyYnRuJTIwYnRuX19zZWNvbmRhcnklMjIlM0UlM0NwJTNFQnV0dG9uJTNDJTJGcCUzRSUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIyZm9ybSUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2lucHV0JTIwdHlwZSUzRCUyMnRleHQlMjIlMjBjbGFzcyUzRCUyMmZvcm1fX2lucHV0JTIyJTIwcGxhY2Vob2xkZXIlM0QlMjJUeXBlJTIwYW55dGhpbmcuLi4lMjIlM0UlMEElMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMnNlYXJjaCUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2lucHV0JTIwdHlwZSUzRCUyMnRleHQlMjIlMjBjbGFzcyUzRCUyMnNlYXJjaF9faW5wdXQlMjIlMjBwbGFjZWhvbGRlciUzRCUyMlNlYXJjaC4uLiUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIyc2VhcmNoX19pY29uJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDaW9uLWljb24lMjBuYW1lJTNEJTIyc2VhcmNoJTIyJTNFJTNDJTJGaW9uLWljb24lM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMnNlZ21lbnRlZC1jb250cm9sJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDaW5wdXQlMjB0eXBlJTNEJTIycmFkaW8lMjIlMjBuYW1lJTNEJTIycmFkaW8yJTIyJTIwdmFsdWUlM0QlMjIzJTIyJTIwaWQlM0QlMjJ0YWItMSUyMiUyMGNoZWNrZWQlM0QlMjIlMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0NsYWJlbCUyMGZvciUzRCUyMnRhYi0xJTIyJTIwY2xhc3MlM0QlMjJzZWdtZW50ZWQtY29udHJvbF9fMSUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ3AlM0VUYWIlMjAxJTNDJTJGcCUzRSUzQyUyRmxhYmVsJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDaW5wdXQlMjB0eXBlJTNEJTIycmFkaW8lMjIlMjBuYW1lJTNEJTIycmFkaW8yJTIyJTIwdmFsdWUlM0QlMjI0JTIyJTIwaWQlM0QlMjJ0YWItMiUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2xhYmVsJTIwZm9yJTNEJTIydGFiLTIlMjIlMjBjbGFzcyUzRCUyMnNlZ21lbnRlZC1jb250cm9sX18yJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDcCUzRVRhYiUyMDIlM0MlMkZwJTNFJTNDJTJGbGFiZWwlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0NpbnB1dCUyMHR5cGUlM0QlMjJyYWRpbyUyMiUyMG5hbWUlM0QlMjJyYWRpbzIlMjIlMjB2YWx1ZSUzRCUyMjUlMjIlMjBpZCUzRCUyMnRhYi0zJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDbGFiZWwlMjBmb3IlM0QlMjJ0YWItMyUyMiUyMGNsYXNzJTNEJTIyc2VnbWVudGVkLWNvbnRyb2xfXzMlMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NwJTNFVGFiJTIwMyUzQyUyRnAlM0UlM0MlMkZsYWJlbCUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIyc2VnbWVudGVkLWNvbnRyb2xfX2NvbG9yJTIyJTNFJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJpY29uJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJpY29uX19ob21lJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDaW9uLWljb24lMjBuYW1lJTNEJTIyaG9tZSUyMiUzRSUzQyUyRmlvbi1pY29uJTNFJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJpY29uX19hY2NvdW50JTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDaW9uLWljb24lMjBuYW1lJTNEJTIycGVyc29uJTIyJTNFJTNDJTJGaW9uLWljb24lM0UlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMmljb25fX3NldHRpbmdzJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDaW9uLWljb24lMjBuYW1lJTNEJTIyc2V0dGluZ3MlMjIlM0UlM0MlMkZpb24taWNvbiUzRSUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIyc2xpZGVyJTIyJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJzbGlkZXJfX2JveCUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ3NwYW4lMjBjbGFzcyUzRCUyMnNsaWRlcl9fYnRuJTIyJTIwaWQlM0QlMjJmaW5kJTIyJTNFJTNDJTJGc3BhbiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ3NwYW4lMjBjbGFzcyUzRCUyMnNsaWRlcl9fY29sb3IlMjIlM0UlM0MlMkZzcGFuJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDc3BhbiUyMGNsYXNzJTNEJTIyc2xpZGVyX190b29sdGlwJTIyJTNFNTAlMjUlM0MlMkZzcGFuJTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTNDJTJGZGl2JTNF[/vc_raw_html]

玩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
请输入有效的电子邮箱地址。