Néomorphisme¶
Le néomorphisme est un style de design d'interface graphique caractérisé par son souhait de donner un effet de relief. Ce style apparaît après le skeuomorphisme et le flat design dont il tente de faire la synthèse.
L'objectif de cet exercice est de mettre en pratique la notion de box-shadow, d'opacité et d'imbrication CSS.
Résultat attendu¶
Consignes¶
- Effectuer un fork du Codepen de départ
- À l'aide de l'outil https://neumorphism.io/, générer un style à votre goût. L'important c'est qu'il soit rond et pas trop foncé
À la classe neomorph, appliquer :
- Le style généré par l'outil. (Vous devrez aussi appliquer la couleur de fond au
body) - Une largeur de
300px - Un ratio carré avec la propriété
aspect-ratio - Une position relative
À la balise img, appliquer :
- Une position absolue et positionner l'image au centre
- Une opacité de votre goût