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>
<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 :
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!! :)
Soyez aussi précis que possible et n'oubliez pas de nous indiquer le tutoriel dans lequel l'erreur se trouve. Merci!! :)
NoShade est un site de tutoriaux en graphisme (Photoshop, Illustrator, Cinema 4D, Flash, Blender, The GIMP, PAO), code (XHTML/CSS, PHP/MySQL) et en Photographie. En prime, quelques interviews d'infographistes de talent.
Illustrator
Flash MX
Paint Shop Pro
The GIMP
Blender
Votre pub ici? Annonceurs »
Nos cours vous ont aidés? Faire un don »
Envie de partager vos connaissances ?
Pourquoi pas devenir rédacteur sur NoShade ?
Tous les tutoriaux
Graphisme 2D
PhotoshopIllustrator
Flash MX
Paint Shop Pro
The GIMP
Graphisme 3D
Cinema 4DBlender
Votre pub ici? Annonceurs »
Nos cours vous ont aidés? Faire un don »
Envie de partager vos connaissances ?
Pourquoi pas devenir rédacteur sur NoShade ?