Le neumorphisme est une nouvelle tendance de design qui combine le design plat et le skeuomorphisme. C'est une façon minimale de concevoir avec un plastique extrudé souple, presque de style 3D. Actuellement, cette conception est à la mode sur Internet et est largement utilisée par les concepteurs et les développeurs.

Si vous voulez essayer le neumorphisme pour votre prochain projet, voici quelques extraits de code pour vous aider à démarrer.

1. Cartes Neumorphes

Utilisez les extraits de code HTML et CSS suivants pour créer les cartes neumorphes ci-dessus.

Code HTML

Conception

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

Lire la suite
















Code

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





instagram viewer


Lire la suite
















Lancer

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

Lire la suite

Code CSS

@import url(' https://fonts.googleapis.com/css? famille=Poppins: 400 500 600 700 800 900&display=swap');
*
{
marge: 0 ;
remplissage: 0 ;
dimensionnement de la boîte: border-box ;
font-family: 'Poppins', sans-serif ;
}
corps
{
affichage: flexible ;
justifier-contenu: centre ;
align-items: center;
hauteur minimale: 100 vh ;
arrière-plan: #ebf5fc ;
}
.récipient
{
position: relative ;
affichage: flexible ;
justifier-contenu: espace autour ;
align-items: center;
flex-wrap: envelopper ;
largeur: 1100px ;
}
.conteneur .card
{
largeur: 320px ;
marge: 20px ;
rembourrage: 40px 30px ;
arrière-plan: #ebf5fc ;
rayon de bordure: 40 px ;
box-shadow: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0.1);
}
.container .card: survoler
{
box-shadow: inset -6px -6px 20px rgba (255,255,255,0,5), inset 6px 6px 20px rgba (0,0,0,0,05);
}
.conteneur .card .imgBx
{
position: relative ;
text-align: centre ;
}
.container .card .imgBx img
{
largeur maximale: 120 px ;
}
.container .card .contentBx
{
position: relative ;
marge supérieure: 20 px ;
text-align: centre ;
}
.container .card .contentBx h2
{
couleur: #32a3b1 ;
poids de police: 700 ;
taille de la police: 1.4em ;
espacement des lettres: 2px ;
}
.container .card .contentBx p
{
couleur: #32a3b1 ;
}
.container .card .contentBx a
{
affichage: bloc en ligne ;
rembourrage: 10px 20px ;
marge supérieure: 15 px ;
rayon de bordure: 40 px ;
couleur: #32a3b1 ;
taille de la police: 16px ;
texte-décoration: aucun ;
box-shadow: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0.1);
}
.container .card .contentBx a: survoler
{
box-shadow: inset -4px -4px 10px rgba (255,255,255,0.5), inset 4px 4px 10px rgba (0,0,0,0.1);
}
.container .card a: durée de survol
{
bloc de visualisation;
transformation: échelle (0,98);
}
.container .card: survolez .imgBx,
.container .card: survolez .contentBx
{
transformation: échelle (0,98);
}

2. Forme Neumorphe

Utilisez les extraits de code HTML et CSS suivants pour créer la forme neumorphe ci-dessus.

Code HTML

S'inscrire










 Connexion

Code CSS

corps, html {
couleur d'arrière-plan: #EBECF0 ;
}
corps, p, entrée, sélection, zone de texte, bouton {
famille de polices: "Montserrat", sans-serif ;
espacement des lettres: -0,2 px ;
taille de la police: 16px ;
}
div, p {
couleur: #BABECC ;
ombre de texte: 1px 1px 1px #FFF ;
}
forme {
remplissage: 16px ;
largeur: 320px ;
marge: 0 automatique ;
}
.segment {
remplissage: 32px 0 ;
text-align: centre ;
}
bouton, entrez {
bordure: 0 ;
contour: 0 ;
taille de la police: 16px ;
rayon de bordure: 320px ;
remplissage: 16px ;
couleur d'arrière-plan: #EBECF0 ;
ombre de texte: 1px 1px 0 #FFF ;
}
étiqueter {
bloc de visualisation;
marge inférieure: 24 px ;
largeur: 100 % ;
}
contribution {
marge droite: 8px ;
box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF ;
largeur: 100 % ;
dimensionnement de la boîte: border-box ;
transition: toutes les 0,2 s d'entrée-sortie facilitée ;
aspect: aucun ;
-webkit-apparence: aucun ;
}
entrée: mise au point {
box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF ;
}
bouton {
couleur: #61677C ;
font-weight: gras ;
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC ;
transition: toutes les 0,2 s d'entrée-sortie facilitée ;
curseur: pointeur ;
font-weight: 600 ;
}
bouton: survolez {
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC ;
}
bouton: actif {
box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF ;
}
bouton .icône {
marge droite: 8px ;
}
bouton.unité {
rayon de bordure: 8px ;
hauteur de ligne: 0 ;
largeur: 48px ;
hauteur: 48px ;
affichage: inline-flex ;
justifier-contenu: centre ;
align-items: center;
marge: 0 8px ;
taille de la police: 19,2 px ;
}
bouton.unité .icône {
marge droite: 0 ;
}
bouton.rouge {
bloc de visualisation;
largeur: 100 % ;
couleur: #AE1100 ;
}
.groupe d'entrée {
affichage: flexible ;
align-items: center;
justifier-contenu: flex-start ;
}
.étiquette de groupe d'entrée {
marge: 0 ;
flexible: 1 ;
}

