• 欢迎访问佰阅部落,本站为优质开源程序分享站,所有自研项目均开源免费,可在Github查看源码。 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎积极参与讨论、反馈问题

Neumorphism UI:一款白板风格的Bootstap主题

UI分享 佰阅部落 3周前 (05-28) 237次浏览
文章目录[隐藏]

Neumorphism UI给人的第一印象非常深刻,类似亚克力或雾化拟物风格的UI,总是很吸睛。Neumorphism实现了基于bootstrap的白板风格,并融入了有机形态organic-radius,使之更具现代感和艺术感。

0. 最终效果展示

演示地址: https://demo.themesberg.com/neumorphism-ui/index.html
开源地址: https://github.com/themesberg/neumorphism-ui-bootstrap

1. 截图演示



2. 使用教程

当前作者并没有发布打包的文件,需要自行打包输出。如果集成VUE或其他的,或许可以直接调用scss文件,如果需要打包输出单独的文件,需要下载项目并进行本地打包。

本地打包教程:
准备环境:Node环境
首先下载项目并解压,然后安装glup工具

npm install gulp-cli -g

完成后安装项目依赖包

npm install

打包命令:

gulp build:dist

然后就可以直接在其他地方适用最小化的css文件。

3. 想自定义怎么办?

尽管这个世界上有很多现成的UI样式,然而设计美学一直在变化,不仅大众口味难调,其实每个人都有自己的审美,而且随时间推演品味又不一样。因此,基本上没有绝对完美的,我们只能相互比较和借鉴,至于究竟用谁,还是要看顺手程度了。如有耐心,可以慢慢调校,否则UI设计绝对是永无止境的无底洞。

当前的UI设计,除了以为熟悉的各种组件外,诞生了很多新场景下的组件,比如瀑布流、弹幕、时间线等,当我们关注一些新UI项目时,不难发现,都在朝着完整组件化和完全自定义主题化发展,比如vuetify,很多你熟悉的UI都可以套入进去,这点估计是全网自定义最广泛的一个;再比如京东开源的新UINutUI,全部以组件化的形式设计,意味着往后我们只需要专注原型设计即可快速完成终稿,再也不需要反复调整CSS和HTML标签。

4. 更多免费又好看的UI


佰阅部落 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Neumorphism UI:一款白板风格的Bootstap主题
赞一下 (2)
佰阅部落
关于作者:
爱折腾,爱学习,用心分享各种实用搭建教程,让优质web程序脱颖而出,欢迎订阅!