CSS

新拟物化UI设计

Nick · 8月13日 · 2021年 · 本文1250字 · 阅读4分钟935

什么是新拟物化

新拟物化,是在扁平的基础上呈现真实物体质感的设计风格, 核心思想是模拟光的斜向照射效果 ,用阴影显出“高光”和“阴影”。 新拟物界面设计(Neomorphic UI Design)是2020年在互联网上非常火热的一种前端界面设计方式, 这种设计风格在传统的扁平的基础上增加了拟物的投影效果,从而提升了界面的立体感,又比拟物的效果更加轻盈、简洁,因此整体视觉体验是简约但又有惊喜。

新拟物化的风格是什么样的呢?看下图感受一下:

怎么实现新拟物风格设计

现代的CSS技术的进步和升级, 这些拟物的样式都完全使用代码编写出来了!无须任何贴图,这也是相对极致拟物风格的一个巨大突破。 下面提供几个新拟物风格的CSS设计工具:

Toolbox工具箱

Toolbox 集合了新潮流 CSS 风格的工具箱,有在线 CSS 玻璃形态和新拟物形态,两种目前网页设计的新风格样式,Neumorphism CSS Generator 可以通过调整对象的大小、圆度、投影距离、配色、光源等自定义制作 CSS 拟物形态的盒子。Glassmorphism CSS Generator 可在线制作玻璃形态,通过实时预览背景模糊、不透明度、轮廓等等就可以制作大品牌网站的玻璃样式的盒子。有趣的工具箱值得 Web 网页设计师收藏哦。

链接地址:http://santhoshsivan.com/toolbox.html

CSS拟物风格元素在线调试

CSS拟物风格元素在线代码:jQuery插件库提供的一个在线CSS新拟物风格作品Demo的代码调试工具

链接地址:https://www.jq22.com/code3871

UI社拟物化风格大赏

UI社收集的一些使用CSS创建的新拟物化风格UI示例。这些示例不仅可以打开观看,还可以自己在线代码调试,如果开发中有用到相应的样式风格,可以自己进行代码调试截取。

链接地址:https://www.uishe.cn/28293.html

新拟物风格作品欣赏

1. 新拟物音乐播放器:http://code.qkongtao.cn/neomorphic/musicPlayer/index.html

新拟物化UI设计-左眼会陪右眼哭の博客

2. 精美的CSS3新拟物风格UI元素:http://code.qkongtao.cn/neomorphic/neomorphicUiElement/index.html

3. 玻璃拟物音乐播放器:http://code.qkongtao.cn/neomorphic/glassMusicPlayer/index.html新拟物化UI设计-左眼会陪右眼哭の博客

4. 左眼会陪右眼哭の博客:http://qkongtao.cn/

新拟物化UI设计-左眼会陪右眼哭の博客

5. panda的博客:https://panda.panda-studio.cn/

一些新拟物的代码收集

下面是我收集的一些新拟物的代码,放在了gitee上,开箱即用。

其中包括了上文作品欣赏中的代码!

2 条回应
  1. jack2022-1-27 · 13:36

    国内最好看的博客!!! 但是感觉网速还有浏览翻页都比较慢

    • Nick2022-2-7 · 9:14

      谢谢,手机打开可能会有点慢,因为搞得动画太多了,电脑PC打开就很流畅哦,都用了cdn加速

在线人数:1人 来访统计
说谎
林宥嘉
隐藏