Neumorfismus je nový designový trend, který kombinuje plochý design a skeomomorfismus. Jedná se o minimální způsob designu s měkkým, extrudovaným plastem, téměř ve 3D stylu. V současné době je tento design trendy přes internet a je široce používán designéry a vývojáři.

Chcete-li vyzkoušet neumorphism pro svůj další projekt, zde je několik úryvků kódu, které vám pomohou začít.

1. Neumorfní karty

Pomocí následujících fragmentů kódu HTML a CSS vytvořte výše uvedené neumorfní karty.

HTML kód

Design

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

Přečtěte si více
















Kód

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

Přečtěte si více






instagram viewer












Zahájení

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

Přečtěte si více

Kód CSS

@import url (' https://fonts.googleapis.com/css? rodina = Poppins: 400 500 600 700 800 900 900 & display = swap ');
*
{
okraj: 0;
výplň: 0;
box-sizing: border-box;
rodina fontů: 'Poppins', sans-serif;
}
tělo
{
displej: flex;
justify-content: center;
align-items: center;
min. výška: 100vh;
pozadí: # ebf5fc;
}
.kontejner
{
pozice: relativní;
displej: flex;
justify-content: space-around;
align-items: center;
flex-wrap: zabalit;
šířka: 1100px;
}
.kontejner. karta
{
šířka: 320px;
okraj: 20px;
polstrování: 40px 30px;
pozadí: # ebf5fc;
poloměr ohraničení: 40px;
box-shadow: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0,1);
}
.container .card: hover
{
box-shadow: vložka -6px -6px 20px rgba (255,255,255,0,5), vložka 6px 6px 20px rgba (0,0,0,0,05);
}
.kontejner .karta .imgBx
{
pozice: relativní;
zarovnání textu: na střed;
}
.kontejner .karta .imgBx obr
{
maximální šířka: 120px;
}
.kontejner .card .contBBx
{
pozice: relativní;
horní okraj: 20px;
zarovnání textu: na střed;
}
.kontejner .card .contentBx h2
{
barva: # 32a3b1;
váha písma: 700;
velikost písma: 1.4em;
řádkování: 2px;
}
.kontejner .card .contentBx str
{
barva: # 32a3b1;
}
.kontejner .card .contentBx a
{
display: inline-block;
polstrování: 10px 20px;
horní okraj: 15px;
poloměr ohraničení: 40px;
barva: # 32a3b1;
velikost písma: 16px;
textová výzdoba: žádná;
box-shadow: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0,1);
}
.container .card .contentBx a: hover
{
box-shadow: vložka -4px -4px 10px rgba (255,255,255,0,5), vložka 4px 4px 10px rgba (0,0,0,0,1);
}
.container .card a: hover span
{
displej: blok;
transformace: měřítko (0,98);
}
.container .card: hover .imgBx,
.container .card: hover .contentBx
{
transformace: měřítko (0,98);
}

2. Neumorfní forma

Následující fragmenty kódu HTML a CSS použijte k vytvoření výše uvedené neumorfní formy.

HTML kód

Přihlásit se










 Přihlásit se

Kód CSS

