Neumorphisme : qu'est-ce que c'est et exemples CSS

Ces dernières années, le UI design a vu l'émergence de diverses tendances, dont l'une est le Neumorphisme. Cette tendance du design combine des styles doux et encastrés avec une esthétique moderne, créant une illusion de profondeur et de superposition. Dans cet article, nous explorerons les principes du Neumorphisme, ses avantages et ses inconvénients, et fournirons des exemples pratiques avec des extraits de code CSS pour vous aider à mettre en œuvre ce design tendance dans vos propres projets.

Qu’est-ce que le neumorphisme ?

Le

Neumorphisme, abréviation de "nouveau skeuomorphisme", est une approche de conception qui utilise des ombres douces et des reflets pour créer une apparence tridimensionnelle. Contrairement au design skeuomorphique traditionnel, qui imite des objets du monde réel, le neumorphisme vise une sensation plus subtile et moderne. Il s'appuie fortement sur la lumière et l'ombre pour créer une impression de profondeur, en utilisant souvent une palette de couleurs monochromatiques.

Caractéristiques clés du neumorphisme

1. Ombres douces : les éléments neumorphiques ont généralement des ombres intérieures et extérieures qui créent une apparence douce et relevée.
2. Schémas de couleurs monochromatiques : L'utilisation de nuances similaires pour l'arrière-plan et les éléments crée un aspect homogène.
3. Esthétique minimaliste : le neumorphisme embrasse souvent le minimalisme, en se concentrant sur la simplicité et la convivialité.
4. Commentaires interactifs : les états de survol et actifs impliquent souvent de changer les ombres ou les couleurs pour fournir des commentaires aux utilisateurs.

Avantages du neumorphisme

• Appel esthétique : le neumorphisme peut créer des interfaces visuellement intéressantes qui engagent les utilisateurs.
• Perception de la profondeur : L'utilisation d'ombres donne une impression de superposition, améliorant ainsi l'expérience utilisateur globale.
• Encourage l'interaction : les repères visuels peuvent rendre les utilisateurs plus enclins à interagir avec les éléments de l'interface utilisateur.

Les défis du neumorphisme

• Problèmes d'accessibilité : Le faible contraste et le design subtil peuvent ne pas être facilement perceptibles par tous les utilisateurs, en particulier ceux ayant une déficience visuelle.
• Utilisation excessive : Une utilisation excessive du neumorphisme peut entraîner un encombrement visuel et rendre les interfaces plus difficiles à naviguer.
• Performances : les effets d'ombre importants peuvent avoir un impact sur les performances, en particulier sur les appareils mobiles.

Exemples CSS de neumorphisme

Plongeons dans quelques exemples CSS pratiques pour vous aider à créer des composants d'interface utilisateur Neumorphic.

Bouton Neumorphique

<button class="neumorphic-button">Click Me</button>

body {
    background-color: #e0e0e0; /* Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.neumorphic-button {
    padding: 15px 30px;
    border-radius: 12px;
    border: none;
    background: #e0e0e0; /* Same as body color */
    box-shadow: 8px 8px 15px #a3b1c6,
                -8px -8px 15px #ffffff; /* Soft shadows */
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.neumorphic-button:hover {
    box-shadow: 4px 4px 10px #a3b1c6,
                -4px -4px 10px #ffffff; /* Change shadows on hover */
}

Carte Neumorphique

<div class="neumorphic-card">
    <h2>Neumorphic Card</h2>
    <p>This is an example of a neumorphic card.</p>
</div>

body {
    background-color: #e0e0e0; /* Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.neumorphic-card {
    padding: 20px;
    border-radius: 15px;
    background: #e0e0e0;
    box-shadow: 10px 10px 20px #a3b1c6,
                -10px -10px 20px #ffffff; /* Neumorphic shadows */
    width: 300px;
    text-align: center;
    transition: all 0.3s ease;
}

.neumorphic-card:hover {
    box-shadow: 5px 5px 15px #a3b1c6,
                -5px -5px 15px #ffffff; /* Lighter shadows on hover */
}

Champ de saisie neumorphique

<input type="text" class="neumorphic-input" placeholder="Type something...">

body {
    background-color: #e0e0e0; /* Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.neumorphic-input {
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: #e0e0e0;
    box-shadow: inset 6px 6px 10px #a3b1c6,
                inset -6px -6px 10px #ffffff; /* Inner shadows for depth */
    width: 300px;
    transition: all 0.3s ease;
}

.neumorphic-input:focus {
    box-shadow: inset 4px 4px 8px #a3b1c6,
                inset -4px -4px 8px #ffffff; /* Adjust shadows on focus */
}

Interrupteur à bascule neumorphique

<div class="neumorphic-toggle">
    <input type="checkbox" id="toggle" />
    <label for="toggle">Toggle</label>
</div>

body {
    background-color: #e0e0e0; /* Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.neumorphic-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.neumorphic-toggle input {
    display: none; /* Hide the checkbox */
}

.neumorphic-toggle label {
    padding: 10px;
    border-radius: 20px;
    background: #e0e0e0;
    box-shadow: 6px 6px 12px #a3b1c6,
                -6px -6px 12px #ffffff;
    position: relative;
    transition: all 0.3s ease;
}

.neumorphic-toggle input:checked + label {
    box-shadow: inset 6px 6px 12px #a3b1c6,
                inset -6px -6px 12px #ffffff;
    background: #d1d1d1;
}

Application pour créer des sites Web intégrant le neumorphisme dans la conception

Un outil de conception qui vous permet de créer des designs neumorphiques et de les exporter au format CSS :

Visitez Neumorphism.io

Conclusion

Le neumorphisme est une tendance de conception captivante qui offre une nouvelle perspective sur la conception de l'interface utilisateur, en mettant l'accent sur la profondeur et l'interactivité. Bien qu'il présente des avantages, notamment l'attrait esthétique et l'engagement des utilisateurs, les concepteurs doivent également être prudents quant aux problèmes d'accessibilité et de convivialité. En implémentant les exemples CSS fournis, vous pouvez commencer à créer des interfaces Neumorphic qui sont non seulement modernes et visuellement attrayantes, mais également fonctionnelles et conviviales.

Comme pour toute tendance en matière de design, tenez toujours compte du public cible et assurez-vous que votre interface reste accessible à tous les utilisateurs. Bonne conception !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!