Blog

Logo en CSS

16 novembre 2011 par korvus | Catégorie: Boulot

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 !

La structure HTML

<div id="logo">

	<span class="circle1">Le cercle bleu principal, extérieur.</span>
	<span class="circle2">Par dessus le cercle bleu, le premier cercle interne, blanc.</span>
	<span class="circle3">Le petit cercle bleu du centre de la cible.</span>
	<span class="circle4">Le cercle blanc quasi transparent qui permet de donner l'effet de reflet à l'ensemble de la cible.</span>
	<span class="arrow1">Pointe de la flèche blanche qui se détache.</span>
	<span class="arrow2">Masque blanc.</span>
	<span class="arrow3">Pointe de la flèche marron.</span>
	<span class="arrow4">Partie blanche gauche de la flèche, qui passe par dessus le cercle extérieur.</span>
	<span class="arrow5">Partie marron gauche de la flèche, qui passe par dessus le cercle.</span>
	<span class="arrow6">Partie droite / supérieure marron de la flèche.</span>
	<span class="arrow7">Cache du bas de la partie précédente, du même fond que le cercle bleu.</span>
	<span class="arrow8">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.</span>

</div>

Rien de bien sorcier donc, comme on peut le constater !

Les CSS

#logo{position:relative;margin:74px 0 0 80px;text-indent:-9999px;}
#logo span{position:absolute;display:block;}

