Neumorphism is een nieuwe ontwerptrend die plat ontwerp en skeuomorfisme combineert. Het is een minimale manier van ontwerpen met een zacht, geëxtrudeerd plastic, bijna in 3D-stijl. Momenteel is dit ontwerp populair op internet en wordt het veel gebruikt door ontwerpers en ontwikkelaars.

Als u neumorfisme voor uw volgende project wilt uitproberen, zijn hier enkele codefragmenten om u op weg te helpen.

1. Neumorfe kaarten

Gebruik de volgende HTML- en CSS-codefragmenten om de bovenstaande neumorfe kaarten te maken.

HTML code

Ontwerp

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

Lees verder
















Code

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

Lees verder










instagram viewer












Lancering

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

Lees verder

CSS-code

@import-url(' https://fonts.googleapis.com/css? family=Poppins: 400,500,600,700,800,900&display=swap');
*
{
marge: 0;
opvulling: 0;
box-sizing: border-box;
font-familie: 'Poppins', schreefloos;
}
lichaam
{
weergave: flexibel;
rechtvaardigen-inhoud: centrum;
align-items: midden;
min-hoogte: 100vh;
achtergrond: #ebf5fc;
}
.container
{
positie: relatief;
weergave: flexibel;
rechtvaardigen-inhoud: space-around;
align-items: midden;
flexomslag: omslag;
breedte: 1100px;
}
.container .kaart
{
breedte: 320px;
marge: 20px;
opvulling: 40px 30px;
achtergrond: #ebf5fc;
grens-radius: 40px;
box-schaduw: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0.1);
}
.container .card: zweven
{
box-schaduw: inzet -6px -6px 20px rgba (255,255,255,0.5), inzet 6px 6px 20px rgba (0,0,0,0.05);
}
.container .kaart .imgBx
{
positie: relatief;
tekst uitlijnen: midden;
}
.container .kaart .imgBx img
{
maximale breedte: 120px;
}
.container .card .contentBx
{
positie: relatief;
marge-top: 20px;
tekst uitlijnen: midden;
}
.container .card .contentBx h2
{
kleur: #32a3b1;
lettergewicht: 700;
lettergrootte: 1.4em;
letterafstand: 2px;
}
.container .card .contentBx p
{
kleur: #32a3b1;
}
.container .card .contentBx a
{
weergave: inline-blok;
opvulling: 10px 20px;
marge-top: 15px;
grens-radius: 40px;
kleur: #32a3b1;
lettergrootte: 16px;
tekstdecoratie: geen;
box-schaduw: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0.1);
}
.container .card .contentBx a: hover
{
box-schaduw: inzet -4px -4px 10px rgba (255,255,255,0.5), inzet 4px 4px 10px rgba (0,0,0,0.1);
}
.container .card a: hover span
{
weergave: blok;
transformeren: schaal (0,98);
}
.container .card: zweven .imgBx,
.container .card: hover .contentBx
{
transformeren: schaal (0,98);
}

2. Neumorfe vorm

Gebruik de volgende HTML- en CSS-codefragmenten om de bovenstaande neumorfe vorm te maken.

HTML code

Aanmelden










 Log in

CSS-code

