Arrondir les bords d'un bloc
Les CSS sont en train d'aller bien loin, de nouvelles propriétées se créent, nous allons voir l'une d'entre elle, bien sympathique, mais pour l'instant uniquement displonible pour les navigateurs dont le moteur est Gecko (Firefox et Camino par exemple).
Vous allez vite voir que la technique est très simple, en effet, elle ne tient que sur une ligne de CSS! ;)
La propriété à utiliser est la suivante :
-moz-border-radius
Suivie d'une valeur, le plus souvent en pixels, mais vous pouvez tout aussi bien la définir en pourcentage ou autre.
Passons directement au code de notre exemple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Test</title>
<style>
#arrondis {
height: 200px; /* Hauteur du bloc */
width: 400px; /* Largeur du bloc */
background-color: #868B94; /* Couleur du fond */
color: white; /* Couleur du texte */
padding: 20px; /* Pour que le texte ne colle pas aux bords */
border: solid black 2px; /* On met des bords noirs au bloc */
-moz-border-radius: 35px; /* On applique des arrondis aux bords du bloc */
}
</style>
</head>
<body>
<div id="arrondis">
<h1>Bonjour</h1>
<p>Hello</p>
<p>Holla</p>
<p>Hi!</p>
</div>
</body>
</html>
Essayez donc chez vous, ça devrait marcher! :D
Bien entendu, il vous faut Firefox ou Camino pour en voir le résultat.
A noter que pour les navigateurs de type khtml, comme Safari, Shiira ou autre, on dit que l'équivalent de cette propriété sera
-khtml-border-radius. Mais pour le moment, cette propriété ne donne de résultat que sous les moteurs Gecko...
Ceci dit, vous le verrez rapidement, les angles ne sont pas lissés, c'est un peu "cradouille" si vous souhaitez faire une interface du "top du top"! ;)
Quant à la compatibilité avec IE... no comment. :D
Amusez vous bien! ;)
Le 24/06/2006 par Legibe
Partager ce tutoriel :
Vous avez aimé ce tutoriel ?
Faites un don pour nous encourager à en écrire d'autres! :-)
Commentaires :
yosweb a écrit :
merci pour le tutoriel c vachement bon
SirGalaad a écrit :
Bonjour.
Je suis désolé mais je doute que cela fonctionne ...
En effet, votre div a pour id "arrondis" or votre css style porte sur un élément ayant pour id "arrond" ...
A la limite pour que cela fonctionne il faudrait mettre votre style dans la balise <div> directement ...
Mais pris tel quel, aucune chance que cela fonctionne.
Legibe a écrit :
Oups!
j'avais codé un script pour mettre automatiquement un carré de couleur après une couleur hexa dans les tutos, et ça a fait foiré le tuto, il captai "#arrond" comme une couleur haxa et faisait déconner le reste... bref, c'est corrigé, merci pour la remarque!
(là, ça marche du coup!)
SirGalaad a écrit :
Oui-da là c'est nickel :)
merci de cette astuce :)
Legibe a écrit :
de rien!! merci encore à toi :)
Vincent a écrit :
Bonjour, Super ton astuce elle marche super.
pierre a écrit :
Merci beaucoup pour ce tuto de qualité.
Par contre j'imagine qu'il n'éxiste pas d'équivalent chez notre amis internet explorer ?
Merci
Legibe a écrit :
de rien :-)
uniquement à partir d'IE9 en fait... mais il me semble qu'il existe des librairies javascript/plugin jquery pour ça, pas sûr...
CSS, Arrondir, Arrondis, Bords, border-radius, Block
Si vous avez remarqué une erreur (une faute ou tout autre type de problème que nous puissions corriger), n'hésitez pas à nous écrire!
Soyez aussi précis que possible et n'oubliez pas de nous indiquer le tutoriel dans lequel l'erreur se trouve. Merci!! :)