Lost Highway

Pour cet exercice, vous devez écrire du CSS afin de recréer la pochette de la bande sonore du film Lost Highway de David Lynch.

Aperçu du résultat 👇

Matériel Dossier de départ

Fonts

Lost Highway

Couleurs 🎨

#fbcf0e #fba80e #fda892
#050808 #333333 Prenez le temps d'analyser le fichier HTML. 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 --speed et attribuez-lui la valeur de 2s. Cette variable sera utiliser pour déterminer la vitesse à laquel les bandes de la route vont défiler. La couleur de fond de la page doit être de couleur grise et avoir un dégradé vertical allant du gris noir au jaune. 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 de couleur gris noir et avoir un ombrage de 100px égal de tous les côtés de couleur noire semi-transparente. Utilisez transform afin de positionner l'album au centre de la fenêtre. Ajoutez à l'album une perspective équivalente à 10% du plus petit côté de la fenêtre. Assurez-vous que rien ne dépasse de l'album. Requis autoroute L'autoroute (.highway) doit prendre tout l'espace disponible, être en position absolue et rien ne doit en dépasser. Les lignes (.stripe) doivent mesurer 5% de la largeur, 10% de la hauteur, avoir un gradient vertical allant du orange au jaune et avoir un flou de 0.25% du plus petit côté de la fenêtre. À l'aide de la propriété transform, placez les lignes de sorte qu'elles soient positionnées horizontalement au centre à 100% verticalement. Afin de créer un effet de vitesse, utilisez le pseudo-élément ::after. Il doit utiliser tout l'espace disponible, être positionné à -100% du haut et avoir un gradient vertical allant de transparent à orange. Créez une animation nommée stripe permettant de déplacer verticalement les lignes de -100% à 100vmin et appliquez la à la classe .stripe. L'animation doit s'éxécuter de façon linéaire, infinie et avoir une durée correspondant à la variable --speed. Afin de séparer les lignes, utilisez un délai négatif utilisant la variable inline --nb. Pour vous simplifier la vie, utilisez la formule suivante: calc(0s - (var(--speed) / 4 * var(--nb))). Les lumières (.light) doivent mesurer 35% de la largeur, 25% de la hauteur, être positionnées à 50% de la hauteur et 10% de leur côté respectif et avoir un dégradé horizontal allant de transparent à pêche à transparent. Elle doivent avoir un border-radius de 50%, un flou de 4vmin et une opacité de 70%. Pour créer un effet d'éloignement, utilisez le pseudo-élément ::after sur l'élément .highway. Il doit prendre toute l'espace disponible en largeur, 30vmin en hauteur, être situé en haut de l'autoroute et avoir un dégradé allant de gris noir à transparent. Afin de donner une texture d'asphalt à l'autoroute, l'élément .grain doit couvrir tout l'album, utiliser le filtre SVG url(#grain), avoir une luminosité de 50%, un contrast de 200% et être fusionné en mode multiply. Finalement, pour créer la perspective, donnez à l'élément .highway une rotation sur l'axe des X de 45deg, une déformation horizontale de 60% et une déformation verticale de 50%. Requis texte À l'aide de @font-face, importez la police d'écriture LostHighway.ttf et appliquez la au texte. N'oubliez pas le format. Le titre doit être placé horizontalement au centre de l'album, à 20% du haut, avoir une taille de police d'écriture de 4vmin, un espacement de lettres de 1.2vmin et être de couleur jaune. Appliquez au titre une déformation verticale de 200% et un skew vertical de -8deg. Lors du survol, le texte doit avoir un ombrage de 1vmin égale de tous les côtés de couleur orange. Afin de lisser l'effet de survol, faites-en sorte que la transition dure 0.1 seconde sur le hover et 1 seconde sur le retour à son état normal. Ambiance Bande-annonce Notes de cours 📚