J'utilise Google Analytics depuis bientôt 1 an et j'ai remarqué un superbe effet de coin arrondi sur leur barre de navigation gauche. Au lieu d'utiliser la méthode des « box », ils ont « supprimé » 1 pixel dans chaque coin. Ceci ne donne pas un coin arrondi réellement, mais l'effet visuel est assez sympa et offre des coins beaucoup plus jolis qu'un coin carré.
Après quelques vérifications, nous avons observé que Google n'utilisait pas d'image pour créer ses coins arrondis. Nous avons donc étudié le tout et nous avons reproduit la technique grâce à quelques balises imbriquées comme ceci :
<ul>
<li>
<a href="#">
<b>
<b>
Visitors
</b>
</b>
</a>
</li>
</ul>
<li>
<a href="#">
<b>
<b>
Visitors
</b>
</b>
</a>
</li>
</ul>
Vous me direz que cette technique abuse peut-être un peu des balises, mais ce qui compte ici est le résultat non ? Il existe une technique utilisant plus de balises afin de donner au coin un plus grand radius, mais dans ces cas-là il vaut mieux utiliser une autre approche selon moi.
Voici donc ici le code CSS qui donne tout son sens à cette approche :
li a {
display:block;
border: solid #666;
border-width: 0 1px;
text-decoration: none;
outline:none;
color: #000;
background: #e4e4e4;
}
li a b {
display: block;
position:relative;
top: -1px;
left: 0;
border:solid #666;
border-width:1px 0 0;
font-weight:normal;
}
li a b b {
border-width:0 0 1px;
top: 2px;
}
display:block;
border: solid #666;
border-width: 0 1px;
text-decoration: none;
outline:none;
color: #000;
background: #e4e4e4;
}
li a b {
display: block;
position:relative;
top: -1px;
left: 0;
border:solid #666;
border-width:1px 0 0;
font-weight:normal;
}
li a b b {
border-width:0 0 1px;
top: 2px;
}
Ajouter cette page à votre Digg-Like préféré
Marquer favoris
Bookmark
Email This
Hits: 804
Commentaires (4)
Ecrit par Dave Lizotte, mai 12, 2008
L'idée ne vient pas de moi, mes les programmeurs de Google, on effectué le tout comme celà! Mais effectivement, c'est n'est pas très « sémantique » !
Ecrit par jbj, mai 11, 2008
Complètement d'accord avec les commentaires au dessus: si l'idée est bonne dans la théorie, on pourrait aisément faire mieux niveau qualité du html. De plus, tu ne peux pas (Selon le W3C) imbriquer deux balise b(qui elle même est dépréciée) l'une dans l'autre.
Ecrit par DuMe, mai 09, 2008
Ça me dérange un peu d'utiliser des balises bold, deux fois de suite pour faire cela. Surtout pour ensuite enlever la propriété bold... un span serai plus judicieux. non?
Ecrit par David (Azur Dev), mai 09, 2008
> mais ce qui compte ici est le résultat non ?
Ça dépend si on fait de l'HTML pour faire joli comme en 1980 ou pour indiquer l'importance du texte, ce que recommande le W3C.
Ça dépend si on fait de l'HTML pour faire joli comme en 1980 ou pour indiquer l'importance du texte, ce que recommande le W3C.
Ecrivez un commentaire
