Neumorfizm to nowy trend w projektowaniu, który łączy płaskie wzornictwo i skeuomorfizm. To minimalistyczny sposób projektowania z miękkim, wytłaczanym plastikiem, niemal w stylu 3D. Obecnie ten projekt zyskuje popularność w Internecie i jest szeroko stosowany przez projektantów i programistów.

Jeśli chcesz wypróbować neumorfizm w swoim następnym projekcie, oto kilka fragmentów kodu, które pomogą Ci zacząć.

1. Karty neumorficzne

Użyj poniższych fragmentów kodu HTML i CSS, aby utworzyć powyższe karty neumorficzne.

Kod HTML

Projekt

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

Czytaj więcej
















Kod

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

Czytaj więcej






instagram viewer












Uruchomić

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

Czytaj więcej

Kod CSS

@importuj adres URL(' https://fonts.googleapis.com/css? family=Poppiny: 400,500,600,700,800,900&display=swap');
*
{
margines: 0;
wypełnienie: 0;
rozmiar pudełka: obramowanie-pudełko;
rodzina czcionek: 'Poppins', bezszeryfowa;
}
ciało
{
wyświetlacz: elastyczny;
uzasadnić-treść: centrum;
wyrównaj-elementy: centrum;
wysokość min: 100vh;
tło: #ebf5fc;
}
.pojemnik
{
pozycja: względna;
wyświetlacz: elastyczny;
uzasadnić-treść: spacja-around;
wyrównaj-elementy: centrum;
flex-wrap: owijka;
szerokość: 1100px;
}
.kontener .karta
{
szerokość: 320px;
margines: 20px;
dopełnienie: 40px 30px;
tło: #ebf5fc;
promień obramowania: 40px;
box-shadow: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0.1);
}
.kontener .karta: najedź
{
box-shadow: wstawka -6px -6px 20px rgba (255,255,255,0.5), wstawka 6px 6px 20px rgba (0,0,0,0.05);
}
.kontener .karta .imgBx
{
pozycja: względna;
wyrównanie tekstu: środek;
}
.kontener .karta .imgBx img
{
maksymalna szerokość: 120px;
}
.kontener .karta .contentBx
{
pozycja: względna;
margines górny: 20px;
wyrównanie tekstu: środek;
}
.kontener .karta .contentBx h2
{
kolor: #32a3b1;
grubość czcionki: 700;
rozmiar czcionki: 1.4em;
odstępy między literami: 2px;
}
.kontener .karta .contentBx p
{
kolor: #32a3b1;
}
.kontener .karta .contentBx a
{
wyświetlacz: inline-block;
dopełnienie: 10px 20px;
margines górny: 15px;
promień obramowania: 40px;
kolor: #32a3b1;
rozmiar czcionki: 16px;
dekoracja tekstu: brak;
box-shadow: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0.1);
}
.kontener .karta .contentBx a: hover
{
box-shadow: wstawka -4px -4px 10px rgba (255,255,255,0.5), wstawka 4px 4px 10px rgba (0,0,0,0.1);
}
.kontener .karta a: rozpiętość najechania
{
Blok wyświetlacza;
transformacja: skala (0,98);
}
.container .card: najedź na .imgBx,
.kontener .karta: najedź na .contentBx
{
transformacja: skala (0,98);
}

2. Postać neumorficzna

Użyj poniższych fragmentów kodu HTML i CSS, aby utworzyć powyższy formularz neumorficzny.

Kod HTML

Zapisz się










 Zaloguj sie

Kod CSS

treść, html {
kolor tła: #EBECF0;
}
treść, p, wprowadzanie, wybierz, obszar tekstowy, przycisk {
rodzina czcionek: „Montserrat”, bezszeryfowa;
odstępy między literami: -0,2px;
rozmiar czcionki: 16px;
}
div, p {
kolor: #BABECC;
cień tekstu: 1px 1px 1px #FFF;
}
Formularz {
dopełnienie: 16px;
szerokość: 320px;
margines: 0 auto;
}
.człon {
dopełnienie: 32px 0;
wyrównanie tekstu: środek;
}
przycisk, wprowadź {
granica: 0;
zarys: 0;
rozmiar czcionki: 16px;
promień obramowania: 320px;
dopełnienie: 16px;
kolor tła: #EBECF0;
cień tekstu: 1px 1px 0 #FFF;
}
etykieta {
Blok wyświetlacza;
margines-dolny: 24px;
szerokość: 100%;
}
Wejście {
margines prawy: 8px;
box-shadow: wstawka 2px 2px 5px #BABECC, wstawka -5px -5px 10px #FFF;
szerokość: 100%;
rozmiar pudełka: obramowanie-pudełko;
przejście: wszystkie 0,2 s luzy na zewnątrz;
wygląd: brak;
-Wygląd webkita: brak;
}
wejście: fokus {
box-shadow: wstawka 1px 1px 2px #BABECC, wstawka -1px -1px 2px #FFF;
}
przycisk {
kolor: #61677C;
grubość czcionki: pogrubiona;
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
przejście: wszystkie 0,2 s luzy na zewnątrz;
kursor: wskaźnik;
grubość czcionki: 600;
}
przycisk: najedź {
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
przycisk: aktywny {
box-shadow: wstawka 1px 1px 2px #BABECC, wstawka -1px -1px 2px #FFF;
}
przycisk .ikona {
margines prawy: 8px;
}
przycisk.jednostka {
promień obramowania: 8px;
wysokość linii: 0;
szerokość: 48px;
wysokość: 48px;
wyświetlacz: wbudowany flex;
uzasadnić-treść: centrum;
wyrównaj-elementy: centrum;
margines: 0 8px;
rozmiar czcionki: 19,2px;
}
przycisk.jednostka .ikona {
margines prawy: 0;
}
przycisk.czerwony {
Blok wyświetlacza;
szerokość: 100%;
kolor: #AE1100;
}
.grupa-wejść {
wyświetlacz: elastyczny;
wyrównaj-elementy: centrum;
uzasadnić-treść: flex-start;
}
etykieta .input-group {
margines: 0;
elastyczność: 1;
}

3. Neumorficzny pasek nawigacyjny

Użyj poniższych fragmentów kodu HTML, CSS i JavaScript, aby utworzyć powyższy neuromorficzny pasek nawigacyjny.

Kod HTML

Związane z: Najlepsze strony z przykładami wysokiej jakości kodowania HTML

Neumorficzny pasek nawigacyjny

Kod CSS

* {
margines: 0;
wypełnienie: 0;
rozmiar pudełka: obramowanie-pudełko;
}
ciało {
kolor tła: #efeeeee;
}
.nav {
szerokość: 100vw;
wysokość: 100px;
kolor tła: #efeeeee;
box-shadow: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
obramowanie-promień: 0 0 10px 10px;
wyświetlacz: elastyczny;
uzasadnić-treść: flex-end;
wyrównaj-elementy: centrum;
wypełnienie: 0 3rem;
typ-listy: brak;
}
.nav li.logo {
margines prawy: auto;
rodzina czcionek: "Roboto", bezszeryfowa;
rozmiar czcionki: 1,5 rem;
kolor: ciemnoszary;
grubość czcionki: 900;
cień tekstu: 2px 2px 4px rgba (0, 0, 0, 0,3), -2px -2px 4px biały;
}
.nav li: nie(.logo) {
marża: 0 1rem;
wypełnienie: 0.5rem 1.5rem;
obramowanie: 2px solid rgba (255, 255, 255, 0,3);
box-shadow: 4px 4px 6px 0 rgba (0, 0, 0, 0,1), -4px -4px 6px biały;
promień obramowania: 10px;
rodzina czcionek: "Roboto", bezszeryfowa;
kursor: wskaźnik;
przejście: spadek koloru 0,2 s, spowolnienie transformacji 0,2 s;
kolor: ciemnoszary;
}
.nav li: nie(.logo):najedź {
transformacja: skala (1,05);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px biały;
}
.nav li: nie(.logo): skupienie {
zarys: brak;
transformacja: skala (0,95);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px biały, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) wstawka, -4px -4px 10px biała wstawka;
}
.nav li: nie(.logo):najedź, .nav li: nie(.logo):skup się {
kolor: pomarańczowoczerwony;
}

Kod JavaScript

pióro.zamień();

4. Tekst i kształty neumorficzne

Użyj poniższych fragmentów kodu HTML i CSS, aby utworzyć powyższy tekst i kształty neumorficzne.

Kod HTML

Związane z: Ściągawka z podstawami HTML

okrąg

Pączek

Kwadrat

Gładki kwadrat

Kubek

Tekst neumorficzny

Witamy w MUO

Kod CSS

Związane z: Proste przykłady kodu CSS, których możesz się nauczyć w 10 minut

*, *::przed po {
rozmiar pudełka: obramowanie-pudełko;
}
:korzeń {
--nKolor: #aaa;
--brCień: -6px 6px 10px rgba (0,0,0,0,5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0,5);
}
ciało {
margines: 0;
rodzina czcionek: bezszeryfowa;
wysokość min: 100vh;
wyświetlacz: elastyczny;
wyrównaj-elementy: centrum;
uzasadnić-treść: centrum;
flex-wrap: owijka;
tło: var(--nKolor);
}
.n-początek,
.n-wstawka {
wyświetlacz: elastyczny;
wyrównaj-elementy: centrum;
uzasadnić-treść: centrum;
}
.n-koło {
kolor tła: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
promień graniczny: 50%;
szerokość: 200px;
wysokość: 200px;
margines: 10px;
}
.n-pączek {
kolor tła: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
promień graniczny: 50%;
szerokość: 200px;
wysokość: 200px;
margines: 10px;
}
.n-pączek .n-wstawka {
kolor tła: var(--nColor);
box-shadow: wstawka var(--brShadow), wstawka var(--tlShadow);
promień graniczny: 50%;
szerokość: 50%;
wzrost: 50%;
margines: 0;
}
.n-kubek {
kolor tła: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
promień graniczny: 50%;
szerokość: 200px;
wysokość: 200px;
margines: 10px;
}
.n-tumbler .n-początek {
kolor tła: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
promień graniczny: 50%;
szerokość: 80%;
wzrost: 80%;
margines: 0;
}
.n-kwadrat {
kolor tła: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
promień granicy: 0;
szerokość: 200px;
wysokość: 200px;
margines: 10px;
}
.n-gładki-kwadrat {
kolor tła: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
promień graniczny: 10%;
szerokość: 200px;
wysokość: 200px;
margines: 10px;
}
.n-tekst {
kolor: var(--nKolor);
cień tekstowy: var(--brShadow), var(--tlShadow);
rozmiar czcionki: 6em;
grubość czcionki: pogrubiona;
}

5. Guziki neumorficzne

Użyj poniższych fragmentów kodu HTML, CSS i JavaScript, aby utworzyć powyższe przyciski neumorficzne.

Kod HTML

Naciśnij przyciski




play_arrow


pauza





człapać

Kod CSS