3. Barre de navigation neumorphique

Utilisez les extraits de code HTML, CSS et JavaScript suivants pour créer la barre de navigation neumorphique ci-dessus.

Code HTML

En rapport: Meilleurs sites pour des exemples de codage HTML de qualité

Barre de navigation neumorphique

Code CSS

* {
marge: 0 ;
remplissage: 0 ;
dimensionnement de la boîte: border-box ;
}
corps {
couleur d'arrière-plan: #efeeee ;
}
.nav {
largeur: 100vw ;
hauteur: 100px ;
couleur d'arrière-plan: #efeeee ;
box-shadow: 10px 10px 12px 0 rgba (0, 0, 0, 0,07) ;
rayon de bordure: 0 0 10px 10px ;
affichage: flexible ;
justifier-contenu: flex-end ;
align-items: center;
rembourrage: 0 3rem ;
list-style-type: aucun ;
}
.nav li.logo {
marge-droite: auto ;
font-family: "Roboto", sans-serif;
taille de la police: 1.5rem ;
couleur: gris pâle ;
poids de police: 900 ;
text-shadow: 2px 2px 4px rgba (0, 0, 0, 0,3), -2px -2px 4px blanc ;
}
.nav li: non(.logo) {
marge: 0 1rem ;
rembourrage: 0.5rem 1.5rem ;
bordure: rgba solide 2px (255, 255, 255, 0,3);
box-shadow: 4px 4px 6px 0 rgba (0, 0, 0, 0,1), -4px -4px 6px blanc ;
rayon de bordure: 10 px ;
font-family: "Roboto", sans-serif;
curseur: pointeur ;
transition: couleur 0,2 s atténuation, transformation 0,2 s atténuation ;
couleur: gris pâle ;
}
.nav li: not(.logo):hover {
transformation: échelle (1,05) ;
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px blanc ;
}
.nav li: not(.logo):focus {
contour: aucun ;
transformation: échelle (0,95);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px blanc, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) incrustation, -4px -4px 10px incrustation blanche ;
}
.nav li: non(.logo):survolez, .nav li: non(.logo):focus {
couleur: rouge orangé ;
}

Code JavaScript

plume.replace();

4. Texte et formes neumorphes

Utilisez les extraits de code HTML et CSS suivants pour créer le texte et les formes neumorphes ci-dessus.

Code HTML

En rapport: La feuille de triche HTML Essentials

Cercle

Donut

Carré

Carré lisse

Verre

Texte neumorphique

Bienvenue à MUO

Code CSS

En rapport: Exemples de code CSS simples que vous pouvez apprendre en 10 minutes

*, *::avant après {
dimensionnement de la boîte: border-box ;
}
:racine {
--nCouleur: #aaa ;
--brShadow: -6px 6px 10px rgba (0,0,0,0,5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0,5) ;
}
corps {
marge: 0 ;
famille de polices: sans-serif ;
hauteur minimale: 100 vh ;
affichage: flexible ;
align-items: center;
justifier-contenu: centre ;
flex-wrap: envelopper ;
arrière-plan: var(--nColor);
}
.n-début,
.n-encart {
affichage: flexible ;
align-items: center;
justifier-contenu: centre ;
}
.n-cercle {
couleur d'arrière-plan: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
rayon de bordure: 50 % ;
largeur: 200px ;
hauteur: 200px ;
marge: 10px ;
}
.n-donut {
couleur d'arrière-plan: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
rayon de bordure: 50 % ;
largeur: 200px ;
hauteur: 200px ;
marge: 10px ;
}
.n-donut .n-encart {
couleur d'arrière-plan: var(--nColor);
box-shadow: inset var(--brShadow), inset var(--tlShadow);
rayon de bordure: 50 % ;
largeur: 50 % ;
hauteur: 50 % ;
marge: 0 ;
}
.n-tumbler {
couleur d'arrière-plan: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
rayon de bordure: 50 % ;
largeur: 200px ;
hauteur: 200px ;
marge: 10px ;
}
.n-tumbler .n-départ {
couleur d'arrière-plan: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
rayon de bordure: 50 % ;
largeur: 80 % ;
hauteur: 80 % ;
marge: 0 ;
}
.n-carré {
couleur d'arrière-plan: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
rayon de bordure: 0 ;
largeur: 200px ;
hauteur: 200px ;
marge: 10px ;
}
.n-smooth-sq {
couleur d'arrière-plan: var(--nColor);
box-shadow: var(--brShadow), var(--tlShadow);
rayon de bordure: 10 % ;
largeur: 200px ;
hauteur: 200px ;
marge: 10px ;
}
.n-texte {
couleur: var(--nCouleur);
text-shadow: var(--brShadow), var(--tlShadow);
taille de la police: 6 em ;
font-weight: gras ;
}

