{"id":70,"date":"2011-11-16T20:44:07","date_gmt":"2011-11-16T20:44:07","guid":{"rendered":"http:\/\/simonertel.net\/blog\/?p=70"},"modified":"2026-04-25T21:21:28","modified_gmt":"2026-04-25T21:21:28","slug":"css","status":"publish","type":"post","link":"https:\/\/simonertel.net\/blog\/css\/","title":{"rendered":"Logo en CSS"},"content":{"rendered":"

Je travaille actuellement pour Twenga<\/a>, comparateur de prix.<\/p>\n

Comme la plupart des entreprises, elle poss\u00e8de une identit\u00e9 visuelle forte, marqu\u00e9e par un logo identifiable par une cible, marqu\u00e9e d’une fl\u00e8che.
\nPour le fun et par mode, je me suis piqu\u00e9 au jeu de refaire le logo en CSS pur, sans image ni javascript !<\/p>\n

Exercice aussi laborieux qu’amusant et inutile, je m’y suis confront\u00e9, curieux de voir si j’allais me confronter \u00e0 une quelconque difficult\u00e9 inattendue ou d\u00e9couverte !<\/p>\n

 <\/p>\n

Le cercle bleu principal, ext\u00e9rieur.<\/span>Par dessus le cercle bleu, le premier cercle interne, blanc.<\/span>Le petit cercle bleu du centre de la cible.<\/span>Le cercle blanc quasi transparent qui permet de donner l’effet de reflet \u00e0 l’ensemble de la cible.<\/span>Pointe de la fl\u00e8che blanche qui se d\u00e9tache.<\/span>Masque blanc.<\/span>Pointe de la fl\u00e8che marron.<\/span>Partie blanche gauche de la fl\u00e8che, qui passe par dessus le cercle ext\u00e9rieur.<\/span>Partie marron gauche de la fl\u00e8che, qui passe par dessus le cercle.<\/span>Partie droite \/ sup\u00e9rieure marron de la fl\u00e8che.<\/span>Cache du bas de la partie pr\u00e9c\u00e9dente, du m\u00eame fond que le cercle bleu.<\/span>Cache du cache (!) qui permet d’att\u00e9nuer le bleu du cache du dessous de la m\u00eame mani\u00e8re que le fait le span.circle4.<\/span><\/div>\n

<\/p>\n

La structure HTML<\/h3>\n
\n<div id=\"logo\"><\/span>\n\n\t<span class=\"circle1\"><\/span>Le cercle bleu principal, ext\u00e9rieur.<\/span><\/span>\n\t<span class=\"circle2\"><\/span>Par dessus le cercle bleu, le premier cercle interne, blanc.<\/span><\/span>\n\t<span class=\"circle3\"><\/span>Le petit cercle bleu du centre de la cible.<\/span><\/span>\n\t<span class=\"circle4\"><\/span>Le cercle blanc quasi transparent qui permet de donner l'effet de reflet \u00e0 l'ensemble de la cible.<\/span><\/span>\n\t<span class=\"arrow1\"><\/span>Pointe de la fl\u00e8che blanche qui se d\u00e9tache.<\/span><\/span>\n\t<span class=\"arrow2\"><\/span>Masque blanc.<\/span><\/span>\n\t<span class=\"arrow3\"><\/span>Pointe de la fl\u00e8che marron.<\/span><\/span>\n\t<span class=\"arrow4\"><\/span>Partie blanche gauche de la fl\u00e8che, qui passe par dessus le cercle ext\u00e9rieur.<\/span><\/span>\n\t<span class=\"arrow5\"><\/span>Partie marron gauche de la fl\u00e8che, qui passe par dessus le cercle.<\/span><\/span>\n\t<span class=\"arrow6\"><\/span>Partie droite \/ sup\u00e9rieure marron de la fl\u00e8che.<\/span><\/span>\n\t<span class=\"arrow7\"><\/span>Cache du bas de la partie pr\u00e9c\u00e9dente, du m\u00eame fond que le cercle bleu.<\/span><\/span>\n\t<span class=\"arrow8\"><\/span>Cache du cache (!) qui permet d'att\u00e9nuer le bleu du cache du dessous de la m\u00eame mani\u00e8re que le fait le span.circle4.<\/span><\/span>\n\n<\/div><\/span><\/pre>\n
 <\/p>\n
Rien de bien sorcier donc, comme on peut le constater !<\/p>\n
Les CSS<\/h3>\n
#logo{<\/span>position:<\/span>relative;<\/span>margin:<\/span>74px 0 0 80px;<\/span>text-indent:<\/span>-9999px;<\/span>}<\/span>\n#logo span{<\/span>position:<\/span>absolute;<\/span>display:<\/span>block;<\/span>}<\/span>\n\n.circle1{<\/span>\n\tclip:<\/span>rect(-2px,257px,276px,-6px);<\/span>\n\ttop:<\/span>77px;<\/span>left:<\/span>21px;<\/span>\n\twidth:<\/span>241px;<\/span>height:<\/span>267px;<\/span>\n\tborder:<\/span>1px solid transparent;<\/span>\n\tborder-top-left-radius:<\/span>145px 160px;<\/span>\n\tborder-top-right-radius:<\/span>110px 123px;<\/span>\n\tborder-bottom-left-radius:<\/span>110px 120px;<\/span>\n\tborder-bottom-right-radius:<\/span>144px 157px;<\/span>\n\t-webkit-box-shadow:<\/span>0 0 0 100px #fff;<\/span>\n\tbackground:<\/span>#01b0e7;<\/span>\n\tbackground:<\/span>-moz-radial-gradient(center, ellipse cover,  #0072a1 1%, #01b0e7 60%) 51px 26px;<\/span>\n\tbackground:<\/span>-webkit-gradient(radial, 51px 26px, 0px, 51px 26px, 100%, color-stop(1%,#0072a1), color-stop(60%,#01b0e7));<\/span>\n\tbackground:<\/span>-webkit-radial-gradient(center, ellipse cover,  #0072a1 1%,#01b0e7 60%) 51px 26px;<\/span>\n\tbackground:<\/span>-o-radial-gradient(center, ellipse cover, #0072a1 1%, #01b0e7 60%) 51px 26px;<\/span>\n\tbackground:<\/span>-ms-radial-gradient(center, ellipse cover,  #0072a1 1%, #01b0e7 60%) 51px 26px;<\/span>\n\tbackground:<\/span>radial-gradient(center, ellipse cover,  #0072a1 1%, #01b0e7 60%) 51px 26px;<\/span>\n}<\/span>\n\n.circle2{<\/span>left:<\/span>54px;<\/span>top:<\/span>131px;<\/span>width:<\/span>145px;<\/span>height:<\/span>145px;<\/span>background:<\/span>#fff;<\/span>border-radius:<\/span>73px;<\/span>\n\t-moz-transform:<\/span>rotate(64deg) skew(-4deg, 15deg);<\/span>\n\t-webkit-transform:<\/span>rotate(64deg) skew(-4deg, 15px);<\/span>\n\t-o-transform:<\/span>rotate(64deg) skew(-4deg, 15px);<\/span>\n\t-ms-transform:<\/span> rotate(64deg) skew(-4deg, 15px);<\/span>\n}<\/span>\n\n\/* Element Central *\/\n.circle3{<\/span>\n\ttop:<\/span>163px;<\/span>left:<\/span>84px;<\/span>\n\twidth:<\/span>80px;<\/span>height:<\/span>75px;<\/span>\n\tborder-radius:<\/span>50px;<\/span>\n\tbackground:<\/span>#009dd2;<\/span>\n\tbackground:<\/span>-moz-linear-gradient(-45deg, #00a0d7 0%, #19b3e6 100%);<\/span>\n\tbackground:<\/span>-webkit-gradient(linear, left top, right bottom, color-stop(0%,#00a0d7), color-stop(100%,#19b3e6));<\/span>\n\tbackground:<\/span>-webkit-linear-gradient(-45deg, #00a0d7 0%,#19b3e6 100%);<\/span>\n\tbackground:<\/span>-o-linear-gradient(-45deg, #00a0d7 0%,#19b3e6 100%);<\/span>\n\tbackground:<\/span>-ms-linear-gradient(-45deg, #00a0d7 0%,#19b3e6 100%);<\/span>\n\tbackground:<\/span>linear-gradient(-45deg, #00a0d7 0%,#19b3e6 100%);<\/span>\n\t-moz-transform:<\/span>rotate(72deg) skew(-4deg, 15deg);<\/span>\n\t-webkit-transform:<\/span>rotate(72deg) skew(-4deg, 15px);<\/span>\n\t-o-transform:<\/span>rotate(72deg) skew(-4deg, 15px);<\/span>\n\t-ms-transform:<\/span>rotate(72deg) skew(-4deg, 15px);<\/span>\n}<\/span>\n\n.circle4{<\/span>\n\ttop:<\/span>-59px;<\/span>left:<\/span>6px;<\/span>\n\twidth:<\/span>260px;<\/span>height:<\/span>260px;<\/span>\n\tborder-radius:<\/span>130px;<\/span>\n\tbackground:<\/span>#fff;<\/span>\n\topacity:<\/span>0.2;<\/span>\n\tclip:<\/span>rect(133px,247px,272px,30px);<\/span>\n}<\/span>\n\n.arrow1{<\/span>\n\tborder-top:<\/span>50px solid transparent;<\/span>\n\tborder-right:<\/span>42px solid transparent;<\/span>\n\tborder-bottom:<\/span>41px solid transparent;<\/span>\n\tborder-left:<\/span>47px solid #fff;<\/span>\n\theight:<\/span>1px;<\/span>width:<\/span>1px;<\/span>top:<\/span>159px;<\/span>left:<\/span>94px;<\/span>\n\t-moz-transform:<\/span>rotate(21deg);<\/span>\n\t-webkit-transform:<\/span>rotate(21deg);<\/span>\n\t-o-transform:<\/span>rotate(21deg);<\/span>\n\t-ms-transform:<\/span>rotate(21deg);<\/span>\n}<\/span>\n\n.arrow2{<\/span>width:<\/span>30px;<\/span>height:<\/span>60px;<\/span>background:<\/span>#fff;<\/span>top:<\/span>162px;<\/span>left:<\/span>77px;<\/span>}<\/span>\n\n.arrow3{<\/span>\n\tborder-left:<\/span>34px solid #894436;<\/span>\n\tborder-right:<\/span>34px solid transparent;<\/span>\n\tborder-top:<\/span>30px solid transparent;<\/span>\n\tborder-bottom:<\/span>30px solid transparent;<\/span>\n\theight:<\/span>1px;<\/span>width:<\/span>1px;<\/span>top:<\/span>175px;<\/span>left:<\/span>93px;<\/span>\n\t-moz-transform:<\/span>rotate(21deg);<\/span>\n\t-webkit-transform:<\/span>rotate(21deg);<\/span>\n\t-o-transform:<\/span>rotate(21deg);<\/span>\n\t-ms-transform:<\/span>rotate(21deg);<\/span>\n}<\/span>\n\n.arrow4{<\/span>\n\twidth:<\/span>168px;<\/span>height:<\/span>121px;<\/span>\n\ttop:<\/span>10px;<\/span>left:<\/span>20px;<\/span>\n\tbackground:<\/span>transparent;<\/span>\n\tborder:<\/span>38px solid #fff;<\/span>\n\tborder-top-left-radius:<\/span>45px 158px;<\/span>\n\tborder-bottom-left-radius:<\/span>125px 121px;<\/span>\n\tborder-right:<\/span>none;<\/span>\n\tborder-left-width:<\/span>46px;<\/span>\n\tborder-top-width:<\/span>none;<\/span>\n\tborder-bottom-width:<\/span>none;<\/span>\n\tclip:<\/span>rect(0px,65px,272px,0);<\/span>\n}<\/span>\n\n.arrow5{<\/span>\n\twidth:<\/span>168px;<\/span>height:<\/span>146px;<\/span>\n\ttop:<\/span>0;<\/span>left:<\/span>28px;<\/span>\n\tbackground:<\/span>transparent;<\/span>\n\tborder:<\/span>20px solid #8b4438;<\/span>\n\tborder-top-left-radius:<\/span>141px 158px;<\/span>\n\tborder-top-right-radius:<\/span>103px 137px;<\/span>\n\tborder-bottom-right-radius:<\/span>102px 60px;<\/span>\n\tborder-bottom-left-radius:<\/span>125px 121px;<\/span>\n\tborder-right:<\/span>none;<\/span>\n\tborder-left-width:<\/span>28px;<\/span>\n\tborder-top-width:<\/span>46px;<\/span>\n\tborder-bottom-width:<\/span>10px;<\/span>\n\tclip:<\/span>rect(0px,90px,272px,0);<\/span>\n}<\/span>\n.arrow6{<\/span>\n\twidth:<\/span>118px;<\/span>height:<\/span>146px;<\/span>\n\ttop:<\/span>0;<\/span>left:<\/span>28px;<\/span>\n\tbackground:<\/span>transparent;<\/span>\n\tborder:<\/span>20px solid #8B4438;<\/span>\n\tborder-top-left-radius:<\/span>141px 158px;<\/span>\n\tborder-top-right-radius:<\/span>134px 137px;<\/span>\n\tborder-bottom-right-radius:<\/span>102px 60px;<\/span>\n\tborder-bottom-left-radius:<\/span>125px 121px;<\/span>\n\tborder-right-width:<\/span>50px;<\/span>\n\tborder-left-width:<\/span>28px;<\/span>\n\tborder-top-width:<\/span>46px;<\/span>\n\tborder-bottom-width:<\/span>10px;<\/span>\n\tclip:<\/span>rect(0px,200px,90px,64px);<\/span>\n}<\/span>\n\n.arrow7{<\/span>\n\tbackground:<\/span>#01b0e7;<\/span>\n\ttop:<\/span>77px;<\/span>left:<\/span>21px;<\/span>\n\twidth:<\/span>241px;<\/span>height:<\/span>267px;<\/span>\n\tborder:<\/span>1px solid transparent;<\/span>\n\tborder-top-left-radius:<\/span>145px 160px;<\/span>\n\tborder-top-right-radius:<\/span>110px 123px;<\/span>\n\tborder-bottom-left-radius:<\/span>110px 120px;<\/span>\n\tborder-bottom-right-radius:<\/span>144px 157px;<\/span>\n\tbox-shadow:<\/span>0 0 0 10px #fff;<\/span>\n\t-webkit-box-shadow:<\/span>0 0 0 10px #fff;<\/span>\n\t-ms-box-shadow:<\/span>0 0 0 10px #fff;<\/span>\n\tclip:<\/span>rect(-15px,208px,32px,143px);<\/span>\n}<\/span>\n\n.arrow8{<\/span>\n\tbackground:<\/span>#fff;<\/span>\n\ttop:<\/span>77px;<\/span>left:<\/span>21px;<\/span>\n\twidth:<\/span>241px;<\/span>height:<\/span>267px;<\/span>\n\tborder:<\/span>1px solid transparent;<\/span>\n\tborder-top-left-radius:<\/span>145px 160px;<\/span>\n\tborder-top-right-radius:<\/span>110px 123px;<\/span>\n\tborder-bottom-left-radius:<\/span>110px 120px;<\/span>\n\tborder-bottom-right-radius:<\/span>144px 157px;<\/span>\n\tbox-shadow:<\/span>0 0 0 10px #fff;<\/span>\n\t-webkit-box-shadow:<\/span>0 0 0 10px #fff;<\/span>\n\topacity:<\/span>0.2;<\/span>\n\tclip:<\/span>rect(-15px,208px,32px,143px);<\/span>\n}<\/span><\/pre>\n
 <\/p>\n
Les premiers r\u00e9sultats sont encourageants :<\/h3>\n