@importuj adres URL(' https://fonts.googleapis.com/icon? rodzina=Materiał+Ikony');
ciało{
kolor tła: #6ec7ff;
}
.btn-posiadacz{
Blok wyświetlacza;
margines: 0 auto;
margines górny: 64px;
wyrównanie tekstu: środek;
}
.intro-tekst{
margines-dolny: 48px;
rodzina czcionek: 'Szybkie Piaski', bezszeryfowa;
kolor biały;
rozmiar czcionki: 18px;
}
.btn{
szerokość: 110px;
wysokość: 110px;
rozmiar czcionki: 30px;
promień obramowania: 30px;
granica: brak;
kolor biały;
wyrównanie w pionie: góra;
-przejście na webkit: .6s łatwość-w-out;
przejście: .6 s rozluźnienie;
}
.btn: najedź {
kursor: wskaźnik;
}
.btn: fokus{
zarys: brak;
}
.btn: pierwszy w typie{
margines prawy: 30px;
}
.neumorficzny{
tło: gradient liniowy (145deg, #76d5ff, #63b3e6);
box-shadow: 30px 30px 40px #1e7689,
-30px -30px 40px #7fe5ff;
obramowanie: 3px stałe rgba (255, 255, 255, .4);
}
.neumorficzny-wciśnięty{
tło: gradient liniowy (145deg, #63b3e6, #76d5ff);
-webkit-box-shadow: wstawka 15px 15px 20px -20px rgba (0,0,0,.5);
-moz-box-shadow: wstawka 15px 15px 20px -20px rgba (0,0,0,.5);
box-shadow: wstawka 15px 15px 20px -20px rgba (0,0,0,.5);
}
.neumorphic: fokus, .neumorphic: fokus, .neumorphic: fokus, .neumorphic: hover, .neumorphic-wciśnięty: fokus, .neumorphic-wciśnięty: hover {
obramowanie: 3px solid rgba (46, 74, 112, .75);
}
.materiał-ikona {
rodzina czcionek: 'Ikony materiałów';
grubość czcionki: normalna;
styl czcionki: normalny;
rozmiar czcionki: 32px;
wyświetlacz: inline-block;
wysokość linii: 1;
transformacja tekstu: brak;
odstępy między literami: normalne;
zawijanie słów: normalne;
spacja: nowrap;
kierunek: ltr;
-webkit-font-smoothing: antyaliasing;
renderowanie tekstu: optymalizacjaLegibility;
-moz-osx-font-smoothing: skala szarości;
ustawienia funkcji czcionki: 'liga';
}
#pauza {
kolor: #143664;
Nie wyświetla się;
}

Kod JavaScript

zmiana funkcjiStyl (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle("neumorficzny");
btn.classList.toggle("neumorficzny wciśnięty");
if (btnPressed 'odtwórz-pauza') {
grać();
} else if (btnPressed 'shuffle-btn') {
człapać();
}
}
funkcja odtwórz () {
var playBtn = document.getElementById('play');
var pauseBtn = document.getElementById('pause');
if (playBtn.style.display 'brak') {
playBtn.style.display = 'blok';
pauseBtn.style.display = 'brak';
} jeszcze {
playBtn.style.display = 'brak';
pauseBtn.style.display = 'blok';
}
}
funkcja tasuj () {
var shuffleBtn = document.getElementById('shuffle-btn');
if (shuffleBtn.style.color == 'biały' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '#143664';
} jeszcze {
shuffleBtn.style.color = 'biały';
}
}

Jeśli chcesz zapoznać się z pełnym kodem źródłowym użytym w tym artykule, oto Repozytorium GitHub.

Uwaga: Kod użyty w tym artykule to Licencja MIT.

Stylizuj swoją witrynę za pomocą neumorfizmu

Możesz użyć minimalistycznej koncepcji neumorfizmu do stylizacji swojej witryny. Zapewnia estetyczny wygląd. Mimo to neumorfizm ma ograniczenia dostępności.

Istnieje wiele sposobów na nadanie stronie elegancji. Jeśli chcesz stylizować puste pola w swojej witrynie, wypróbuj właściwość CSS box-shadow.

Yuvraj Chandra (33 opublikowane artykuły)

Yuvraj jest studentem informatyki na Uniwersytecie w Delhi w Indiach. Jest pasjonatem Full Stack Web Development. Kiedy nie pisze, bada głębię różnych technologii.

Więcej od Yuvraja Chandra