lichaam, html {
achtergrondkleur: #EBECF0;
}
body, p, input, select, textarea, button {
font-familie: "Montserrat", schreefloos;
letterafstand: -0,2px;
lettergrootte: 16px;
}
div, p {
kleur: #BABECC;
tekstschaduw: 1px 1px 1px #FFF;
}
het formulier {
opvulling: 16px;
breedte: 320px;
marge: 0 automatisch;
}
.segment {
opvulling: 32px 0;
tekst uitlijnen: midden;
}
knop, invoer {
grens: 0;
overzicht: 0;
lettergrootte: 16px;
grens-radius: 320px;
opvulling: 16px;
achtergrondkleur: #EBECF0;
tekstschaduw: 1px 1px 0 #FFF;
}
etiket {
weergave: blok;
marge-onder: 24px;
breedte: 100%;
}
invoer {
marge-rechts: 8px;
box-schaduw: inzet 2px 2px 5px #BABECC, inzet -5px -5px 10px #FFF;
breedte: 100%;
box-sizing: border-box;
overgang: alle 0.2s gemak-in-out;
uiterlijk: geen;
-webkit-uiterlijk: geen;
}
invoer: focus {
box-shadow: inzet 1px 1px 2px #BABECC, inzet -1px -1px 2px #FFF;
}
knop {
kleur: #61677C;
lettergewicht: vet;
doosschaduw: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
overgang: alle 0.2s gemak-in-out;
cursor: aanwijzer;
lettergewicht: 600;
}
knop: zweef {
doosschaduw: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
knop: actief {
box-shadow: inzet 1px 1px 2px #BABECC, inzet -1px -1px 2px #FFF;
}
knop .icoon {
marge-rechts: 8px;
}
knop.eenheid {
grensradius: 8px;
lijnhoogte: 0;
breedte: 48px;
hoogte: 48px;
weergave: inline-flex;
rechtvaardigen-inhoud: centrum;
align-items: midden;
marge: 0 8px;
lettergrootte: 19.2px;
}
knop.eenheid .icon {
marge-rechts: 0;
}
knop.rood {
weergave: blok;
breedte: 100%;
kleur: #AE1100;
}
.invoergroep {
weergave: flexibel;
align-items: midden;
rechtvaardigen-inhoud: flex-start;
}
.invoergroeplabel {
marge: 0;
buigen: 1;
}

3. Neumorfe navigatiebalk

Gebruik de volgende HTML-, CSS- en JavaScript-codefragmenten om de bovenstaande neumorfische navigatiebalk te maken.

HTML code

Verwant: Beste sites voor hoogwaardige HTML-coderingsvoorbeelden

Neumorfe navigatiebalk

CSS-code

* {
marge: 0;
opvulling: 0;
box-sizing: border-box;
}
lichaam {
achtergrondkleur: #efeeee;
}
.nav {
breedte: 100vw;
hoogte: 100px;
achtergrondkleur: #efeeee;
box-schaduw: 10px 10px 12px 0 rgba (0, 0, 0, 0.07);
grensradius: 0 0 10px 10px;
weergave: flexibel;
rechtvaardigen-inhoud: flex-end;
align-items: midden;
vulling: 0 3rem;
lijst-stijl-type: geen;
}
.nav li.logo {
marge-rechts: auto;
font-familie: "Roboto", schreefloos;
lettergrootte: 1.5rem;
kleur: donkergrijs;
lettergewicht: 900;
tekstschaduw: 2px 2px 4px rgba (0, 0, 0, 0.3), -2px -2px 4px wit;
}
.nav li: niet(.logo) {
marge: 0 1rem;
opvulling: 0,5rem 1,5rem;
rand: 2px effen rgba (255, 255, 255, 0.3);
box-schaduw: 4px 4px 6px 0 rgba (0, 0, 0, 0.1), -4px -4px 6px wit;
grens-radius: 10px;
font-familie: "Roboto", schreefloos;
cursor: aanwijzer;
overgang: kleur 0.2s gemak-out, transformatie 0.2s gemak-out;
kleur: donkergrijs;
}
.nav li: niet(.logo):hover {
transformeren: schaal (1,05);
box-schaduw: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px wit;
}
.nav li: niet(.logo):focus {
overzicht: geen;
transformeren: schaal (0,95);
box-schaduw: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px wit, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) inzet, -4px -4px 10px witte inzet;
}
.nav li: niet(.logo):hover, .nav li: niet(.logo):focus {
kleur: oranjerood;
}

JavaScript-code

veer.replace();

4. Neumorfe tekst en vormen

Gebruik de volgende HTML- en CSS-codefragmenten om de bovenstaande neumorfe tekst en vormen te maken.

HTML code

Verwant: De HTML Essentials-spiekbrief

Cirkel

Donut

Plein

Glad vierkant

Tuimelaar

Neumorfe tekst

Welkom bij MUO

CSS-code

Verwant: Eenvoudige CSS-codevoorbeelden die u in 10 minuten kunt leren

*, *::Voor na {
box-sizing: border-box;
}
:wortel {
--nKleur: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0.5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0.5);
}
lichaam {
marge: 0;
font-familie: schreefloos;
min-hoogte: 100vh;
weergave: flexibel;
align-items: midden;
rechtvaardigen-inhoud: centrum;
flexomslag: omslag;
achtergrond: var(--nColor);
}
.n-begin,
.n-inzet {
weergave: flexibel;
align-items: midden;
rechtvaardigen-inhoud: centrum;
}
.n-cirkel {
achtergrondkleur: var(--nColor);
box-schaduw: var(--brShadow), var(--tlShadow);
grensradius: 50%;
breedte: 200px;
hoogte: 200px;
marge: 10px;
}
.n-donut {
achtergrondkleur: var(--nColor);
box-schaduw: var(--brShadow), var(--tlShadow);
grensradius: 50%;
breedte: 200px;
hoogte: 200px;
marge: 10px;
}
.n-donut .n-inzet {
achtergrondkleur: var(--nColor);
box-shadow: inzet var(--brShadow), inzet var(--tlShadow);
grensradius: 50%;
breedte: 50%;
hoogte: 50%;
marge: 0;
}
.n-tuimelaar {
achtergrondkleur: var(--nColor);
box-schaduw: var(--brShadow), var(--tlShadow);
grensradius: 50%;
breedte: 200px;
hoogte: 200px;
marge: 10px;
}
.n-tuimelaar .n-begin {
achtergrondkleur: var(--nColor);
box-schaduw: var(--brShadow), var(--tlShadow);
grensradius: 50%;
breedte: 80%;
hoogte: 80%;
marge: 0;
}
.n-vierkant {
achtergrondkleur: var(--nColor);
box-schaduw: var(--brShadow), var(--tlShadow);
grensradius: 0;
breedte: 200px;
hoogte: 200px;
marge: 10px;
}
.n-glad-sq {
achtergrondkleur: var(--nColor);
box-schaduw: var(--brShadow), var(--tlShadow);
grensradius: 10%;
breedte: 200px;
hoogte: 200px;
marge: 10px;
}
.n-tekst {
kleur: var(--nColor);
tekstschaduw: var(--brShadow), var(--tlShadow);
lettergrootte: 6em;
lettergewicht: vet;
}

