新拟物化UI设计 |
您所在的位置:网站首页 › 扁平风格ui › 新拟物化UI设计 |
在我的个人博客上观看效果更佳:http://qkongtao.cn/?p=1004 目录 什么是新拟物化怎么实现新拟物风格设计Toolbox工具箱UI社拟物化风格大赏新拟物风格作品欣赏 一些新拟物的代码收集 什么是新拟物化新拟物化,是在扁平的基础上呈现真实物体质感的设计风格, 核心思想是模拟光的斜向照射效果 ,用阴影显出“高光”和“阴影”。 新拟物界面设计(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 精美的CSS3新拟物风格UI元素:http://code.qkongtao.cn/neomorphic/neomorphicUiElement/index.html ![]() 玻璃拟物音乐播放器:http://code.qkongtao.cn/neomorphic/glassMusicPlayer/index.html 左眼会陪右眼哭の博客:http://qkongtao.cn/ panda的博客:https://panda.panda-studio.cn/ 一些新拟物的代码收集下面是我收集的一些新拟物的代码,放在了gitee上,开箱即用。 其中包括了上文作品欣赏中的代码! 下载链接:https://gitee.com/KT1205529635/neomorphic |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |