Pour cet exercice, vous devez écrire du CSS afin de recréer la pochette de l’album "All Wet" de l'artiste multidisplinaire français Quentin Dupieux mieux connu sous le nom de Mr. Oizo.
Aperçu du résultat 👇
Matériel
Dossier de départ
Couleurs 🎨
#d20002
#ffd539
#fdf2d8
#555555
#000000
Prenez le temps d'analyser le fichier HTML.
Il est INTERDIT de modifier le HTML.
Requis de base
Créez une variable pour chacune des couleurs pour utilisation ultérieure.
Ajoutez deux autre variables, une pour la durée de la transition du sourire (0.2s) et une autre pour la durée de l'animation de langue (2s).
La couleur de fond de la page doit être de couleur grise et avoir un dégradé vertical allant du rouge au jaune.
Fusionnez les deux fonds en mode screen afin de donner au gradient un effet délavé.
L'album doit avoir une dimension verticale et horizontale de 80% du plus petit côté de la fenêtre, être de couleur jaune ainsi qu'avoir un ombrage de 100px égal de tous les côtés de couleur noire semi-transparente.
Utilisez transform afin de positionner l'album au centre de la fenêtre.
Requis visage
Considérant qu'il s'agit d'une matrice de 8x8, chaque carré correspond à 1/8 (12.5%) de la largeur. Avec cette information vous devriez être en mesure de disposer facilement des éléments constituants. Commencez par les yeux.
Utilisez les pseudo-classes afin de placer par étage les éléments beige du museau.
Vous pouvez maintenant disponser du nez et de la bouche.
Pour la langue, utilisez l'élément .tongue-wrapper afin de positionner la langue et lui donner sa dimension. L'élément .tongue doit prendre toute l'espace disponible et être de couleur rouge.
Requis animation
Créez une animation déplaçant la langue horizontalement de 0% à 200%. L'animation doit commencer lentement et ralentis en fin de parcours. Utilisez la variable que vous avez définie plus tôt pour en déterminer la durée.
À l'aide de la pseudo-classe :has(), faites en sorte l'animation de l'élément .tongue-wrapper s'arrête lorsque vous survolez la langue.
Requis transition
Lors du sorvol de la langue, les différents éléments du visages doivent transitionner d'un état à un autre d'une durée équivalente à la variable de la transition du sourir définie plus haut.
Les yeux doivent s'allonger à 150% en largeur et rapetisser à 50% en hauteur. De plus, ils doivent tourner de + ou - 45deg selon s'il est à gauche ou à droite.
Le nez doit rapetisser à 75% en hauteur et se déplacer de -50% verticalement.
La bouche doit se déplacer de -100% verticalement.
La langue doit se déplacer de -50% verticalement et grossir à 200% en hauteur.
Ambiance
Corrigé
Zip / Mr. Oizo - All Wet
Pen / Mr. Oizo - All Wet
Démo / Mr. Oizo - All Wet