Masquage - Barbie Selfie

Pour cet exercice, vous devez écrire du CSS afin de recréer l'effet généré par le site web promotionel Barbie Selfie Generator.

Aperçu du résultat 👇

Matériel Dossier de départ

Font

Barbie

Couleurs 🎨

#42c5fd #b9eefe
#e240a3 #ffffff

Médias

Barbie Patch
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. Le fond de la page doit être un dégradé allant du bleu ciel au bleu clair. Requis selfie Le selfie doit être un carré d'une dimension de 80% du plus petit côté de la fenêtre, être centré tant horizontalement que verticalement et être de couleur rose. Afin de lui donner une texture de fond, utilisez le pseudo-élément ::before en position absolue couvrant l'entièreté du selfie. Ajoutez au pseudo-élément le filtre SVG url(#grain), un grayscale de 100%, une luminosité de 50%, un contraste de 200% et un flou de 2px. Fusionnez le pseudo-élément en mode color-dodge. L'élément .photo doit être positionné de manière absolue et prendre tout l'espace disponible à l'intérieur du selfie. La photo doit avoir comme arrière-plan l'image barbie.webp ayant une largeur automatique, une hauteur de 90% et être placé en bas au centre. Appliquez le masque patch.svg à l'élément .selfie. Requis texte À l'aide de @font-face, importez la police d'écriture barbie.ttf et appliquez la au h1. N'oubliez pas le format. Le nom Barbie doit avoir une grosseur de police d'écriture de 14% du plus petit côté de la fenêtre, être centré horizontalement, être positionné verticalement à 70% de son parent et être de couleur blanche. Appliquez-lui une rotation négative de 12deg. Afin de créer un effet de contour intérieur, utilisons le pseudo-élément ::before en position absolue. Attribuez lui le contenu content: attr(data-text);. Le pseudo-élément doit être de couleur rose et avoir le filtre SVG url(#dilate). Faites-en sorte qu'il soit affiché derrière son élément parent. Requis animation Créez une animation nommée shine appliquant un filtre drop-shadow blanc égal de tous les côtés et d'une grosseur allant de 1vmin à 6vmin. Appliquez cette animation d'une durée de 1 seconde à l'élément .photo, de manière alternée, infinie et commençant lentement. Bande-annonce Notes de cours 📚