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中文網其他相關文章！