Neumorphismus ist ein neuer Designtrend, der Flat Design und Skeuomorphismus kombiniert. Es ist eine minimalistische Art des Designs mit einem weichen, extrudierten Kunststoff, der fast im 3D-Stil aussieht. Derzeit ist dieses Design im Internet im Trend und wird von Designern und Entwicklern häufig verwendet.

Wenn Sie Neumorphismus für Ihr nächstes Projekt ausprobieren möchten, finden Sie hier einige Codeschnipsel, die Ihnen den Einstieg erleichtern.

1. Neumorphe Karten

Verwenden Sie die folgenden HTML- und CSS-Code-Snippets, um die oben genannten neumorphen Karten zu erstellen.

HTML Quelltext

Design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam laboriosam omnis dolore amet sequi nobis Provident nisi esse optio recusandae quod.

Weiterlesen
















Code

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam laboriosam omnis dolore amet sequi nobis Provident nisi esse optio recusandae quod.





instagram viewer


Weiterlesen
















Starten

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam laboriosam omnis dolore amet sequi nobis Provident nisi esse optio recusandae quod.

Weiterlesen

CSS-Code

@import-URL(' https://fonts.googleapis.com/css? family=Poppins: 400,500,600,700,800,900&display=swap');
*
{
Rand: 0;
Polsterung: 0;
Box-Größe: Bordüre-Box;
Schriftfamilie: 'Poppins', serifenlos;
}
Körper
{
Anzeige: flexibel;
rechtfertigen-Inhalt: Mitte;
Ausrichten-Elemente: Mitte;
min-Höhe: 100vh;
Hintergrund: #ebf5fc;
}
.Container
{
Position: relativ;
Anzeige: flexibel;
justify-content: space-around;
Ausrichten-Elemente: Mitte;
Flex-Wrap: Wickel;
Breite: 1100px;
}
.Behälter .Karte
{
Breite: 320px;
Rand: 20px;
Polsterung: 40px 30px;
Hintergrund: #ebf5fc;
Randradius: 40px;
Box-Schatten: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0.1);
}
.container .card: schweben
{
Box-Schatten: Einschub -6px -6px 20px rgba (255,255,255,0.5), Einschub 6px 6px 20px rgba (0,0,0,0.05);
}
.container .card .imgBx
{
Position: relativ;
Textausrichtung: Mitte;
}
.container .card .imgBx img
{
maximale Breite: 120px;
}
.container .card .contentBx
{
Position: relativ;
Rand oben: 20px;
Textausrichtung: Mitte;
}
.container .card .contentBx h2
{
Farbe: #32a3b1;
Schriftstärke: 700;
Schriftgröße: 1,4em;
Buchstabenabstand: 2px;
}
.container .card .contentBx p
{
Farbe: #32a3b1;
}
.container .card .contentBx a
{
Anzeige: Inline-Block;
Polsterung: 10px 20px;
Rand oben: 15px;
Randradius: 40px;
Farbe: #32a3b1;
Schriftgröße: 16px;
Textdekoration: keine;
Box-Schatten: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0.1);
}
.container .card .contentBx a: schweben
{
Box-Schatten: Einschub -4px -4px 10px rgba (255,255,255,0.5), Einschub 4px 4px 10px rgba (0,0,0,0.1);
}
.container .card a: Schwebespanne
{
Bildschirmsperre;
transformieren: Skala (0,98);
}
.container .card: schweben .imgBx,
.container .card: schweben .contentBx
{
transformieren: Skala (0,98);
}

2. Neumorphe Form

Verwenden Sie die folgenden HTML- und CSS-Code-Snippets, um die obige neumorphe Form zu erstellen.

HTML Quelltext

Anmelden










 Einloggen

CSS-Code