5. Boutons Neumorphes

Utilisez les extraits de code HTML, CSS et JavaScript suivants pour créer les boutons neumorphes ci-dessus.

Code HTML

Appuyez sur les boutons




play_arrow


pause





mélanger

Code CSS

@import url(' https://fonts.googleapis.com/icon? famille=Matériel+Icônes');
corps{
couleur d'arrière-plan: #6ec7ff ;
}
.btn-titulaire{
bloc de visualisation;
marge: 0 automatique ;
marge supérieure: 64 px ;
text-align: centre ;
}
.Texte d'introduction{
marge inférieure: 48 px ;
font-family: 'Quicksand', sans-serif ;
Couleur blanche;
taille de la police: 18px ;
}
.btn{
largeur: 110px ;
hauteur: 110px ;
taille de la police: 30px ;
rayon de bordure: 30 px ;
bordure: aucune ;
Couleur blanche;
alignement vertical: haut ;
-webkit-transition: .6s easy-in-out ;
transition: .6s facilité d'entrée-sortie ;
}
.btn: survoler{
curseur: pointeur ;
}
.btn: focus{
contour: aucun ;
}
.btn: premier du type{
marge à droite: 30 px ;
}
.neumorphique{
arrière-plan: dégradé linéaire (145 deg, #76d5ff, #63b3e6) ;
box-shadow: 30px 30px 40px #1e7689,
-30px -30px 40px #7fe5ff;
bordure: rgba solide 3px (255, 255, 255, .4) ;
}
.neumorphique-pressé{
arrière-plan: dégradé linéaire (145deg, #63b3e6, #76d5ff) ;
-webkit-box-shadow: encart 15px 15px 20px -20px rgba (0,0,0,.5) ;
-moz-box-shadow: inset 15px 15px 20px -20px rgba (0,0,0,.5) ;
box-shadow: inset 15px 15px 20px -20px rgba (0,0,0,.5) ;
}
.neumorphic: focus, .neumorphic: survol, .neumorphic: focus, .neumorphic: survol, .neumorphic-pressed: focus, .neumorphic-pressed: hover {
bordure: 3 pixels rgba solide (46, 74, 112, 0,75) ;
}
.material-icon {
font-family: 'Icônes matérielles' ;
font-weight: normal ;
style de police: normal ;
taille de la police: 32 px ;
affichage: bloc en ligne ;
hauteur de ligne: 1 ;
transformation de texte: aucune ;
interlettrage: normal ;
enveloppement de mots: normal ;
espace blanc: nowrap ;
sens: ltr ;
-webkit-font-smoothing: anticrénelé ;
rendu de texte: optimisez la lisibilité ;
-moz-osx-font-smoothing: niveaux de gris ;
font-feature-settings: 'liga';
}
#pause {
couleur: #143664 ;
affichage: aucun ;
}

Code JavaScript

fonction changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle("neumorphique");
btn.classList.toggle("neumorphique-pressé");
if (btnPressed 'play-pause') {
jouer();
} else if (btnPressed 'shuffle-btn') {
mélanger();
}
}
fonction play() {
var playBtn = document.getElementById('play');
var pauseBtn = document.getElementById('pause');
if (playBtn.style.display 'aucun') {
playBtn.style.display = 'bloc';
pauseBtn.style.display = 'aucun';
} autre {
playBtn.style.display = 'aucun';
pauseBtn.style.display = 'bloc';
}
}
fonction shuffle() {
var shuffleBtn = document.getElementById('shuffle-btn');
if (shuffleBtn.style.color == 'white' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '#143664';
} autre {
shuffleBtn.style.color = 'blanc';
}
}

Si vous souhaitez consulter le code source complet utilisé dans cet article, voici le Dépôt GitHub.

Noter: Le code utilisé dans cet article est Licence MIT.

Stylez votre site Web avec le neumorphisme

Vous pouvez utiliser le concept de design minimaliste du neumorphisme pour styliser votre site Web. Il offre un aspect esthétique. Mais encore, le neumorphisme a des limitations d'accessibilité.

Il existe différentes manières de donner à un site Web un aspect élégant. Si vous souhaitez styliser des boîtes fades sur votre site Web, essayez la propriété CSS box-shadow.

Yuvraj Chandra (33 articles publiés)

Yuvraj est un étudiant de premier cycle en informatique à l'Université de Delhi, en Inde. Il est passionné par le développement Web Full Stack. Quand il n'écrit pas, il explore la profondeur de différentes technologies.

Plus de Yuvraj Chandra