Neumorphismus: Was es ist und CSS-Beispiele

In den letzten Jahren sind im UI-Design verschiedene Trends entstanden, darunter Neumorphismus. Dieser Designtrend kombiniert weiche, eingesetzte Stile mit einer modernen Ästhetik und erzeugt so eine Illusion von Tiefe und Schichtung. In diesem Beitrag werden wir die Prinzipien des Neumorphismus, seine Vor- und Nachteile untersuchen und praktische Beispiele mit CSS-Code-Snippets bereitstellen, um Ihnen bei der Umsetzung dieses trendigen Designs in Ihren eigenen Projekten zu helfen.

Was ist Neumorphismus?

Neumorphismus, kurz für "neuer Skeuomorphismus", ist ein Designansatz, der weiche Schatten und Lichter verwendet, um ein dreidimensionales Erscheinungsbild zu erzeugen. Im Gegensatz zum traditionellen skeuomorphen Design, das reale Objekte nachahmt, zielt Neumorphismus auf ein subtileres, moderneres Gefühl ab. Es setzt stark auf Licht und Schatten, um ein Gefühl von Tiefe zu erzeugen, und verwendet oft eine monochromatische Farbpalette.

Hauptmerkmale des Neumorphismus

1. Weiche Schatten: Neumorphische Elemente haben typischerweise sowohl innere als auch äußere Schatten, die ein weiches, erhabenes Erscheinungsbild erzeugen.
2. Monochromatische Farbschemata: Die Verwendung ähnlicher Farbtöne für den Hintergrund und die Elemente sorgt für einen nahtlosen Look.
3. Minimalistische Ästhetik: Neumorphismus umfasst oft Minimalismus und konzentriert sich auf Einfachheit und Benutzerfreundlichkeit.
4. Interaktives Feedback: Hover- und aktive Zustände erfordern häufig das Ändern von Schatten oder Farben, um den Benutzern Feedback zu geben.

Vorteile des Neumorphismus

• Ästhetischer Reiz: Neumorphismus kann visuell interessante Schnittstellen schaffen, die Benutzer ansprechen.
• Tiefenwahrnehmung: Die Verwendung von Schatten vermittelt ein Gefühl von Schichtung und verbessert so das gesamte Benutzererlebnis.
• Fördert die Interaktion: Die visuellen Hinweise können dazu führen, dass Benutzer eher dazu neigen, mit UI-Elementen zu interagieren.

Herausforderungen des Neumorphismus

• Probleme mit der Barrierefreiheit: Der geringe Kontrast und das dezente Design sind möglicherweise nicht für alle Benutzer leicht erkennbar, insbesondere für Benutzer mit Sehbehinderungen.
• Übermäßiger Gebrauch: Übermäßiger Gebrauch von Neumorphismus kann zu visueller Unordnung führen und die Navigation in den Benutzeroberflächen erschweren.
• Leistung: Starke Schatteneffekte können die Leistung beeinträchtigen, insbesondere auf Mobilgeräten.

CSS-Beispiele für Neumorphismus

Lassen Sie uns in einige praktische CSS-Beispiele eintauchen, die Ihnen beim Erstellen neumorphischer UI-Komponenten helfen.

Neumorphischer Knopf

<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 */
}

Neumorphische Karte

<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 */
}

Neumorphisches Eingabefeld

<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 */
}

Neumorphischer Kippschalter

<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;
}

App zum Erstellen von Websites, die Neumorphismus im Design berücksichtigen

Ein Design-Tool, mit dem Sie neumorphische Designs erstellen und als CSS exportieren können:

Besuchen Sie Neumorphism.io

Abschluss

Neumorphismus ist ein faszinierender Designtrend, der eine neue Perspektive auf das UI-Design bietet und dabei Tiefe und Interaktivität betont. Obwohl es seine Vorteile hat, einschließlich ästhetischer Attraktivität und Benutzereinbindung, müssen Designer auch auf die Herausforderungen bei Zugänglichkeit und Benutzerfreundlichkeit achten. Durch die Implementierung der bereitgestellten CSS-Beispiele können Sie mit der Erstellung neumorphischer Schnittstellen beginnen, die nicht nur modern und optisch ansprechend, sondern auch funktional und benutzerfreundlich sind.

Berücksichtigen Sie wie bei jedem Designtrend immer die Zielgruppe und stellen Sie sicher, dass Ihre Benutzeroberfläche für alle Benutzer zugänglich bleibt. Viel Spaß beim Gestalten!

Das obige ist der detaillierte Inhalt vonNeumorphismus: Was es ist und CSS-Beispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!