tělo, html {
barva pozadí: # EBECF0;
}
body, p, vstup, výběr, textová oblast, tlačítko {
rodina fontů: "Montserrat", sans-serif;
rozteč písmen: -0,2px;
velikost písma: 16px;
}
div, p {
barva: #BABECC;
textový stín: 1px 1px 1px #FFF;
}
formulář {
polstrování: 16px;
šířka: 320px;
okraj: 0 auto;
}
.segment {
polstrování: 32px 0;
zarovnání textu: na střed;
}
tlačítko, vstup {
ohraničení: 0;
obrys: 0;
velikost písma: 16px;
poloměr ohraničení: 320px;
polstrování: 16px;
barva pozadí: # EBECF0;
textový stín: 1px 1px 0 #FFF;
}
štítek {
displej: blok;
spodní okraj: 24px;
šířka: 100%;
}
vstup {
pravý okraj: 8px;
stín boxu: vložka 2px 2px 5px #BABECC, vložka -5px -5px 10px #FFF;
šířka: 100%;
box-sizing: border-box;
přechod: všech 0,2 s easy-in-out;
vzhled: žádný;
-webkit-vzhled: žádný;
}
vstup: focus {
stín boxu: vložka 1px 1px 2px #BABECC, vložka -1px -1px 2px #FFF;
}
knoflík {
barva: # 61677C;
váha písma: tučné;
stín-box: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
přechod: všech 0,2 s easy-in-out;
kurzor: ukazatel;
váha písma: 600;
}
tlačítko: vznášet se {
stín boxu: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
tlačítko: aktivní {
stín boxu: vložka 1px 1px 2px #BABECC, vložka -1px -1px 2px #FFF;
}
tlačítko. ikona {
pravý okraj: 8px;
}
button.unit {
poloměr ohraničení: 8px;
výška řádku: 0;
šířka: 48px;
výška: 48px;
displej: inline-flex;
justify-content: center;
align-items: center;
okraj: 0 8px;
velikost písma: 19,2px;
}
button.unit .icon {
pravý okraj: 0;
}
button.red {
displej: blok;
šířka: 100%;
barva: # AE1100;
}
.input-group {
displej: flex;
align-items: center;
justify-content: flex-start;
}
.input-group label {
okraj: 0;
flex: 1;
}

3. Neumorfní Navbar

Pomocí následujících fragmentů kódu HTML, CSS a JavaScript vytvořte výše uvedený neumorphic navbar.

HTML kód

Příbuzný: Nejlepší stránky pro příklady kvalitního kódování HTML

Neumorfní Navbar

Kód CSS

* {
okraj: 0;
výplň: 0;
box-sizing: border-box;
}
tělo {
barva pozadí: #efeeee;
}
.nav {
šířka: 100vw;
výška: 100px;
barva pozadí: #efeeee;
stín boxu: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
poloměr ohraničení: 0 0 10px 10px;
displej: flex;
justify-content: flex-end;
align-items: center;
polstrování: 0 3rem;
list-style-type: none;
}
.nav li.logo {
pravý okraj: auto;
rodina fontů: "Roboto", sans-serif;
velikost písma: 1,5rem;
barva: dimgray;
váha písma: 900;
textový stín: 2px 2px 4px rgba (0, 0, 0, 0,3), -2px -2px 4px bílá;
}
.nav li: not (.logo) {
okraj: 0 1rem;
polstrování: 0,5rem 1,5rem;
ohraničení: 2px solid rgba (255, 255, 255, 0,3);
stín boxu: 4px 4px 6px 0 rgba (0, 0, 0, 0,1), -4px -4px 6px bílá;
poloměr ohraničení: 10px;
rodina fontů: "Roboto", sans-serif;
kurzor: ukazatel;
přechod: uvolnění barvy 0,2 s, uvolnění transformace 0,2 s;
barva: dimgray;
}
.nav li: not (.logo): hover {
transformace: měřítko (1,05);
stín boxu: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px bílá;
}
.nav li: not (.logo): focus {
obrys: žádný;
transformace: měřítko (0,95);
stín boxu: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px bílá, 4px 4px 10px 0 rgba (0, 0, 0, 0,1) vložka, -4px -4px 10px bílá vložka;
}
.nav li: not (.logo): vznášet se, .nav li: not (.logo): focus {
barva: oranžová;
}

Kód JavaScript

feather.place ();

4. Neumorfní text a tvary

Následující fragmenty kódu HTML a CSS použijte k vytvoření výše uvedeného neumorfního textu a tvarů.

HTML kód

Příbuzný: Cheat Sheet pro HTML Essentials

Kruh

Kobliha

Náměstí

Hladký čtverec

Tumbler

Neumorfní text

Vítejte na MUO

Kód CSS

Příbuzný: Jednoduché příklady kódu CSS, které se můžete naučit za 10 minut

*, *:: před, *:: po {
box-sizing: border-box;
}
: root {
--nColor: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0,5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0,5);
}
tělo {
okraj: 0;
rodina fontů: sans-serif;
min. výška: 100vh;
displej: flex;
align-items: center;
justify-content: center;
flex-wrap: zabalit;
pozadí: var (- nColor);
}
.n na začátku,
.n-vložka {
displej: flex;
align-items: center;
justify-content: center;
}
.n-circle {
barva pozadí: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
poloměr ohraničení: 50%;
šířka: 200px;
výška: 200px;
okraj: 10px;
}
.n-donut {
barva pozadí: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
poloměr ohraničení: 50%;
šířka: 200px;
výška: 200px;
okraj: 10px;
}
.n-donut .n-vložka {
barva pozadí: var (- nColor);
box-shadow: inset var (- brShadow), inset var (- tlShadow);
poloměr ohraničení: 50%;
šířka: 50%;
výška: 50%;
okraj: 0;
}
.n-sklenice {
barva pozadí: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
poloměr ohraničení: 50%;
šířka: 200px;
výška: 200px;
okraj: 10px;
}
.n-tumbler .n-outset {
barva pozadí: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
poloměr ohraničení: 50%;
šířka: 80%;
výška: 80%;
okraj: 0;
}
.n-čtverec {
barva pozadí: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
poloměr ohraničení: 0;
šířka: 200px;
výška: 200px;
okraj: 10px;
}
.n-smooth-sq {
barva pozadí: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
poloměr ohraničení: 10%;
šířka: 200px;
výška: 200px;
okraj: 10px;
}
.n-text {
barva: var (- nColor);
textový stín: var (- brShadow), var (- tlShadow);
velikost písma: 6em;
váha písma: tučné;
}

