Logo en CSS
Contexte de publication
Cet article a été publié avant 2022, donc avant l'essor de l'IA générative. Certaines informations peuvent aujourd'hui être obsolètes. Les dessins et visuels d'époque présents ici ont été réalisés sans assistance de l'intelligence artificielle.
Je travaille actuellement pour Twenga, comparateur de prix.
Comme la plupart des entreprises, elle possède une identité visuelle forte, marquée par un logo identifiable par une cible, marquée d’une flèche.
Pour le fun et par mode, je me suis piqué au jeu de refaire le logo en CSS pur, sans image ni javascript !
Exercice aussi laborieux qu’amusant et inutile, je m’y suis confronté, curieux de voir si j’allais me confronter à une quelconque difficulté inattendue ou découverte !
Le cercle bleu principal, extérieur.Par dessus le cercle bleu, le premier cercle interne, blanc.Le petit cercle bleu du centre de la cible.Le cercle blanc quasi transparent qui permet de donner l’effet de reflet à l’ensemble de la cible.Pointe de la flèche blanche qui se détache.Masque blanc.Pointe de la flèche marron.Partie blanche gauche de la flèche, qui passe par dessus le cercle extérieur.Partie marron gauche de la flèche, qui passe par dessus le cercle.Partie droite / supérieure marron de la flèche.Cache du bas de la partie précédente, du même fond que le cercle bleu.Cache du cache (!) qui permet d’atténuer le bleu du cache du dessous de la même manière que le fait le span.circle4.