近年来，UI 设计出现了各种趋势，其中之一就是Neumorphism。这种设计趋势将柔和的嵌入式风格与现代审美相结合，营造出深度和层次感的错觉。在这篇文章中，我们将探讨 Neumorphism 的原理、它的优点和缺点，并提供带有 CSS 代码片段的实际示例，以帮助您在自己的项目中实现这种流行的设计。
Neumorphism，是“新拟物化”的缩写，是一种使用柔和阴影和高光来创建三维外观的设计方法。与模仿现实世界物体的传统拟物设计不同，拟物设计旨在营造更微妙、更现代的感觉。它严重依赖光和影来创造深度感，通常采用单色调色板。
让我们深入研究一些实用的 CSS 示例，以帮助您创建 Neumorphic UI 组件。
<button class="neumorphic-button">Click Me</button>
body {
background-color: #e0e0e0; /* Light background */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.neumorphic-button {
padding: 15px 30px;
border-radius: 12px;
border: none;
background: #e0e0e0; /* Same as body color */
box-shadow: 8px 8px 15px #a3b1c6,
-8px -8px 15px #ffffff; /* Soft shadows */
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
.neumorphic-button:hover {
box-shadow: 4px 4px 10px #a3b1c6,
-4px -4px 10px #ffffff; /* Change shadows on hover */
}
<div class="neumorphic-card">
<h2>Neumorphic Card</h2>
<p>This is an example of a neumorphic card.</p>
</div>
body {
background-color: #e0e0e0; /* Light background */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.neumorphic-card {
padding: 20px;
border-radius: 15px;
background: #e0e0e0;
box-shadow: 10px 10px 20px #a3b1c6,
-10px -10px 20px #ffffff; /* Neumorphic shadows */
width: 300px;
text-align: center;
transition: all 0.3s ease;
}
.neumorphic-card:hover {
box-shadow: 5px 5px 15px #a3b1c6,
-5px -5px 15px #ffffff; /* Lighter shadows on hover */
}
<input type="text" class="neumorphic-input" placeholder="Type something...">
body {
background-color: #e0e0e0; /* Light background */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.neumorphic-input {
padding: 10px;
border-radius: 10px;
border: none;
background: #e0e0e0;
box-shadow: inset 6px 6px 10px #a3b1c6,
inset -6px -6px 10px #ffffff; /* Inner shadows for depth */
width: 300px;
transition: all 0.3s ease;
}
.neumorphic-input:focus {
box-shadow: inset 4px 4px 8px #a3b1c6,
inset -4px -4px 8px #ffffff; /* Adjust shadows on focus */
}
<div class="neumorphic-toggle">
<input type="checkbox" id="toggle" />
<label for="toggle">Toggle</label>
</div>
body {
background-color: #e0e0e0; /* Light background */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.neumorphic-toggle {
display: flex;
align-items: center;
cursor: pointer;
}
.neumorphic-toggle input {
display: none; /* Hide the checkbox */
}
.neumorphic-toggle label {
padding: 10px;
border-radius: 20px;
background: #e0e0e0;
box-shadow: 6px 6px 12px #a3b1c6,
-6px -6px 12px #ffffff;
position: relative;
transition: all 0.3s ease;
}
.neumorphic-toggle input:checked + label {
box-shadow: inset 6px 6px 12px #a3b1c6,
inset -6px -6px 12px #ffffff;
background: #d1d1d1;
}
一款设计工具，可让您创建拟态设计并将其导出为 CSS：
访问 Neumorphism.io
Neumorphism 是一种迷人的设计趋势，它为 UI 设计提供了全新的视角，强调深度和交互性。虽然它有其优点，包括审美吸引力和用户参与度，但设计师也必须对其可访问性和可用性挑战保持谨慎。通过实施提供的 CSS 示例，您可以开始创建 Neumorphic 界面，这些界面不仅现代且具有视觉吸引力，而且功能强大且用户友好。
与任何设计趋势一样，始终考虑目标受众并确保所有用户都可以访问您的界面。设计愉快！
以上是Neumorphism：它是什么和 CSS 示例的详细内容。更多信息请关注PHP中文网其他相关文章！
