Neumorphism：它是什么和 CSS 示例

近年来，UI 设计出现了各种趋势，其中之一就是Neumorphism。这种设计趋势将柔和的嵌入式风格与现代审美相结合，营造出深度和层次感的错觉。在这篇文章中，我们将探讨 Neumorphism 的原理、它的优点和缺点，并提供带有 CSS 代码片段的实际示例，以帮助您在自己的项目中实现这种流行的设计。

什么是同态？

Neumorphism，是“新拟物化”的缩写，是一种使用柔和阴影和高光来创建三维外观的设计方法。与模仿现实世界物体的传统拟物设计不同，拟物设计旨在营造更微妙、更现代的感觉。它严重依赖光和影来创造深度感，通常采用单色调色板。

同态的主要特征

1. 柔和阴影：同态元素通常具有内部和外部阴影，创造出柔和、提升的外观。
2. 单色配色方案：对背景和元素使用相似的色调可创建无缝的外观。
3. 极简主义美学：同态主义通常拥抱极简主义，注重简单性和可用性。
4. 交互式反馈：悬停和活动状态通常涉及更改阴影或颜色以向用户提供反馈。

同态的优点

• 审美吸引力：同态可以创建吸引用户的视觉上有趣的界面。
• 深度感知：阴影的使用给人一种层次感，改善整体用户体验。
• 鼓励互动：视觉提示可以让用户更倾向于与UI元素进行互动。

同质化的挑战

• 辅助功能问题：低对比度和微妙的设计可能不容易被所有用户察觉，特别是那些有视觉障碍的用户。
• 过度使用：过度使用同态会导致视觉混乱，并使界面更难以导航。
• 性能：严重的阴影效果会影响性能，尤其是在移动设备中。

CSS 同态的例子

让我们深入研究一些实用的 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中文网其他相关文章！