Pour cet exercice, vous devez écrire du CSS afin de recréer la pochette de l’album "3615" du groupe rap français TTC. Vous y ajouterai aussi un effet de vibration de sonnerie pour rappeller l'excellente pièce "Téléphone".
Aperçu du résultat 👇
Matériel
Dossier de départ
Couleurs 🎨
#01a1ff
#ff7304
#d8dc09
#da5767
#5d0166
#555555
#ffffff
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 fichier HTML.
Requis de base
Créez une variable pour chacune des couleurs pour utilisation ultérieure.
Créez une variable nommée --speed et attribuez-lui la valeur de 5 seconde. Celle-ci servira à déterminer le temps de l'animation.
Le fond de la page doit être de couleur grise et avoir un dégradé vertical allant du rouge au jaune, au orange et au bleu.
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 blanche et avoir un ombrage de 10vmin égal de tous les côtés de couleur noire semi-transparente.
Assurez-vous que rien ne dépasse de l'album.
Requis arrière-plan
Afin de corriger la légère déformation du SVG, positionnez l'arrière-plan (.bg) de manière absolue à -0.25% du haut et de la gauche et donnez-lui une dimension de 100.5% en largeur et en hauteur.
Le contour (.contour) doit être de couleur mauve.
Les parties de l'arrière-plan (.part) doivent être respectivement de couleur orange, rouge, jaune et bleu.
Animation arrière-plan
Créez une animation nommée parts appliquant une transition de couleurs en 4 étapes (0%,100% - 25% - 50% - 75%) du bleu au jaune au rouge et au orange.
Appliquez cette animation aux parties de l'arrière-plan (.part) de manière infinie et d'une durée correspondant à la variable --speed.
Afin de décaler les couleurs, appliquez à l'animation un délais négatif de 0 moins la durée de l'animation divisé par 4 et multiplié par la variable --nb. Pour vous simplifier la vie, voici la formule: calc(0s - (var(--speed) / 4 * var(--nb))).
Requis lettres
Les lettres doivent avoir la police d'écriture Arial, une grosseur de 30vmin, un poid de 800, être de couleur mauve et avoir une rotation de -15deg.
Placez respectivement les trois lettres à 28% de la gauche et 2% du haut, 15% de la gauche et 46% du haut et 56% de la gauche et 35% du haut.
Assurez-vous que le curseur demeure celui par défaut lorsque les lettres sont survolées.
Animation lettres
Créez une animation nommée letter appliquant une rotation de -20deg à -10deg et appliquez-la sur le survol des lettres.
L'animation doit avoir une durée 5 millisecondes et se répéter à l'infinie de manière alternée et linéaire.
Toujours lors du survol des lettres, appliquez-leur un flou de 0.2vmin.
Ambiance
Corrigé
Zip / TTC - 3615
Pen / TTC - 3615
Démo / TTC - 3615