Pour cet exercice, vous devez écrire du CSS afin de recréer la pochette de l’album "Rafi's Revenge" du groupe de rap jungle Asian Dub Foundation.
Aperçu du résultat 👇
Matériel
Dossier de départ
Polices d'écriture 🚓
Helvetica Compressed Regular
ST Sharpie Print
Couleurs 🎨
#091b29
#f2f1eb
#444444
Médias 📷
Arrière-plan
Branchement
Auto-collant
Chandra
Deeder
Dr Dras
Pandit
Sun-J
Haut-parleur contour
Haut-parleur centre
Haut-parleur intérieur
Prenez le temps d'analyser le fichier HTML.
Pour une meilleure exécution de l'exercice, certains des éléments HTML ont été cachés par défaut dans le fichier CSS. Rendez-les visible au fur et à mesure que vous avancez dans l'exercice.
Il est INTERDIT de modifier le HTML.
Requis de base
Téléchargez les images et placez-les dans un dossier images.
Téléchargez la police d'écriture et placez-la dans un dossier fonts.
Créez une variable pour chacune des couleurs pour utilisation ultérieure.
La couleur de fond de la page doit être de couleur grise et avoir un dégradé vertical allant du bleu au blanc cassé.
Fusionnez les deux fonds en mode screen afin de donner au gradient un effet délavé.
L'album doit avoir une largeur de 80% du plus petit côté de la fenêtre, être de forme carré, être centré tant horizontalement que verticalement, être de couleur bleu et avoir un ombrage de 10vmin égal de tous les côtés de couleur noire semi-transparente.
Ajoutez-lui l'image d'arrière-plan bg.webp de sorte qu'elle prenne toute l'espace disponible tout en rognant l'exédentaire.
Fusionnez les arrière-plans en mode luminosity.
Le branchement (.plug) doit utiliser l'image d'arrière-plan plug.webp prenant tout l'espace disponible, avoir une largeur de 19%, une hauteur de 32%, être positionné de manière absolue, être collé à gauche et à 12% du haut de l'album.
Fusionnez le branchement en mode luminosity.
L'auto-collant (.sticker) doit utiliser l'image d'arrière-plan sticker.webp prenant tout l'espace disponible, avoir une largeur de 17%, une hauteur de 24%, être positionné de manière absolue à 2% de la droite et 12% du haut de l'album.
Fusionnez l'auto-collant en mode luminosity.
Requis textes
À l'aide de @font-face, importez la police d'écriture HelveticaCompressedRegular.otf et nommez la HelveticaCompressed.
Toujours à l'aide de @font-face, importez la police d'écriture STSharpiePrint.ttf et nommez la STSharpiePrint.
Utilisez le pseudo-élément ::after pour ajouter le texte 96 à l'élément .sticker. Il doit être positionné de manière absolue à 40% du haut et -22% de la gauche, utiliser tout l'espace disponible en largeur, avoir une hauteur de 20%, avoir un alignement de texte centré, une grosseur de police d'écriture de 6vmin, être de couleur bleue, utiliser la police d'écriture STSharpiePrint et avoir une rotation de -90deg.
Le libellé de l'album (h1) doit être positionné de manière absolue à 54.5% du haut et 12% de la gauche, utiliser la police d'écriture HelveticaCompressed d'une grosseur de 3vmin, avoir un espacement de lettre de 0.2vmin et être de couleur blanc cassé.
Requis membres
Le conteneur de membres (.members) doit être positionné de manière absolue à 68% du haut, prendre tout l'espace disponible en largeur, avoir une hauteur de 23%, avoir une marge intérieur gauche de 1.5% et avoir un alignement de texte centré.
Les membres (.member) doivent agir comme des images (inline-block), avoir une largeur de 17.5%, prendre tout l'espace disponible en hauteur, avoir une marge extérieur horizontale de 0.3% et avoir une bordure intérieur (border-box) de 0.5vmin solide de couleur blanc cassé.
Ajoutez la bonne image d'arrière-plan au bon éléments .member. L'arrière-plan doit prendre tout l'espace disponible tout en rognant l'exédentaire.
Fusionnez les éléments .member en mode luminosity.
Lors du survol des membres (.member), utilisez les filtres afin d'inverser complètement ses couleurs en l'espace de 0.1 seconde.
Toujours lors du survol des membres, utilisez la pseudo-classe :has() pour modifier le contenu du pseudo-élément .sticker::after afin d'y placer le nom du membre du groupe. (Deeder, Chandra, Dr Das, Pandit, Sun-J).
Requis haut-parleur
Le wrapper du haut-parleur (.speaker-wrapper) doit être positionné de manière absolue à 2% du haut et 26% de la gauche. Il doit avoir une largeur de 42%, être de forme carré, avoir un masque circulaire de 50%, avoir un contraste de 95% et une luminosité de 90%. Fusionnez-le en mode luminosity.
Les différentes parties du haut-parleur (.speaker) doivent être positionnés de manière absolue au centre du wrapper, avoir une forme carré et avoir un arrière-plan qui prend tout l'espace disponible.
L'intérieur du haut-parleur (.speaker.inside) doit avoir une largeur de 38% et avoir l'image speaker-inside.webp comme arrière-plan.
Le centre du haut-parleur (.speaker.center) doit avoir une largeur de 76% et avoir l'image speaker-center.webp comme arrière-plan.
Le contour du haut-parleur (.speaker.border) doit avoir une largeur de 100% et avoir l'image speaker-border.webp comme arrière-plan.
Requis animation
Créez-vous une animation nommée inside qui applique une déformation de la grosseur de l'élément d'un facteur de 1 à 1.1 tout en gardant l'élément au centre du haut-parleur.
Appliquez cette animation à l'élément .speaker.inside lorsqu'un membre du groupe est survolé (Utilisez :has() pour y parvenir).
L'animation doit avoir une durée 100 milisecondes se répétant à l'infinie et doit accélérer progressivement pour ralentir en fin de parcours.
En plus de l'animation, ajoutez à l'élément .speaker.inside un flou de 0.05%.
Créez-vous une nouvelle animation nommée center qui applique une translation horizontale de -51% à -49% et une translation verticale de -49% à -51%.
Appliquez cette animation à l'élément .speaker.center lorsqu'un membre du groupe est survolé (Utilisez :has() pour y parvenir).
L'animation doit avoir une durée 50 milisecondes se répétant à l'infinie et de façon linéaire.
En plus de l'animation, ajoutez à l'élément .speaker.center un flou de 0.02%.
Créez-vous une dernière animation nommée border qui applique une translation horizontale de -50.2% à -49.8% et une translation verticale de -49.8% à -50.2%.
Appliquez cette animation à l'élément .speaker.border lorsqu'un membre du groupe est survolé (Utilisez :has() pour y parvenir).
L'animation doit avoir une durée 50 milisecondes se répétant à l'infinie et de façon linéaire.
En plus de l'animation, ajoutez à l'élément .speaker.border un flou de 0.01%.
Ambiance
Corrigé
Zip / Asian Dub Foundation - Rafi's Revenge
Pen / Asian Dub Foundation - Rafi's Revenge
Démo / Asian Dub Foundation - Rafi's Revenge