Partagez winpix...

Facebook Twitter Google Delicious RSS

Posté le 18 mars 2010 par winpix

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

Partager cet article

Facebook Twitter Google My Space Delicious

Commentaires

Vous pouvez poster votre commenataire sans être identifié.

En revanche si vous possédez un compte, identifiez-vous cela vous évitera de renseigner à chaque vos coordonnées.

Les champs marqués d’une * sont obligatoires.

Ce formulaire accepte le BBCODE.


Identification