Pour cet exercice, vous devez écrire du CSS afin de recréer la pochette de l’album "Premiers Symptômes" du groupe de musique électronique français AIR.
Aperçu du résultat 👇
Matériel
Dossier de départ
Police d'écriture 🚓
Display Dots
Couleurs 🎨
#666666
#0a0402
#d43408
#c5c2a1
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 la police d'écriture et placez-la dans un dossier fonts.
Créez une variable pour chacune des couleurs pour utilisation ultérieure.
Créez une variable nommée --light-speed et donnez-lui la valeur de 2 secondes. Cette variable servira à déterminer la vitesse de clignotements des lumières.
La couleur de fond de la page doit être de couleur gris et avoir un dégradé vertical allant du orange au beige.
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 centré tant verticalement qu'horizontalement, être de couleur brun et avoir un ombrage de 10vmin égal de tous les côtés de couleur noire semi-transparente.
Afin de donner de la texture, utilisez le pseudo-élément ::before en position absolue couvrant tout l'espace de l'album avec le filtre SVG url(#grain) et un grayscale 100%.
Fusionnez le pseudo-élément avec le reste de l'album en mode color-dodge et donnez lui un z-index négatif.
Requis lumières
Chaque ligne (.line) doit avoir une hauteur de 5.5%, une marge exétieur de 1.2vmin, une grosseur de police d'écriture de 0px et avoir un alignement de texte centré.
Chaque lumière (.point) doit avoir un affichage inline-block, avoir une largeur de 5.5%, prendre tout l'espace disponible en hauteur, une marge extérieur de 0.63vmin et être de forme ronde.
Pour mieux comprendre ce que vous faites, donnez temporairement aux lumière la couleur orange.
À l'aide des sélecteurs, sélectionné TOUS les points correspondant au nom du groupe "AIR" comme dans l'image de référence et donnez-leurs temporairement la couleur beige.
Retirez la couleur orange temporaire aux éléments .points.
Créez une animation nommée points changeant la couleur d'arrière-plan de beige à orange et appliquez la aux aux points précédement sélectionnés tout en leur retirant la couleur temporaire d'arrière-plan beige.
L'animation doit s'éxécuter de manière infinie et avoir une durée correspondant à la variable --light-speed.
À ce stade-ci toutes les lumières devraient clignoter en même temps. Ain de leur donner un effet aléatoire, attribuez à l'animation un délai négatif correspondant à la variable --light-speed multiplié par la variable --nb.
Requis texte
À l'aide de @font-face, importez la police d'écriture DisplayDots-4nB4.woff et nommez-la DisplayDots. N'oubliez pas de spécifier le format.
Le titre de l'album (h1) doit être positionné de manière absolue, avoir la police d'écriture DisplayDots d'une grosseur de 4.5vmin, être situé à 2vmin de la gauche et 2vmin de la droite, avoir un espacement de lettres de 0.2vmin et être de couleur beige.
Afin de respecter le lettage original, appliquez-lui une déformation verticale d'un facteur de 1.2.
Ambiance
Corrigé
Zip / AIR - Premiers Symptômes
Pen / AIR - Premiers Symptômes
Démo / AIR - Premiers Symptômes