Logo en CSS
Je travaille actuellement pour Twenga, comparateur de prix.
Comme la plupart des entreprise, 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 a l’ensemble de la cible.Pointe de la fleche 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érieur 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.