Neumorfismul este o nouă tendință de design care combină designul plat și skeuomorfismul. Este un mod minim de a proiecta cu un aspect moale din plastic extrudat, aproape în stil 3D. În prezent, acest design este în tendințe pe internet și este utilizat pe scară largă de către designeri și dezvoltatori.

Dacă doriți să încercați neumorfismul pentru următorul dvs. proiect, iată câteva fragmente de cod pentru a începe.

1. Cărți Neumorfe

Utilizați următoarele fragmente de cod HTML și CSS pentru a crea cărțile neumorfe de mai sus.

Cod HTML

Proiecta

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

Citeste mai mult
















Cod

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

Citeste mai mult










instagram viewer












Lansa

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

Citeste mai mult

Cod CSS

@ import url (' https://fonts.googleapis.com/css? family = Poppins: 400.500.600.700.800.900 & display = swap ');
*
{
marja: 0;
umplutură: 0;
box-sizing: border-box;
font-family: „Poppins”, sans-serif;
}
corp
{
display: flex;
justify-content: centru;
align-items: centru;
min-înălțime: 100vh;
fundal: # ebf5fc;
}
.container
{
poziție: relativă;
display: flex;
justify-content: spațiu-în jurul;
align-items: centru;
flex-wrap: înveliș;
lățime: 1100px;
}
.container .card
{
lățime: 320px;
marja: 20px;
umplutură: 40px 30px;
fundal: # ebf5fc;
raza chenarului: 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: inserare -6px -6px 20px rgba (255,255,255,0,5), inserare 6px 6px 20px rgba (0,0,0,0,05);
}
.container .card .imgBx
{
poziție: relativă;
text-align: centru;
}
.container .card .imgBx img
{
lățime maximă: 120 px;
}
.container .card .contentBx
{
poziție: relativă;
marginea de sus: 20 px;
text-align: centru;
}
.container .card .contentBx h2
{
culoare: # 32a3b1;
greutate-font: 700;
dimensiunea fontului: 1.4em;
spațierea literelor: 2 px;
}
.container .card .contentBx p
{
culoare: # 32a3b1;
}
.container .card .contentBx a
{
afișaj: bloc în linie;
umplutură: 10px 20px;
marginea de sus: 15 px;
raza chenarului: 40px;
culoare: # 32a3b1;
dimensiunea fontului: 16 px;
decor-text: nici unul;
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: inserare -4px -4px 10px rgba (255,255,255,0,5), inserare 4px 4px 10px rgba (0,0,0,0,1);
}
.container .card a: hover span
{
display: bloc;
transformare: scară (0,98);
}
.container .card: hover .imgBx,
.container .card: hover .contentBx
{
transformare: scară (0,98);
}

2. Formă neumorfă

Utilizați următoarele fragmente de cod HTML și CSS pentru a crea forma neumorfă de mai sus.

Cod HTML

Inscrie-te










 Autentificare

Cod CSS

