SVG - Hollywood Boulevard

Requis Illustrator

1. Créez un fichier Illustrator d’une dimension de 100x100px.

2. Utilisez l’outil de forme afin de tracer une étoile jaune 🟡 avec une bordure noire ⚫️ couvrant l’ensemble de votre canevas.

3. Choisissez une typographie et inscrivez votre nom par-dessus l’étoile. Une fois terminé, vectoriser votre texte.

4. Ajoutez un cercle noir ⚫️ au centre de l’étoile, sous votre nom.

5. Pensez à renommer adéquatement chaque calque de votre fichier (cette étape vous simplifiera grandement la vie pour la suite).

6. Ajustez la dimension de votre canevas à son contenu afin de retirer l’espace vide superflu.

7. Exportez votre SVG en fichier ou en code, selon votre préférence, et optimisez-le via SVGOMG afin de simplifier son contenu.

Requis web

1. Collez dans la section HTML du Pen de départ le code fourni par SVGOMG.

2. Si vous avez une balise <style>, copiez son contenu dans la section CSS de votre Pen et effacez cette balise.

3. Remarquez comment votre SVG prend toute la largeur de l’aperçu tout en restant toujours parfaitement net. Faites en sorte que votre étoile ait une largeur correspondant à  50% de celle de la page et qu’elle s’affiche à 50px du haut de celle-ci.

4. Déterminer quels éléments correspondent à quoi dans le code HTML en fonction des noms que vous avez donnés dans Illustrator. Au besoin, vous pouvez modifier les ids ou même ajouter des classes.

5. Ciblez l’étoile ⭐️ en CSS et changez sa couleur de fond afin qu’elle devienne rose et que sa bordure devienne jaune 🟡, comme les étoiles du Hollywood Boulevard.

6. Changez ensuite la couleur de fond du texte, ainsi que du cercle afin qu’ils deviennent jaunes 🟡 eux aussi.

7. Au survole de l’étoile, changez la couleur de sa bordure afin qu’elle devienne blanche ⚪️ et faites en sorte que l’opacité du cercle soit réduite à 75% seulement.