Ce tutoriel va vous expliquer comment avoir des div avec des coins arrondis en utilisant CSS. La connaissance de CSS peut être basique. Vous pouvez simplement copier / coller le code CSS et personnaliser après.

1. CSS code pour le style

Le code CSS n'est pas forcément très court, comme un simple bout de code à copier / coller. Cela est dû au fait qu'il n'y a pas vraiment de directive unique entre les éditeurs de navigateur pour prendre en charge les coins arrondis. Dans le doute, je pense que nous devrions tous les intégrer ^^. Non, mais plus sérieusement, nous allons voir plus en détails quel attribut correspond à quel navigateur.

.div_avec_coins_arrondis{
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	
	background-color:#EFEFEF;
	padding:10px;
	width:100%;
	text-align:left;
}

2. Résultat

Détails sur les différents attributs liés aux coins arrondis

• border-radius : Cette propriété est prise en compte par CSS3.
• -webkit-border-radius : Cette propriété est prise en compte par Safari et Chrome.
• -moz-border-radius :Cette propriété est prise en compte par Mozilla.
• -o-border-radius : Cette propriété est prise en compte par Opera. Mais il ne semble pas être le cas aujourd'hui. Il devrait remplacé par border-radius.
• -khtml-border-radius : Cette propriété est prise en compte par Konqueror. Comme l'attribut précédent, il ne semble plus être utilisé aujourd'hui, utilisez border-radius à la place.

Le rayon est ici de 10 pixels pour tous les coins. Maintenant, nous allons voir comment faire pour avoir uniquement certains coins arrondis et avec des rayon différents pour chaque coin sur la même div.

3. Taille différente de rayon sur la même div

Voici un exemple où nous avons des coins arrondis uniquement en haut à droite et en bas à gauche. La personnalisation est vraiment facile à utiliser, et reste évidement à faire pour chaque navigateur.

.div_forme_1 {
	border-top-right-radius: 30px;
	border-bottom-left-radius: 30px;	
	-webkit-border-top-right-radius: 30px;
	-webkit-border-bottom-left-radius: 30px;
	-moz-border-radius-topright: 30px;
	-moz-border-radius-bottomleft: 30px;
	height:80px;
	width:80px;
}

.div_forme_2 {
	border-top-left-radius: 10px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 40px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 20px;
	-webkit-border-bottom-right-radius: 30px;
	-webkit-border-bottom-left-radius: 40px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 20px;
	-moz-border-radius-bottomright: 30px;
	-moz-border-radius-bottomleft: 40px;
	height:80px;
	width:80px;
}

Résultat




Il est probablement évident avec l'exemple "Forme 2" que chaque coin peut avoir son propre rayon et surtout quels sont les attributs à utiliser pour le faire.
Juste pour s'en assurer voici la liste des attributs pour chaque coin :

Attribut principal	Dérivé pour chaque coin
border-top-left-radius	border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
-webkit-border-radius	-webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-right-radius -webkit-border-bottom-left-radius
-moz-border-radius	-moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft

4. Cercle et Ovale

Il est également possible d'aller jusqu'à obtenir un disque ou une forme ovale.

.cercle_div {
	border-top-right-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topright: 20px;
	height:40px;
	width:40px;
}
.ovale_div {
	border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	-moz-border-radius: 100px / 50px;
	width: 200px;
	height: 100px;
}

Result

Bords uniquement

Bien sûr, toutes les formes que nous avons vues peuvent être utilisés que pour dessiner la bordure.

Générateur de code CSS

Finalement et pour vous simplifier la vie, nous avons ajouté un outil permettant de générer automatiquement le code CSS pour votre div. Vous n'avez plus qu'à mettre le rayon en pixels que vous souhaitez pour chaque coin et il vous donnera automatiquement le code pour l'ensemble de la div. Evidement, il s'agit d'un résultat automatique qui peut être optimisé suivant le résultat que vous attendez.

px		px
px		px

Conclusion

Pour résumer brièvement, dans ce tuto, on a vu comment créer des div avec des coins arrondis. On a vu comment avoir un rayon différent pour chaque coin et également comment faire pour rendre notre code avec la plupart des navigateurs.

  Commentaires

Ajouter un commentaire

Nom / Pseudo

Mail

Commentaire

Informez moi quand il y a un nouveau commentaire

Ajouter