CSS 实现新拟态(Neumorphism) UI 风格

探索新拟态UI设计：CSS实现与案例分析
原创 已于 2023-11-14 09:29:40 修改 · 1.1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#拟态 #UI #CSS

于 2023-11-14 09:25:28 首次发布
本文介绍了新拟态UI风格，一种错落有致的拟物设计，通过对比扁平和投影风格，讲述了其实现方式，包括使用白色阴影和常规阴影。作者分享了CSS代码实例，并提及了在线生成工具。

什么是新拟态(Neumorphism) UI 风格？网上似乎还没有一个准确统一的定义。按照我个人的通俗理解，就是将界面的一部分凸起来，另一部分凹下去，形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「Skeuomorph Mobile Banking」

CSS 实现新拟态(Neumorphism) UI 风格

Skeuomorph Mobile Banking

新拟态 UI 风格与扁平、投影风格的对比

CSS 实现新拟态(Neumorphism) UI 风格

从上面这张对比图可以看出，扁平风格就像是一张纸贴在墙面上，投影风格像是浮在半空中，而新拟态风格则像是墙面上直接凸起了一块。

新拟态 UI 风格的实现方式

要实现这种风格，精髓在于一个白色的阴影+一个常规阴影。一个示例如下图所示：

最低0.47元/天 解锁文章
【前端实例代码】Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果~前端开发网页设计基础入门教程~适合初学者~超简单~
南北极之间
08-18 764
前端实例代码】Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果！前端开发网页设计基础入门教程！适合初学者~超简单~
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)动画特效图标网页效果！前端开发网页设计基础入门教程！超简单~
南北极之间
08-16 733
web前端特效源码】Html5+css3实现新拟态新拟物风格(Neumorphism)网页图标动画效果！
新拟态 (Neumorphism / soft ui) UI CSS设计示例分享
热门推荐
CHK的博客
02-26 1万+
在过去的几个月中，新拟态（Neomorphic）的UI设计风靡一时。它被誉为2020年最火的UI设计趋势之一，在互联网上广受欢迎。Neumorphism融合了Skeuomorphism和平面设计技术。就像拟态（Skeoumorphism）一样，其原理是为界面的UI元素赋予真实感，它是一种现实主义风格，模仿的是真实物体的形态。神经形态是值得探索的风格。它时尚，细致，使用它进行设计确实很有趣。因此，在...
CSS实现新拟态效果
qq_43477721的博客
07-21 4491
新拟态是一种图形样式，其原理是为界面的UI元素赋予真实感。 原生名词有几个叫法，Neumorphism / soft ui，翻译过来是新拟态或者是软ui。国内的翻译叫，新拟物风格。Neumorphism，是New +Skeuomorphism的组合词。 不得不说，这样的效果确实很不错，那么使用 CSS 该如何实现呢？ 推荐一个网站，https://neumorphism.io/#e6eef4 在这个网站可以非常方便实现新拟态。 我自己实现的效果???????????????????? <!DOC
Neumorphism ： 集拟态美 ? 不不不，就是聊一聊CSS拟态而已啦。八千多字，我是扯了啥呀。
FOR 的博客
09-11 1739
最近有些忙，考驾照，上课，处理项目依赖。就没怎么学习新知识和发文章咯。 今天周六，聊一聊 拟态吧。英文怎么读我是不知道的。就顺便读吧。哈哈 Neumorphism——新拟态设计 什么是 Neumorphism Neumorphism - 新拟态UI风格是目前比较新颖的一种前端css设计风格. 它的格调简单，基本颜色比较浅，如米白，浅灰，浅蓝等。 再利用阴影呈现出凹凸效果。看起来和简单舒适，且有3D效果。因此我们可以通过拟态设计出很多优美的页面。 如下图 ： 什么是 Skeuomorphism Neum.
新拟态风格UI组件库
11-02
新拟物风格的数据呈现UI组件 Sketch源文件 人员信息/音视频/开关/卡片/进度条/数据表/多选框等等
教你使用CSS3实现新拟态UI
CHK的博客
09-04 3349
教你使用CSS3实现新拟态UI 什么是新拟态？ 新拟态的英文名称是“Neumorphism”，是New+Skeuomorphism的组合词，同时也叫“Soft UI”。简单讲，新拟态是一种图形样式，其原理是通过模拟真实物体来为界面的UI元素赋予真实感。 在今年上半年，新拟态的UI设计风靡一时，它被誉为2020年最火的UI设计趋势之一，在互联网上广受欢迎。新拟态融合了拟态和平面设计技术，模仿真实物体的形态，为界面的UI元素赋予真实感，它是一种现实主义风格，也是非常值得探索的新设计风格。它时尚，细致，使用它进行
css实现拟态效果
lixin5456985的博客
11-07 438
【代码】css实现拟态效果。
css拟态风格尝试以及css3新特性渐变使用
weixin_48727473的博客
06-21 956
拟态风格页面的实现，通过css3新特性阴影去现实立体效果的页面以及通过css3新特性渐变去使得页面更加丰富多彩
weui.css(最基本的样式库)
08-29
weui是一个专门用于开发手机移动web或微信的样式库，weui.css是其中最基本的样式库
HTML+CSS鼠标拟态效果
this_is_Azou的博客
12-02 473
这里写自定义目录标题HTML+CSS鼠标拟态效果弹性布局弹性盒 `display:flex;`自适应布局单位vw/vh快捷编写方法HTMLCSS效果 HTML+CSS鼠标拟态效果 弹性布局 弹性盒 display:flex; flex-direction row,默认值，主轴为水平方向，起点在左端 roe-reverse，主轴为水平方向，起点在右端 column，主轴为垂直方向，起点在上沿 column-reverse，主轴为垂直方向，起点在下沿 flex-wrap nowrap,默认值，不换行
Jquery ui css framework
weixin_30770495的博客
06-28 116
Jquery ui css framework是jquery ui中的一个样式框架，可以利用jquery Theme roller 来生成自己想要的css样式效果。我们可以利用jquery ui的一些框架来开发出基于jquery ui css framework效果的插件来。 Jquery ui中两大核心的css文件是ui.core.css和ui.theme.css.这两个css样式贯穿整个...
纯CSS实现常见的UI效果
weixin_46837985的博客
01-19 846
前言大家好，这里是CSS魔法使——alphardex。切图仔，是大多数前端用来自嘲的称呼。相信很多人平时写页面的时候，大部分时间是在切图和排图，如此往复。这里并不是要否定切图本身，而是在...
前端例程20210510：新拟物风格（Neumorphism）设计与实现
Naisu的各种笔记
05-10 5460
文章目录前言结语 前言 结语
有趣的CSS - 新拟态按钮
设计师工作日常
03-11 1489
用css写的一个好看的新拟态风格的按钮。
新拟态设计（Neumorphism）方法详解，附 UI 工具推荐
最新发布
uiSMS的博客
08-22 1098
新拟态设计是近年来在 UI 界面中逐渐兴起的一种视觉表现形式。它的英文是 “Neumorphism”，由 “New” 和 “Skeuomorphism” 融合而来，意为“新的拟物化”。这种风格既不同于过去厚重的拟物风格，也区别于纯粹的扁平化，而是强调在扁平元素的基础上，通过细腻的阴影、柔和的高光，营造出微妙的浮雕感和层次感。这种手法的核心是让界面中的按钮、输入框或卡片像是从背景中自然浮现或嵌入，这种质感会让人下意识地想去点一下，交互感更强。
探索未来界面设计：NeumorphismUI 框架全面解析与应用
gitblog_00039的博客
06-03 380
探索未来界面设计：NeumorphismUI 框架全面解析与应用 在追求用户界面的极致美感与交互体验的道路上，有一个新星逐渐升起——NeumorphismUI。这个基于SwiftUI的强大库为开发者们开启了一扇通往新颖设计风格的大门。 项目介绍 NeumorphismUI 是一个精心设计的SwiftUI库，它专为简化新拟态（Neumorphism）设计风格的实现而生。新拟态设计结合了扁平化和拟物化...
Web前端新拟态图标，效果超赞！
qq_44892111的博客
04-30 1805
在 B站上看到一个大佬，写了一个很不错的新拟态图标，但是美中不足的就是他没有给CSS样式添加注释，对一些刚刚入手前端的小白（比如我）很不友好，所以我查了一下那些属性的用法做了注释，有兴趣的朋友可以看一下那个视频，放上链接 https://www.bilibili.com/video/BV1U7411C78K 看完视频不理解的小伙伴可以参考一下我的注释，有些地方我做了微微修改，更符合我的理解，不过大...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值