Tutoriaux
Administrateur
Mai 09
|18:25
Mise à jour le Vendredi, 09 Mai 2008 18:26
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;
}
Envoyer par mail
Vu: 2954
Commentaires (0)
Flux RSS pour les commentairesEcrivez un commentaire
Navigation
Réseaux sociaux
Connexion
Publicités
MeilleursPrix.ca
|
|
