Déjà implémentées sur quelques navigateurs de nouvelles propriétés CSS3 devraient grandement faciliter l'existence de nos amis webmasters. Elles ont pour nom border-radius, box-shadow etc.. examinons cela de plus près.
Border-radius
Cette propriété permet d'arrondir les angles, plus besoin de se compliquer avec des images.
Ci-dessous les propriétés à utiliser selon les divers navigateurs.
- border-radius // Opéra et prochainement IE
- -moz-border-radius // Firefox
- -webkit-border-radius // Safari et Google Chrome
Par exemple nous allons créer un bouton :
CSS
span{
background-color:#56b0e5;
color:#fff;
padding:4px 8px;
border-radius: 6px; /* arrondi de 6 pixels */
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
cursor:pointer;
}
HTML
<span>BOUTON</span>
Résultat :
BOUTON
Comment arrondir que certains coins ?
- border-radius: TopLeft TopRight BottomRight BottomLeft // Valeurs à définir en pixels
Par exemple on peut créer un onglet :
CSS
span{
...
border-radius: 6px 6px 0px 0px; 0 /* arrondi de 6px pour les 2 coins hauts */
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
...
}
Résultat :
ONGLET
