使用 HTML 和 CSS 创建 Neumorphism 效果
使用 HTML 和 CSS 创建 Neumorphism 效果
Image from TechKnowPrime
见过上述设计并想知道它们是如何创建的吗？
好吧，我有你。
我将向您展示如何仅使用 CSS 和 HTML 创建一个新拟态效果。
让我们从创建一个简单的按钮开始；
<div class=”container”>
<button class=”neuBtn”>点击我！</button>
</div>
使用 CSS；
。容器 {
背景颜色：#e8ecf2；
宽度：100%；
高度：200px；
显示：弯曲；
对齐项目：居中；
证明内容：中心；
} 按钮 {
边框：无；
光标：指针；
高度：50px；
宽度：170px；
过渡：全部；
过渡持续时间：250ms；
显示：弯曲；
对齐项目：居中；
证明内容：中心；
字体大小：16px；
}
你的按钮现在应该是这样的。
现在，让我们添加一些 CSS 来赋予它新拟态效果。
.neuBtn {
背景：#e8ecf2；
颜色：#73787d； 边框半径：9999px； 盒子阴影：-5px -5px 10px rgba(255, 255, 255, 0.8),
5px 5px 10px rgba(0, 0, 0, 0.25);
}
使用这些 CSS 行，您的按钮将获得新拟态效果。
获得 neumorphism 效果的秘诀基于 2 个因素：
1. 父背景颜色必须与元素相同。 （在这种情况下，我们的容器背景与按钮的背景相同）。
2. box-shadow 属性是拼图的最后一块，这使它看起来像新拟态。
我们可以通过向按钮添加悬停效果来更进一步
.neuBtn：悬停{
颜色：#63676b；
盒子阴影：-1px -1px 5px rgba(255, 255, 255, 0.6),
1px 1px 5px rgba(0, 0, 0, 0.3);
}
这使得按钮看起来像是在悬停时被按下的。
我喜欢把它推得更远一点，让它在悬停时看起来像玻璃一样
.neuBtn：悬停{
颜色：#63676b；
盒子阴影：-1px -1px 5px rgba(255, 255, 255, 0.6),
1px 1px 5px rgba(0, 0, 0, 0.3), 插图 -2px -2px 5px rgba(255, 255, 255, 1),
插图 2px 2px 4px rgba(0, 0, 0, 0.3);
}
这里使用的所有代码都在我的代码笔上
继续添加您自己的小调整，我看到人们添加了边框。此外，它可以应用于其他设计元素，如卡片等。
接下来，我将向您展示如何使用 TailwindCSS 执行此操作。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
