Tutoriaux
Créer des coins arrondis à la Google Analytics avec CSS
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 réseau social favoris
Rétrolien(0)
Adresse URI pour un rétrolien sur cet articleCommentaires (0)
Flux RSS pour les commentairesEcrivez un commentaire
Navigation
Publicités
Nos services
Programmation Web
Que ce soit pour faire la conception d'un site Web ou pour la refonte d'un site existant, nous avons la solution.
La création et la conception Web sont au cœur de nos activités. Chaque concept et création sont différents, et chaque client est unique. Rien n’est laissé au hasard pour faire de votre création multimédia un outil unique de promotion.
Suite ...
Programmation Desktop
Quel que soit votre projet, nous pouvons le réaliser pour vous !
Grâce à notre expertise en programmation, nous sommes en mesure de concevoir une variété d’applications qui pourront vous permettre d’augmenter votre clientèle, de la fidéliser ou encore de réduire vos coûts d’opération ! Nos critères élevés de contrôle de qualité ainsi que la grande expertise de nos programmeurs et de nos chargés de projets contribuent au succès des mandats qui nous sont confiés.
Suite ...
Autres ...
Quel que soit vos projets ou vos idées, contactez nous!
Grâce à notre expérience et notre expertise en informatique, nous serons en mesure d'évaluer vos projets et nous pourrons trouver une solution à vos problèmes. Que ce soit de la programmation ou de la base de données ou bien tout autres problèmes informatiques, contactez nous, nous serons là pour vous.
Suite ...