ajax

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.

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 ?
 

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

winpix - © 2010 - 2024