Neumorphism : 集拟态美 ? 不不不,就是聊一聊CSS拟态而已啦。八千多字,我是扯了啥呀。

最近有些忙,考驾照,上课,处理项目依赖。就没怎么学习新知识和发文章咯。
今天周六,聊一聊 拟态吧。英文怎么读我是不知道的。就随便读吧。哈哈

Neumorphism——新拟态设计

什么是 Neumorphism

Neumorphism - 新拟态UI风格是目前比较新颖的一种前端css设计风格.
它的格调简单,基本颜色比较浅,如米白,浅灰,浅蓝等。
再利用阴影呈现出凹凸效果。看起来和简单舒适,且有3D效果。因此我们可以通过拟态设计出很多优美的页面。
如下图 :
在这里插入图片描述

什么是 Skeuomorphism

Neumorphism可以说是“New” 和 “Skeuomorphism”的”巧妙”结合。

为了更好了解 Neumorphism 的特殊,并且顺便了解UI设计的几个趋势,我们可以先了解一下 Skeuomorphism 这个东西。

Skeuomorphism拟物化

先来看一张图 :
在这里插入图片描述
图片来源网络,侵删

无论从字面意思还是图片,我可以知道,拟物化就是模拟现实的物体,包括形状,颜色,花纹,特殊标志的。不仅颜色丰富,而且有3D效果,细节较完善。

拟物化的潮流已经过去,但还有一些地方我们还使用的。因为它能让人一眼看出这个图标到底是干嘛的。如按钮。
这也突出了新拟态设计的一个缺点,新拟态细节少,颜色简单,可能会让人不能一下子就知道是干什么的。

与扁平化的不同

扁平化设计是继拟物化后的一个潮流。一直到现在。
诺 :
在这里插入图片描述
在这里插入图片描述
简单粗暴。
一个扁平的图标,不需要3D效果,不需要去刻意模拟物体。

而新拟态设计是颜色基调简单,有3D效果的。

CSS怎么实现

逼逼赖赖那么久,终于谈到怎么实现了。
其实 灰常简单。简易设计也是 Neumorphism 的一个特点。
关键就在于一个CSS样式 : box-shadow
不熟悉 box-shadow? 点这里

通过改变盒子阴影的位置和颜色,使盒子出现3D效果。

注意,新拟态设计的风格是颜色简单,莫过于花里胡哨(但非必要,喜欢花里胡哨当然也可以)

demo1

<!DOCTYPE html>
<html lang="en">
<head>
    <title>拟态</title>
</head>

<body>
    <div class="cir"></div>
</body>
<style>
    body {
     
       /* 设置基本色调 */
        background-color: #c9d6e6;
    }

    .cir {
     
        margin: 200px auto;
        width: 200px;
        height: 200px;
        border-radius: 50%;
     					   /* 灰色阴影 */   				 /* 白色阴影 */
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.19), -10px -10px 20px rgba(255, 255, 255, .9);
    }
</style>
</html>

右下角的灰色阴影左上角的白色阴影

当然你也可以改变方向,不一定是右下角灰,左上角白。但位置一定是相对面的。

有凸出来的,便有凹下去的。

demo2:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>拟态</title>
</head>
<body>
    <div class="cir"></div>
</body>
<style>
    body {
     
        background-color: #c9d6e6;
    }

    .cir {
     
        margin: 200px auto;
        width: 200px;
        height: 200px;
        border-radius: 50%;
				/* 不同点就是将阴影设置到盒子内部,缩小了一下阴影 */
        box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.19), inset -6px -6px 12px rgba(255, 255, 255, .9);
    }
</style>
</html>

在这里插入图片描述
方法一样,就是设置阴影,只不过是设置到盒子内部,也就是加上 inset
盒子内部阴影可以不用那么大。我顺便缩小了一下阴影。

demo3:

