Z-index - Mains de Monstres¶
Pour cet exercice, vous devez recréer une scène où des monstres jouent au jeu d’enfants d’empilement des mains.
Aperçu du résultat 👇
Matériel¶
Couleurs 🎨¶
Beige
#f4e2d8
Rouge
#ba5370
Médias¶
Freddy Krueger
https://tim-montmorency.com/compendium/582-111%E2%80%93web1/exercices/images/freddy-krueger.webp
Nosferatu
https://tim-montmorency.com/compendium/582-111%E2%80%93web1/exercices/images/nosferatu.webp
Créature du Lac
https://tim-montmorency.com/compendium/582-111%E2%80%93web1/exercices/images/creature-from-the-black-lagoon.webp
La momie
https://tim-montmorency.com/compendium/582-111%E2%80%93web1/exercices/images/the-mummy.webp
Note
Toutes les images ont la même dimension, soit: 600x600px
Warning
Aucun Pen ne vous est fourni pour cet exercice. Vous devrez vous en créer un sur CodePen et écrire l'ensemble du HTML et du CSS.
Requis¶
- Créez un dégradé de beige à rouge 🔴 couvrant l'ensemble de l'arrière-plan de votre page HTML.
- Créez ensuite un élément HTML de 600x600px qui contiendra toutes les mains des monstres.
- Affichez dans le code HTML de cet élément les mains dans cet ordre précis: 1. Freddy Krueger 2. Nosferatu 3. L'Étrange Créature du Lac Noir 4. La momie
- Toutes les images de mains ont la même taille, superposez-les en CSS. Leur ordre d'apparition devrait être différent en ce moment de celui sur l'aperçu du résultat ci-dessus ☝️
- En l'aide du CSS seulement, changer l'ordre d'empilement des mains, de sorte que celle de Nosferatu soit sur le dessus, suivi de celle de la momie, de Freddy et finalement de la créature.
Notes de cours¶
Linear Gradient
Générer un dégradé.