5. Neumorfní tlačítka

K vytvoření výše uvedených neumorfických tlačítek použijte následující fragmenty kódu HTML, CSS a JavaScript.

HTML kód

Stiskněte tlačítka




play_arrow


pauza





zamíchat

Kód CSS

@import url (' https://fonts.googleapis.com/icon? rodina = Materiál + Ikony ');
tělo{
barva pozadí: # 6ec7ff;
}
.btn-holder {
displej: blok;
okraj: 0 auto;
horní okraj: 64 pixelů;
zarovnání textu: na střed;
}
.intro-text {
spodní okraj: 48px;
rodina fontů: 'Quicksand', sans-serif;
barva bílá;
velikost písma: 18px;
}
.btn {
šířka: 110px;
výška: 110px;
velikost písma: 30px;
poloměr ohraničení: 30px;
ohraničení: žádné;
barva bílá;
vertical-align: top;
-webkit-transition: .6s easy-in-out;
přechod: .6s easy-in-out;
}
.btn: vznášet se {
kurzor: ukazatel;
}
.btn: focus {
obrys: žádný;
}
.btn: první typu {
pravý okraj: 30px;
}
.neumorfní {
pozadí: lineární gradient (145 stupňů, # 76d5ff, # 63b3e6);
stín: 30px 30px 40px # 1e7689,
-30px -30px 40px # 7fe5ff;
ohraničení: 3px solid rgba (255, 255, 255, .4);
}
.neumorfně lisované {
pozadí: lineární gradient (145 stupňů, # 63b3e6, # 76d5ff);
-webkit-box-shadow: vložka 15px 15px 20px -20px rgba (0,0,0, 0,5);
-moz-box-shadow: vložka 15px 15px 20px -20px rgba (0,0,0, 0,5);
box-shadow: vložka 15px 15px 20px -20px rgba (0,0,0, 0,5);
}
.neumorphic: focus, .neumorphic: vznášet se, .neumorphic: focus, .neumorphic: vznášet se, .neumorphic-press: focus, .neumorphic-press: hover {
ohraničení: 3px pevná rgba (46, 74, 112, 0,75);
}
.materiál-ikona {
font-family: 'Material Icons';
váha písma: normální;
styl písma: normální;
velikost písma: 32px;
display: inline-block;
výška čáry: 1;
textová transformace: žádná;
řádkování: normální;
zalomení slova: normální;
prázdné znaky: nowrap;
směr: ltr;
-webkit-font-smoothing: vyhlazený;
vykreslování textu: optimizeLegibility;
-moz-osx-font-smoothing: stupně šedi;
font-feature-settings: 'liga';
}
#pause {
barva: # 143664;
displej: žádný;
}

Kód JavaScript

funkce changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle ("neumorphic");
btn.classList.toggle ("neumorphic-press");
if (btnPressed 'play-pause') {
hrát si();
} else if (btnPressed 'shuffle-btn') {
zamíchat();
}
}
funkce play () {
var playBtn = document.getElementById ('přehrát');
var pauseBtn = document.getElementById ('pause');
if (playBtn.style.display 'none') {
playBtn.style.display = 'blokovat';
pauseBtn.style.display = 'none';
} else {
playBtn.style.display = 'none';
pauseBtn.style.display = 'blokovat';
}
}
funkce shuffle () {
var shuffleBtn = document.getElementById ('shuffle-btn');
if (shuffleBtn.style.color == 'white' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} else {
shuffleBtn.style.color = 'bílá';
}
}

Pokud se chcete podívat na kompletní zdrojový kód použitý v tomto článku, zde je Úložiště GitHub.

Poznámka: Kód použitý v tomto článku je MIT licencován.

Upravte svůj web pomocí neumorfismu

Minimalistický design neumorphism můžete použít ke stylu svého webu. Poskytuje esteticky příjemný vzhled. Neumorfismus má přesto omezení přístupnosti.

Existují různé způsoby, jak dát webu elegantní vzhled. Pokud chcete na svém webu upravovat nevýrazné rámečky, vyzkoušejte vlastnost CSS box-shadow.

Yuvraj Chandra (Publikováno 33 článků)

Yuvraj je vysokoškolský student výpočetní techniky na univerzitě v Dillí v Indii. Je vášnivým vývojářem Full Stack Web Development. Když nepíše, zkoumá hloubku různých technologií.

Více od Yuvraj Chandry