Körper, HTML-{
Hintergrundfarbe: #EBECF0;
}
body, p, input, select, textarea, button {
Schriftfamilie: "Montserrat", serifenlos;
Buchstabenabstand: -0,2px;
Schriftgröße: 16px;
}
div, p {
Farbe: #BABECC;
Textschatten: 1px 1px 1px #FFF;
}
bilden {
Polsterung: 16px;
Breite: 320px;
Rand: 0 automatisch;
}
.segment {
Polsterung: 32px 0;
Textausrichtung: Mitte;
}
Taste, Eingabe {
Rand: 0;
Umriss: 0;
Schriftgröße: 16px;
Randradius: 320px;
Polsterung: 16px;
Hintergrundfarbe: #EBECF0;
Textschatten: 1px 1px 0 #FFF;
}
Etikette {
Bildschirmsperre;
Rand-unten: 24px;
Breite: 100 %;
}
Eingabe {
Rand rechts: 8px;
Kastenschatten: Einschub 2px 2px 5px #BABECC, Einschub -5px -5px 10px #FFF;
Breite: 100 %;
Box-Größe: Bordüre-Box;
Übergang: alle 0,2s Easy-In-Out;
Aussehen: keines;
-Webkit-Auftritt: keine;
}
Eingabe: Fokus {
Kastenschatten: Einschub 1px 1px 2px #BABECC, Einschub -1px -1px 2px #FFF;
}
Taste {
Farbe: #61677C;
Schriftdicke: fett;
Kastenschatten: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
Übergang: alle 0,2s Easy-In-Out;
Cursor: Zeiger;
Schriftstärke: 600;
}
Schaltfläche: schweben {
Kastenschatten: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
Schaltfläche: aktiv {
Kastenschatten: Einschub 1px 1px 2px #BABECC, Einschub -1px -1px 2px #FFF;
}
Schaltfläche .Symbol {
Rand rechts: 8px;
}
button.unit {
Randradius: 8px;
Zeilenhöhe: 0;
Breite: 48px;
Höhe: 48px;
Anzeige: Inline-Flex;
rechtfertigen-Inhalt: Mitte;
Ausrichten-Elemente: Mitte;
Rand: 0 8px;
Schriftgröße: 19.2px;
}
button.unit .icon {
Rand-rechts: 0;
}
knopf.rot {
Bildschirmsperre;
Breite: 100 %;
Farbe: #AE1100;
}
.eingabegruppe {
Anzeige: flexibel;
Ausrichten-Elemente: Mitte;
rechtfertigen-Inhalt: Flex-Start;
}
.Eingabegruppenbezeichnung {
Rand: 0;
biegsam: 1;
}

3. Neumorphe Navigationsleiste

Verwenden Sie die folgenden HTML-, CSS- und JavaScript-Code-Snippets, um die obige neumorphe Navigationsleiste zu erstellen.

HTML Quelltext

Verbunden: Beste Websites für hochwertige HTML-Codierungsbeispiele

Neumorphe Navigationsleiste

CSS-Code

* {
Rand: 0;
Polsterung: 0;
Box-Größe: Bordüre-Box;
}
Körper {
Hintergrundfarbe: #efeeee;
}
.nav {
Breite: 100vw;
Höhe: 100px;
Hintergrundfarbe: #efeeee;
Box-Schatten: 10px 10px 12px 0 rgba (0, 0, 0, 0.07);
Randradius: 0 0 10px 10px;
Anzeige: flexibel;
Justify-Inhalt: Flex-Ende;
Ausrichten-Elemente: Mitte;
Polsterung: 0 3rem;
Listenstiltyp: keiner;
}
.nav li.logo {
Rand-rechts: auto;
Schriftfamilie: "Roboto", serifenlos;
Schriftgröße: 1,5rem;
Farbe: dunkelgrau;
Schriftstärke: 900;
Textschatten: 2px 2px 4px rgba (0, 0, 0, 0,3), -2px -2px 4px weiß;
}
.nav li: nicht(.logo) {
Rand: 0 1rem;
Polsterung: 0.5rem 1.5rem;
Rahmen: 2px festes rgba (255, 255, 255, 0,3);
Box-Schatten: 4px 4px 6px 0 rgba (0, 0, 0, 0.1), -4px -4px 6px weiß;
Randradius: 10px;
Schriftfamilie: "Roboto", serifenlos;
Cursor: Zeiger;
Übergang: Farbe 0,2s Ease-Out, Transformation 0,2s Ease-Out;
Farbe: dunkelgrau;
}
.nav li: not(.logo):hover {
transformieren: Skala (1,05);
Box-Schatten: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px weiß;
}
.nav li: nicht(.logo):fokus {
Umriss: keine;
transformieren: Skala (0,95);
Box-Shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px weiß, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) Einschub, -4px -4px 10px Weißeinschub;
}
.nav li: not(.logo):hover, .nav li: not(.logo):fokus {
Farbe: orangerot;
}