corp, html {
culoare de fundal: # EBECF0;
}
corp, p, introducere, selectare, textarea, buton {
font-family: "Montserrat", sans-serif;
spațierea literelor: -0,2px;
dimensiunea fontului: 16 px;
}
div, p {
culoare: #BABECC;
text-shadow: 1px 1px 1px #FFF;
}
forma {
umplutură: 16 px;
lățime: 320px;
marja: 0 auto;
}
.segment {
umplutură: 32px 0;
text-align: centru;
}
buton, introducere {
chenar: 0;
contur: 0;
dimensiunea fontului: 16 px;
raza chenarului: 320px;
umplutură: 16 px;
culoare de fundal: # EBECF0;
text-shadow: 1px 1px 0 #FFF;
}
eticheta {
display: bloc;
marginea de jos: 24 px;
lățime: 100%;
}
intrare {
margine-dreapta: 8px;
box-shadow: inserare 2px 2px 5px #BABECC, inserare -5px -5px 10px #FFF;
lățime: 100%;
box-sizing: border-box;
tranziție: toate 0.2s ușurează-în-ieșire;
aspect: nici unul;
-webkit-aspect: nici unul;
}
input: focus {
box-shadow: inserare 1px 1px 2px #BABECC, inserare -1px -1px 2px #FFF;
}
buton {
culoare: # 61677C;
font-weight: bold;
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
tranziție: toate 0.2s ușurează-în-ieșire;
cursor: pointer;
greutate-font: 600;
}
buton: plasați cursorul {
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
buton: activ {
box-shadow: inserare 1px 1px 2px #BABECC, inserare -1px -1px 2px #FFF;
}
buton .icon {
margine-dreapta: 8px;
}
button.unit {
raza chenarului: 8px;
înălțimea liniei: 0;
lățime: 48px;
înălțime: 48px;
display: inline-flex;
justify-content: centru;
align-items: centru;
marja: 0 8px;
dimensiunea fontului: 19,2px;
}
button.unit .icon {
margine-dreapta: 0;
}
button.red {
display: bloc;
lățime: 100%;
culoare: # AE1100;
}
.input-group {
display: flex;
align-items: centru;
justify-content: flex-start;
}
.eticheta grupului de intrare {
marja: 0;
flex: 1;
}

3. Bara de navigare neumorfă

Utilizați următoarele fragmente de cod HTML, CSS și JavaScript pentru a crea bara de navă neumorfă de mai sus.

Cod HTML

Legate de: Cele mai bune site-uri pentru exemple de codare HTML de calitate

Bara de navigare neumorfă

Cod CSS

* {
marja: 0;
umplutură: 0;
box-sizing: border-box;
}
corp {
culoare de fundal: #efeeee;
}
.nav {
lățime: 100vw;
înălțime: 100px;
culoare de fundal: #efeeee;
box-shadow: 10px 10px 12px 0 rgba (0, 0, 0, 0.07);
raza chenarului: 0 0 10px 10px;
display: flex;
justify-content: flex-end;
align-items: centru;
umplutură: 0 3rem;
list-style-type: none;
}
.nav li.logo {
marginea-dreapta: auto;
font-family: "Roboto", sans-serif;
dimensiunea fontului: 1,5rem;
culoare: negru;
greutate-font: 900;
text-shadow: 2px 2px 4px rgba (0, 0, 0, 0.3), -2px -2px 4px alb;
}
.nav li: not (.logo) {
margine: 0 1rem;
umplutură: 0,5rem 1,5rem;
chenar: 2px solid rgba (255, 255, 255, 0,3);
box-shadow: 4px 4px 6px 0 rgba (0, 0, 0, 0.1), -4px -4px 6px alb;
raza chenarului: 10px;
font-family: "Roboto", sans-serif;
cursor: pointer;
tranziție: culoare 0.2s ușurează, transformă 0.2s ușurință;
culoare: negru;
}
.nav li: not (.logo): hover {
transformare: scară (1,05);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px alb;
}
.nav li: not (.logo): focus {
contur: nici unul;
transformare: scară (0,95);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px alb, 4px 4px 10px 0 rgba (0, 0, 0, 0,1) inserare, -4px -4px 10px inserție albă;
}
.nav li: not (.logo): hover, .nav li: not (.logo): focus {
culoare: portocaliu;
}

Cod JavaScript

pene.replace ();

4. Text și forme neumorfe

Utilizați următoarele fragmente de cod HTML și CSS pentru a crea textul și formele neumorfe de mai sus.

Cod HTML

Legate de: Foaia de trucuri HTML Essentials

Cerc

Gogoașă

Pătrat

Piața Smooth

Pahar

Text Neumorf

Bine ați venit la MUO

Cod CSS

Legate de: Exemple de cod CSS simple pe care le puteți învăța în 10 minute

*, *::înainte după {
box-sizing: border-box;
}
: rădăcină {
--nColor: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0,5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0,5);
}
corp {
marja: 0;
font-family: sans-serif;
min-înălțime: 100vh;
display: flex;
align-items: centru;
justify-content: centru;
flex-wrap: înveliș;
fundal: var (- nColor);
}
.n-început,
.n-inset {
display: flex;
align-items: centru;
justify-content: centru;
}
.n-cerc {
fundal-culoare: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
raza frontierei: 50%;
lățime: 200px;
înălțime: 200px;
marja: 10px;
}
.n-gogoasa {
fundal-culoare: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
raza frontierei: 50%;
lățime: 200px;
înălțime: 200px;
marja: 10px;
}
.n-donut .n-inset {
fundal-culoare: var (- nColor);
box-shadow: inset var (- brShadow), inset var (- tlShadow);
raza frontierei: 50%;
lățime: 50%;
înălțime: 50%;
marja: 0;
}
.n-tumbler {
fundal-culoare: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
raza frontierei: 50%;
lățime: 200px;
înălțime: 200px;
marja: 10px;
}
.n-tumbler .n-outset {
fundal-culoare: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
raza frontierei: 50%;
lățime: 80%;
înălțime: 80%;
marja: 0;
}
.n-pătrat {
fundal-culoare: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
raza frontierei: 0;
lățime: 200px;
înălțime: 200px;
marja: 10px;
}
.n-smooth-sq {
fundal-culoare: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
raza frontierei: 10%;
lățime: 200px;
înălțime: 200px;
marja: 10px;
}
.n-text {
culoare: var (- nColor);
text-shadow: var (- brShadow), var (- tlShadow);
dimensiunea fontului: 6em;
font-weight: bold;
}

