外链论坛

 找回密码
 立即注册
搜索
查看: 19|回复: 1

2020拟态设计搞半天没火起来,分享一下拟态css样式实现!

[复制链接]

2980

主题

312

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99099264
发表于 2024-10-3 03:35:55 | 显示全部楼层 |阅读模式

拟物化、扁平化。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); }
回复

使用道具 举报

2993

主题

2万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139304
发表于 2024-10-16 18:38:30 | 显示全部楼层
楼主果然英明!不得不赞美你一下!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-5 20:39 , Processed in 0.070265 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.