先对比这两个圆 :
在这里插入图片描述
可以看出 B图 的圆是有微微向内凹进去的。这可不同于 demo2 的凹。
那么它是如何实现的呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <title>拟态</title>
</head>
<body>
    <div class="cir"></div>
  • 13
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,以下是一个简单的拟态滑动登录注册页面的样式和代码: HTML代码: ``` <div class="container"> <div class="form-container sign-up-container"> <form action="#"> <h1>Create Account</h1> <input type="text" placeholder="Name" /> <input type="email" placeholder="Email" /> <input type="password" placeholder="Password" /> <button>Sign Up</button> </form> </div> <div class="form-container sign-in-container"> <form action="#"> <h1>Sign in</h1> <input type="email" placeholder="Email" /> <input type="password" placeholder="Password" /> <a href="#">Forgot your password?</a> <button>Sign In</button> </form> </div> <div class="overlay-container"> <div class="overlay"> <div class="overlay-panel overlay-left"> <h1>Welcome Back!</h1> <p>To keep connected with us please login with your personal info</p> <button class="ghost" id="signIn">Sign In</button> </div> <div class="overlay-panel overlay-right"> <h1>Hello, Friend!</h1> <p>Enter your personal details and start journey with us</p> <button class="ghost" id="signUp">Sign Up</button> </div> </div> </div> </div> ``` CSS代码: ``` @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); * { box-sizing: border-box; } body { background-color: #f6f5f7; font-family: 'Montserrat', sans-serif; } .container { background-color: #fff; border-radius: 10px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); position: relative; overflow: hidden; width: 100%; max-width: 1000px; min-height: 560px; } .form-container { position: absolute; top: 0; height: 100%; transition: all 0.6s ease-in-out; } .sign-in-container { left: 0; width: 50%; z-index: 2; } .sign-up-container { left: 0; width: 50%; opacity: 0; z-index: 1; } .overlay-container { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden; transition: transform 0.6s ease-in-out; z-index: 100; } .overlay { background: #FF416C; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #FF4B2B, #FF416C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background-repeat: no-repeat; background-size: cover; background-position: 0 0; color: #fff; position: relative; left: -100%; height: 100%; width: 200%; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-panel { position: absolute; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 40px; height: 100%; width: 50%; text-align: center; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-left { transform: translateX(-20%); } .overlay-right { right: 0; transform: translateX(0); } .form-container.sign-up-container { transform: translateX(100%); opacity: 1; z-index: 2; } .form-container.sign-in-container { transform: translateX(0%); z-index: 1; } .form { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; } form input { background-color: #eee; border: none; padding: 12px 15px; margin: 8px 0; width: 100%; border-radius: 20px; border-bottom: 2px solid #fff; font-family: 'Montserrat', sans-serif; font-weight: 500; } form input:focus { outline: none; border-bottom: 2px solid #FF4B2B; } form button { background-color: #FF4B2B; color: #fff; border: none; border-radius: 20px; padding: 12px 20px; margin: 20px 0; width: 100%; font-family: 'Montserrat', sans-serif; font-weight: 500; cursor: pointer; transition: all 0.3s ease-in-out; } form button:hover { background-color: #fff; color: #FF4B2B; border: 1px solid #FF4B2B; } form button.ghost { background-color: transparent; border-color: #fff; } form a { color: #8e8e8e; font-size: 14px; text-decoration: none; } form a:hover { text-decoration: underline; } .overlay-right .ghost { background-color: #fff; border-color: #fff; color: #FF4B2B; } .overlay-right .ghost:hover { background-color: #FF4B2B; color: #fff; } .overlay-right button { background-color: transparent; border-color: #fff; color: #fff; } .overlay-right button:hover { background-color: #fff; color: #FF4B2B; border-color: #fff; } ``` JavaScript代码: ``` const signUpButton = document.getElementById('signUp'); const signInButton = document.getElementById('signIn'); const container = document.getElementById('container'); signUpButton.addEventListener('click', () => { container.classList.add('right-panel-active'); }); signInButton.addEventListener('click', () => { container.classList.remove('right-panel-active'); }); ``` 以上代码实现了一个拟态滑动登录注册页面,其中包括两个表单(登录和注册),以及一个覆盖整个页面的背景和两个覆盖表单的覆盖层。通过点击“Sign Up”或“Sign In”按钮,可以在两个表单之间进行切换,同时覆盖层和背景也会相应地滑动切换。您可以根据需要进行修改和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无糖的酸奶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值