JavaScript-Code

feder.replace();

4. Neumorpher Text und Formen

Verwenden Sie die folgenden HTML- und CSS-Code-Snippets, um den obigen neumorphen Text und die obigen Formen zu erstellen.

HTML Quelltext

Verbunden: Der HTML-Essentials-Spickzettel

Kreis

Krapfen

Quadrat

Glattes Quadrat

Becher

Neumorpher Text

Willkommen bei MUO

CSS-Code

Verbunden: Einfache CSS-Codebeispiele, die Sie in 10 Minuten lernen können

*, *::vorher Nachher {
Box-Größe: Bordüre-Box;
}
:Wurzel {
--nFarbe: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0,5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0.5);
}
Körper {
Rand: 0;
Schriftfamilie: serifenlos;
min-Höhe: 100vh;
Anzeige: flexibel;
Ausrichten-Elemente: Mitte;
rechtfertigen-Inhalt: Mitte;
Flex-Wrap: Wickel;
Hintergrund: var(--nColor);
}
.n-Anfang,
.n-Einschub {
Anzeige: flexibel;
Ausrichten-Elemente: Mitte;
rechtfertigen-Inhalt: Mitte;
}
.n-Kreis {
Hintergrundfarbe: var(--nColor);
Kastenschatten: var(--brShadow), var(--tlShadow);
Randradius: 50%;
Breite: 200px;
Höhe: 200px;
Rand: 10px;
}
.n-Donut {
Hintergrundfarbe: var(--nColor);
Kastenschatten: var(--brShadow), var(--tlShadow);
Randradius: 50%;
Breite: 200px;
Höhe: 200px;
Rand: 10px;
}
.n-Donut .n-Einsatz {
Hintergrundfarbe: var(--nColor);
Box-Schatten: Einfügung var(--brShadow), Einfügung var(--tlShadow);
Randradius: 50%;
Breite: 50%;
Höhe: 50%;
Rand: 0;
}
.n-Becher {
Hintergrundfarbe: var(--nColor);
Kastenschatten: var(--brShadow), var(--tlShadow);
Randradius: 50%;
Breite: 200px;
Höhe: 200px;
Rand: 10px;
}
.n-Becher .n-Anfang {
Hintergrundfarbe: var(--nColor);
Kastenschatten: var(--brShadow), var(--tlShadow);
Randradius: 50%;
Breite: 80%;
Höhe: 80%;
Rand: 0;
}
.n-Quadrat {
Hintergrundfarbe: var(--nColor);
Kastenschatten: var(--brShadow), var(--tlShadow);
Randradius: 0;
Breite: 200px;
Höhe: 200px;
Rand: 10px;
}
.n-glatt-sq {
Hintergrundfarbe: var(--nColor);
Kastenschatten: var(--brShadow), var(--tlShadow);
Randradius: 10%;
Breite: 200px;
Höhe: 200px;
Rand: 10px;
}
.n-Text {
Farbe: var(--nColor);
Textschatten: var(--brShadow), var(--tlShadow);
Schriftgröße: 6em;
Schriftdicke: fett;
}

5. Neumorphe Tasten

Verwenden Sie die folgenden HTML-, CSS- und JavaScript-Code-Snippets, um die obigen neumorphen Schaltflächen zu erstellen.

HTML Quelltext

Drücken Sie die Tasten




play_arrow


Pause





Mischen

CSS-Code