5. Neumorfe knoppen

Gebruik de volgende HTML-, CSS- en JavaScript-codefragmenten om de bovenstaande neumorfische knoppen te maken.

HTML code

Druk op de knoppen




play_arrow


pauze





shuffle

CSS-code

@import-url(' https://fonts.googleapis.com/icon? family=Materiaal+Pictogrammen');
lichaam{
achtergrondkleur: #6ec7ff;
}
.btn-houder{
weergave: blok;
marge: 0 automatisch;
marge-top: 64px;
tekst uitlijnen: midden;
}
.intro tekst{
marge-onder: 48px;
font-familie: 'Quicksand', schreefloos;
kleur wit;
lettergrootte: 18px;
}
.btn{
breedte: 110px;
hoogte: 110px;
lettergrootte: 30px;
grens-radius: 30px;
grens: geen;
kleur wit;
verticaal uitlijnen: boven;
-webkit-overgang: .6s gemak-in-out;
overgang: .6s gemak-in-uit;
}
.btn: zweef{
cursor: aanwijzer;
}
.btn: focus{
overzicht: geen;
}
.btn: eerste-van-type{
marge-rechts: 30px;
}
.neumorf{
achtergrond: lineair verloop (145deg, #76d5ff, #63b3e6);
doosschaduw: 30px 30px 40px #1e7689,
-30px -30px 40px #7fe5ff;
rand: 3px solide rgba (255, 255, 255, .4);
}
.neumorphic-pressed{
achtergrond: lineair verloop (145deg, #63b3e6, #76d5ff);
-webkit-box-schaduw: inzet 15px 15px 20px -20px rgba (0,0,0,.5);
-moz-box-schaduw: inzet 15px 15px 20px -20px rgba (0,0,0,.5);
box-schaduw: inzet 15px 15px 20px -20px rgba (0,0,0,.5);
}
.neumorphic: focus, .neumorphic: hover, .neumorphic: focus, .neumorphic: hover, .neumorphic-pressed: focus, .neumorphic-pressed: hover {
rand: 3px effen rgba (46, 74, 112, .75);
}
.materiaal-icoon {
font-familie: 'Material Icons';
lettergewicht: normaal;
lettertype-stijl: normaal;
lettergrootte: 32px;
weergave: inline-blok;
lijnhoogte: 1;
teksttransformatie: geen;
letter-spatiëring: normaal;
woordomslag: normaal;
witruimte: nowrap;
richting: ltr;
-webkit-font-smoothing: geantialiaseerd;
tekstweergave: optimaliseerLegibility;
-moz-osx-font-smoothing: grijswaarden;
font-feature-settings: 'liga';
}
#pauze {
kleur: #143664;
Geen weergeven;
}

JavaScript-code

functie changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle("neumorf");
btn.classList.toggle("neumorphic-pressed");
if (btn Druk op 'afspeelpauze') {
Speel();
} else if (btn Druk op 'shuffle-btn') {
shuffle();
}
}
functie afspelen() {
var playBtn = document.getElementById('play');
var pauseBtn = document.getElementById('pauze');
if (playBtn.style.display 'geen') {
playBtn.style.display = 'blokkeren';
pauseBtn.style.display = 'geen';
} anders {
playBtn.style.display = 'geen';
pauseBtn.style.display = 'blokkeren';
}
}
functie shuffle() {
var shuffleBtn = document.getElementById('shuffle-btn');
if (shuffleBtn.style.color == 'wit' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '#143664';
} anders {
shuffleBtn.style.color = 'wit';
}
}

Als je de volledige broncode wilt bekijken die in dit artikel wordt gebruikt, is hier de: GitHub-opslagplaats.

Opmerking: De code die in dit artikel wordt gebruikt is MIT-licentie.

Stijl uw website met neumorfisme

U kunt het minimalistische ontwerpconcept van neumorphism gebruiken om uw website te stylen. Het zorgt voor een esthetische uitstraling. Maar toch heeft neumorfisme toegankelijkheidsbeperkingen.

Er zijn verschillende manieren om een ​​website een elegante uitstraling te geven. Als je saaie vakken op je website wilt stylen, probeer dan de box-shadow CSS-eigenschap.

Yuvraj Chandra (33 artikelen gepubliceerd)

Yuvraj is een student Computerwetenschappen aan de Universiteit van Delhi, India. Hij is gepassioneerd door Full Stack Web Development. Als hij niet aan het schrijven is, onderzoekt hij de diepte van verschillende technologieën.

Meer van Yuvraj Chandra