NoShade vous plaît?
Nos tutoriaux vous ont aidé?
Nos tutoriaux vous ont aidé?
Partenaires
Webdesign Tutoriaux
Pix-creations
Snoupix
Dot design
Tutofactory
Artbook tuto blog
Antoine Evin
Cours Photoshop
Artspeak
PixBay
Microshyma
Retrographic
Tuto room
Photoshop
DreamSeed
Utopla
Target Graphik
Kwintox
Annuaire gratuit
Jeux de casino
Casinos en ligne
Forex
Backgammon
Online Casinos
Arrondir les bords d'un bloc
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