@import-URL(' https://fonts.googleapis.com/icon? Familie=Material+Symbole');
Körper{
Hintergrundfarbe: #6ec7ff;
}
.btn-Inhaber{
Bildschirmsperre;
Rand: 0 automatisch;
Rand oben: 64px;
Textausrichtung: Mitte;
}
.Einführungstext{
Rand-unten: 48px;
Schriftfamilie: 'Quicksand', serifenlos;
Farbe weiß;
Schriftgröße: 18px;
}
.btn{
Breite: 110px;
Höhe: 110px;
Schriftgröße: 30px;
Randradius: 30px;
Rand: keine;
Farbe weiß;
vertikal ausrichten: oben;
-Webkit-Übergang: .6s Easy-In-Out;
Übergang: .6s Easy-In-Out;
}
.btn: schweben{
Cursor: Zeiger;
}
.btn: Fokus{
Umriss: keine;
}
.btn: erster Typ{
Rand rechts: 30px;
}
.neumorph{
Hintergrund: linear-Gradient (145deg, #76d5ff, #63b3e6);
Kastenschatten: 30px 30px 40px #1e7689,
-30px -30px 40px #7fe5ff;
Rahmen: 3px festes RGB (255, 255, 255, .4);
}
.neumorph-gepresst{
Hintergrund: linearer Gradient (145deg, #63b3e6, #76d5ff);
-webkit-box-shadow: Einfügung 15px 15px 20px -20px rgba (0,0,0,.5);
-moz-box-shadow: Einfügung 15px 15px 20px -20px rgba (0,0,0,.5);
Box-Schatten: Einschub 15px 15px 20px -20px rgba (0,0,0,.5);
}
.neumorphic: Fokus, .neumorphic: Schweben, .neumorphic: Fokus, .neumorphic: Schweben, .neumorphic-pressed: Fokus, .neumorphic-pressed: Schweben {
Rahmen: 3px festes rgba (46, 74, 112, .75);
}
.Material-Symbol {
Schriftfamilie: 'Material Icons';
Schriftstärke: normal;
Schriftstil: normal;
Schriftgröße: 32px;
Anzeige: Inline-Block;
Zeilenhöhe: 1;
Texttransformation: keine;
Buchstabenabstand: normal;
Zeilenumbruch: normal;
Leerzeichen: jetztrap;
Richtung: ltr;
-webkit-font-smoothing: Antialiasing;
Text-Rendering: optimizeLesibility;
-moz-osx-font-glättung: Graustufen;
Font-Feature-Einstellungen: 'liga';
}
#Pause {
Farbe: #143664;
Anzeige: keine;
}

JavaScript-Code

Funktion changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle("neumorph");
btn.classList.toggle("neumorph-gepresst");
if (btnPressed 'play-pause') {
abspielen();
} else if (btnPressed 'shuffle-btn') {
Mischen();
}
}
Funktion play() {
var playBtn = document.getElementById('play');
var pauseBtn = document.getElementById('pause');
if (playBtn.style.display 'none') {
playBtn.style.display = 'blockieren';
pauseBtn.style.display = 'keine';
} sonst {
playBtn.style.display = 'keine';
pauseBtn.style.display = 'blockieren';
}
}
Funktion Mischen () {
var shuffleBtn = document.getElementById('shuffle-btn');
if (shuffleBtn.style.color == 'weiß' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '#143664';
} sonst {
shuffleBtn.style.color = 'weiß';
}
}

Wenn Sie sich den vollständigen Quellcode ansehen möchten, der in diesem Artikel verwendet wird, ist hier der GitHub-Repository.

Hinweis: Der in diesem Artikel verwendete Code ist MIT-lizenziert.

Gestalten Sie Ihre Website mit Neumorphismus

Sie können das minimalistische Designkonzept des Neumorphismus verwenden, um Ihre Website zu gestalten. Es bietet ein ästhetisch ansprechendes Aussehen. Trotzdem hat Neumorphismus Einschränkungen bei der Zugänglichkeit.

Es gibt verschiedene Möglichkeiten, einer Website ein elegantes Aussehen zu verleihen. Wenn Sie langweilige Boxen auf Ihrer Website gestalten möchten, probieren Sie die CSS-Eigenschaft box-shadow aus.

Yuvraj Chandra (33 veröffentlichte Artikel)

Yuvraj studiert Informatik an der University of Delhi, Indien. Seine Leidenschaft gilt der Full-Stack-Webentwicklung. Wenn er nicht gerade schreibt, erforscht er die Tiefe verschiedener Technologien.

Mehr von Yuvraj Chandra