.circle1{
	clip:rect(-2px,257px,276px,-6px);
	top:77px;left:21px;
	width:241px;height:267px;
	border:1px solid transparent;
	border-top-left-radius:145px 160px;
	border-top-right-radius:110px 123px;
	border-bottom-left-radius:110px 120px;
	border-bottom-right-radius:144px 157px;
	-webkit-box-shadow:0 0 0 100px #fff;
	background:#01b0e7;
	background:-moz-radial-gradient(center, ellipse cover,  #0072a1 1%, #01b0e7 60%) 51px 26px;
	background:-webkit-gradient(radial, 51px 26px, 0px, 51px 26px, 100%, color-stop(1%,#0072a1), color-stop(60%,#01b0e7));
	background:-webkit-radial-gradient(center, ellipse cover,  #0072a1 1%,#01b0e7 60%) 51px 26px;
	background:-o-radial-gradient(center, ellipse cover, #0072a1 1%, #01b0e7 60%) 51px 26px;
	background:-ms-radial-gradient(center, ellipse cover,  #0072a1 1%, #01b0e7 60%) 51px 26px;
	background:radial-gradient(center, ellipse cover,  #0072a1 1%, #01b0e7 60%) 51px 26px;
}

.circle2{left:54px;top:131px;width:145px;height:145px;background:#fff;border-radius:73px;
	-moz-transform:rotate(64deg) skew(-4deg, 15deg);
	-webkit-transform:rotate(64deg) skew(-4deg, 15px);
	-o-transform:rotate(64deg) skew(-4deg, 15px);
	-ms-transform: rotate(64deg) skew(-4deg, 15px);
}

/* Element Central */
.circle3{
	top:163px;left:84px;
	width:80px;height:75px;
	border-radius:50px;
	background:#009dd2;
	background:-moz-linear-gradient(-45deg, #00a0d7 0%, #19b3e6 100%);
	background:-webkit-gradient(linear, left top, right bottom, color-stop(0%,#00a0d7), color-stop(100%,#19b3e6));
	background:-webkit-linear-gradient(-45deg, #00a0d7 0%,#19b3e6 100%);
	background:-o-linear-gradient(-45deg, #00a0d7 0%,#19b3e6 100%);
	background:-ms-linear-gradient(-45deg, #00a0d7 0%,#19b3e6 100%);
	background:linear-gradient(-45deg, #00a0d7 0%,#19b3e6 100%);
	-moz-transform:rotate(72deg) skew(-4deg, 15deg);
	-webkit-transform:rotate(72deg) skew(-4deg, 15px);
	-o-transform:rotate(72deg) skew(-4deg, 15px);
	-ms-transform:rotate(72deg) skew(-4deg, 15px);
}

.circle4{
	top:-59px;left:6px;
	width:260px;height:260px;
	border-radius:130px;
	background:#fff;
	opacity:0.2;
	clip:rect(133px,247px,272px,30px);
}

.arrow1{
	border-top:50px solid transparent;
	border-right:42px solid transparent;
	border-bottom:41px solid transparent;
	border-left:47px solid #fff;
	height:1px;width:1px;top:159px;left:94px;
	-moz-transform:rotate(21deg);
	-webkit-transform:rotate(21deg);
	-o-transform:rotate(21deg);
	-ms-transform:rotate(21deg);
}

.arrow2{width:30px;height:60px;background:#fff;top:162px;left:77px;}

.arrow3{
	border-left:34px solid #894436;
	border-right:34px solid transparent;
	border-top:30px solid transparent;
	border-bottom:30px solid transparent;
	height:1px;width:1px;top:175px;left:93px;
	-moz-transform:rotate(21deg);
	-webkit-transform:rotate(21deg);
	-o-transform:rotate(21deg);
	-ms-transform:rotate(21deg);
}

.arrow4{
	width:168px;height:121px;
	top:10px;left:20px;
	background:transparent;
	border:38px solid #fff;
	border-top-left-radius:45px 158px;
	border-bottom-left-radius:125px 121px;
	border-right:none;
	border-left-width:46px;
	border-top-width:none;
	border-bottom-width:none;
	clip:rect(0px,65px,272px,0);
}

.arrow5{
	width:168px;height:146px;
	top:0;left:28px;
	background:transparent;
	border:20px solid #8b4438;
	border-top-left-radius:141px 158px;
	border-top-right-radius:103px 137px;
	border-bottom-right-radius:102px 60px;
	border-bottom-left-radius:125px 121px;
	border-right:none;
	border-left-width:28px;
	border-top-width:46px;
	border-bottom-width:10px;
	clip:rect(0px,90px,272px,0);
}
.arrow6{
	width:118px;height:146px;
	top:0;left:28px;
	background:transparent;
	border:20px solid #8B4438;
	border-top-left-radius:141px 158px;
	border-top-right-radius:134px 137px;
	border-bottom-right-radius:102px 60px;
	border-bottom-left-radius:125px 121px;
	border-right-width:50px;
	border-left-width:28px;
	border-top-width:46px;
	border-bottom-width:10px;
	clip:rect(0px,200px,90px,64px);
}

.arrow7{
	background:#01b0e7;
	top:77px;left:21px;
	width:241px;height:267px;
	border:1px solid transparent;
	border-top-left-radius:145px 160px;
	border-top-right-radius:110px 123px;
	border-bottom-left-radius:110px 120px;
	border-bottom-right-radius:144px 157px;
	box-shadow:0 0 0 10px #fff;
	-webkit-box-shadow:0 0 0 10px #fff;
	-ms-box-shadow:0 0 0 10px #fff;
	clip:rect(-15px,208px,32px,143px);
}

.arrow8{
	background:#fff;
	top:77px;left:21px;
	width:241px;height:267px;
	border:1px solid transparent;
	border-top-left-radius:145px 160px;
	border-top-right-radius:110px 123px;
	border-bottom-left-radius:110px 120px;
	border-bottom-right-radius:144px 157px;
	box-shadow:0 0 0 10px #fff;
	-webkit-box-shadow:0 0 0 10px #fff;
	opacity:0.2;
	clip:rect(-15px,208px,32px,143px);
}

Les premiers résultats sont encourageants :

• Premier constat encourageant, mis à part le dégradé radial, l’ensemble des derniers navigateurs supportent parfaitement et de concert les propriétés nécessaires pour parvenir à ses fins.
• Mais avec un bémol : beaucoup de propriétés sont encore préfixées par leurs marques de navigateurs (-o, -webkit, etc.). Cela multiplie d’autant les lignes de code, et donc la lourdeur, évidemment. Heureusement, dans le lot, certaines ont au contraire abandonné leurs pesants préfixes.
• Le rendu n’est pas encore parfait et des traits apparaissent çà et là, entre deux border ! Le mauvais élève se révèle être… Opéra !

logo Twenga en full CSS

Des constats pour la mise en place de ce genre d’exercices :

• Comme en peinture, il vaut mieux partir des éléments de fond, pour « monter » vers les détails au fur et à mesure.
• Ne pas hésiter à fractionner des éléments qui semblent former un seul bloc pour parvenir à ses fins ! On détourne les CSS de leurs usages premiers, donc c’est normal de bricoler !
• Ne pas hésiter à utiliser le fond comme un élément qui se superpose sur les autres pour dessiner une contre-forme. Évidemment, le logo devient dépendant du fond, mais c’est du bricolage 🙂
• Bien qu’il soit plus que probable que les techniques changent beaucoup d’un logo à l’autre, des techniques que je n’ai jamais eu l’occasion d’utiliser s’avèrent ici particulièrement utiles.
• Par exemple, la propriété crop, généralement sous-employée, se révèle particulièrement utile. On se demande même pourquoi ses paramètres sont aussi pauvres finalement (il y a le rect(), mais pas le circle() ?).

Quand à une application concrète, ça ne viendrait à l’idée de personne ; Vu le nombre d’éléments DOM inutiles et sémantiquement nuls, des propriétés CSS détournées de leur fonctions originales comme les borders, il apparaît instantanément qu’un logo en image, voire en SVG paraîtrait tout de suite plus approprié.

Quelques liens utiles (que ceux que l’intégration intéressent connaîtront plus que probablement) :

• Générateur de dégradé de couleurs intuitif « a la photohop »
• Les borders radius, et leur applications poussées (avec liens vers la documentation officielle)