5. Butoane Neumorfe

Utilizați următoarele fragmente de cod HTML, CSS și JavaScript pentru a crea butoanele neumorfe de mai sus.

Cod HTML

Apăsați butoanele




play_arrow


pauză





amesteca

Cod CSS

@ import url (' https://fonts.googleapis.com/icon? familie = Material + Icoane ');
corp{
culoare de fundal: # 6ec7ff;
}
.btn-titular {
display: bloc;
marja: 0 auto;
marginea-sus: 64px;
text-align: centru;
}
.intro-text {
marginea de jos: 48 px;
font-family: „Nisip curgător”, sans-serif;
culoare albă;
dimensiunea fontului: 18 px;
}
.btn {
lățime: 110px;
înălțime: 110px;
dimensiunea fontului: 30 px;
raza chenarului: 30px;
hotar: nici unul;
culoare albă;
vertical-align: sus;
-webkit-tranziție: .6s ușurință-în-ieșire;
tranziție: .6s ușurință-în-ieșire;
}
.btn: hover {
cursor: pointer;
}
.btn: focus {
contur: nici unul;
}
.btn: primul de tip {
marginea-dreapta: 30px;
}
.neumorf {
fundal: gradient liniar (145deg, # 76d5ff, # 63b3e6);
box-shadow: 30px 30px 40px # 1e7689,
-30px -30px 40px # 7fe5ff;
chenar: 3px solid rgba (255, 255, 255, .4);
}
.neumorphic-press {
fundal: gradient liniar (145deg, # 63b3e6, # 76d5ff);
-webkit-box-shadow: inset 15px 15px 20px -20px rgba (0,0,0, .5);
-moz-box-shadow: inset 15px 15px 20px -20px rgba (0,0,0, .5);
box-shadow: inserare 15px 15px 20px -20px rgba (0,0,0, .5);
}
.neumorphic: focus, .neumorphic: hover, .neumorphic: focus, .neumorphic: hover, .neumorphic-press: focus, .neumorphic-press: hover {
chenar: 3px solid rgba (46, 74, 112, .75);
}
.material-icon {
font-family: „Pictograme materiale”;
font-weight: normal;
stil font: normal;
dimensiunea fontului: 32px;
afișaj: bloc în linie;
înălțimea liniei: 1;
text-transform: none;
spațierea literelor: normal;
wrap-wrap: normal;
spațiu alb: nowrap;
direcție: ltr;
-webkit-font-smoothing: antialiased;
redare text: optimizeLegibility;
-moz-osx-font-smoothing: tonuri de gri;
font-feature-settings: 'liga';
}
#pause {
culoare: # 143664;
display: none;
}

Cod JavaScript

function changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle („neumorf”);
btn.classList.toggle ("presat neumorf");
if (btnPressed 'play-pause') {
Joaca();
} else if (btnPressed 'shuffle-btn') {
amesteca();
}
}
funcție de redare () {
var playBtn = document.getElementById ('redare');
var pauseBtn = document.getElementById ('pauză');
if (playBtn.style.display 'none') {
playBtn.style.display = 'blocare';
pauseBtn.style.display = 'nici unul';
} altceva {
playBtn.style.display = 'nici unul';
pauseBtn.style.display = 'blocare';
}
}
funcție shuffle () {
var shuffleBtn = document.getElementById ('shuffle-btn');
if (shuffleBtn.style.color == 'alb' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} altceva {
shuffleBtn.style.color = 'alb';
}
}

Dacă doriți să aruncați o privire la codul sursă complet utilizat în acest articol, iată Depozitul GitHub.

Notă: Codul utilizat în acest articol este Licențiat MIT.

Stilează-ți site-ul web cu neumorfism

Puteți utiliza conceptul de design minimalist al neumorfismului pentru a vă stiliza site-ul web. Oferă un aspect estetic plăcut. Dar totuși, neumorfismul are limitări de accesibilitate.

Există diferite moduri de a oferi unui site web un aspect elegant. Dacă doriți să stilizați casetele fade pe site-ul dvs., dați o proprietate CSS box-shadow.

Yuvraj Chandra (33 articole publicate)

Yuvraj este student în științe informatice la Universitatea din Delhi, India. Este pasionat de dezvoltarea web Full Stack. Când nu scrie, explorează profunzimea diferitelor tehnologii.

Mai multe de la Yuvraj Chandra