Pour cet exercice, vous devez écrire du CSS afin de recréer la pochette de la bande sonore du film Trainspotting de Danny Boyle.
Aperçu du résultat 👇
Matériel
Dossier de départ
Police d'écriture 🚓
Trainspotting
Couleurs 🎨
#011e30
#fe4f00
#888888
#ffffff
Médias 📷
Renton
Begbie
Diane
Sick Boy
Spud
Prenez le temps d'analyser le fichier HTML.
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.
Créez une variable nommée --carousel-duration et attribuez-lui la valeur de 6s. Cette variable sera utiliser pour déterminer la vitesse de défilement du carousel.
La couleur de fond de la page doit être de couleur grise et avoir un dégradé vertical allant du orange au bleu.
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 bleu et avoir un ombrage de 100px é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
L'album doit avoir l'image renton.webp comme arrière-plan et prendre tout l'espace disponible en rognant l'excédentaire.
Fusionnez les deux arrière-plans en mode luminosity.
Le contour (.contour) doit être positionné de manière absolue, avoir une hauteur et une largeur de 95%, une bordure solide de 0.2vmin de couleur orange et être centré tant horizontalement que verticalement.
Requis textes
À l'aide de @font-face, importez la police d'écriture trainspotting.otf, nommez-la Trainspotting et appliquez la à tous les éléments de la page. N'oubliez pas de spécifier le format.
Le titre du film (h1) doit être positionné de la manière absolue à 61% du haut, avoir une hauteur de 15.5% et prendre tout l'espace disponible en largeur.
Il doit aussi avoir l'arrière-plan de couleur orange, le texte de couleur blanc, une grosseur de police d'écriture de 11vmin, une hauteur de ligne de 100% et être centré horizontalement.
Le sous-titre (h2) doit être positionné de manière absolue à 4.5% de la gauche et 4.5% du haut, avoir une grosseur de police d'écriture de 1.7vmin et être de couleur orange.
La liste des groupes (.lineup) doit être positionné de manière absolue à 4.5% de la gauche et 8% du haut, avoir une marge intérieur de 0, une grosseur de police d'écriture de 2.2vmin et une hauteur de ligne de 3.2vmin.
Assurez-vous de retirer les puces de liste.
Requis carousel
Les conteneurs de personnage (.cast-wrapper) doivent être positionnés de manière absolue au bas de l'album, avoir une largeur de 16% et une hauteur de 23.5%.
Pour mieux comprendre ce que vous faites, placez temporairement les conteneurs à gauche à 25% multiplié par la variable --nb plus 4.5%. Pour vous faciliter la vie, voici la formule: calc(25% * var(--nb) + 4.5%).
Les personnages (.cast) doivent être positionnés de façon absolue couvrant tout l'espace horizontal et vertical, avoir un arrière-plan bleu et une bordure gauche et droite de 0.2vmin solide de couleur orange.
Placez les arrière-plans correspondants personnages sur les éléments .cast de manière à ce qu'ils couvrent tout l'espace disponible et que l'excédentaire soit rogné.
Fusionnez les arrière-plans des éléments casts en mode luminosity.
Le nom des personnages doit être positionné de manière absolue à 0.5vmin du bas et de la droite, avoir une grosseur de police d'écriture de 2vmin, être de couleur blanc et avoir un ombrage de 0.5vmin égal de tous les côtés de couleur orange.
Requis transition
Changez le point d'origine de transformation des personnes (.cast) afin qu'il soit situé dans le bas au centre.
Lors du survol des personnages (.cast), ils doivent grossir d'un facteur de 1.65 et l'arrière-plan doit devenir orange en 0.2 seconde.
Toujours lors du survol des personnages, l'opacité du nom des personnages doit atteindre 100% en 0.2 seconde et revenir à 0% après le survol aussi en 0.2 secondes. Ce qui implique que son opacité doit initialement être à 0%.
Requis animation
Afin de pouvoir créer l'animation du carousel, vous devez mettre en commentaire la propriété temporaire left des conteneurs de personnages (.cast-wrapper).
Créez une animation nommée carousel créant une translation horizontale partant de 80vmin pour aller à -100% et appliquez la aux conteurs de personnage (.cast-wrapper).
L'animation doit s'exécuter de façon linéaire et infinie et avoir une durée correspondant à la variable --carousel-duration.
Pour décaler les personnages dans le carousel, appliquez leurs un délai négatif correspondant à la variable --carousel-duration divisé par 4 multip... Ha pis voilà la formule: calc(0s - (var(--carousel-duration) / 4 * (3 - var(--nb)))).
À l'aide de la pseudo-classe :has(), lors du survol des éléments .cast-wrapper, faites en sorte que l'animation se mette sur pause.
Ambiances
Bande-annonce
Corrigé
Zip / Trainspotting
Pen / Trainspotting
Démo / Trainspotting