|
拟物化、扁平化。UI设计无论怎样都会持续变化的，人的审美会疲劳，就连乔布斯的拟物化此刻都被扁平化搞得裤衩都不剩了。
扁平化很简单，然则设计师已然不满足于此类审美了，在寻找新的设计。这不，新拟态起始显现，本来以为2020会火，结果到此刻还没几个UI用新拟态设计风格。
倘若你还不认识新拟态啥样子，不妨去瞧瞧百度照片搜索里找“新拟态”，或能科学上网去外国网站看。
从UI代码编写方向来讲，加了内发光外发光两唯独暗影，比扁平化页面代码编写还是麻烦了不少。
新拟态明亮主题 示例
新拟态阴暗主题 示例
赶潮流的我亦科研了新拟态UI设计，亦从国外网站学习科研，分享一下新拟态的css页面装饰代码。
很简单，就几行css，只需要新拟态风格的元素包裹就行了。还能够切换黑白主题！
下面是提炼出的核心样式！
HTML代码<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新拟态 UI</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="display">
拟态内容
</div>
<div data-theme="dark" class="display">
拟态内容
</div>
<div>
拟态设计内容
</div>
</body>
</html>
CSS代码:root {
--body-bg-color: #e0e5ec;
--bg-color: #e0e5ec;
--primary-font-color: rgba(144,152,168,1);
--secondary-font-color: rgba(51,64,89,1);
--soft-high-light: rgba(255,255,255,.43);
--dark-high-light: rgba(217,210,200,.51);
}
[data-theme="dark"] {
--bg-color: #131419;
--primary-font-color: #c7c7c7;
--secondary-font-color: #03a9f4;--soft-high-light: rgba(255,255,255,.05);
--dark-high-light: rgba(0,0,0,.51);
}
body {
bac公斤round: var(--body-bg-color);
color: var(--primary-font-color);
}.display {
box-shadow: 6px 6px 16px 0 var(--dark-high-light), -6px -6px 16px 0 var(--soft-high-light), inset 6px 6px 5px 0 var(--dark-high-light), inset -6px -6px 5px 0 var(--soft-high-light);
border: 5px solid var(--soft-high-light);
color: var(--secondary-font-color);
}
| 
发表于 2024-10-3 03:35:55