Les coins arrondis en CSS
Page 1 sur 1
Les coins arrondis en CSS
Vous en avez marre de votre design carré ? Vous aimeriez des coins arrondis sur vos cadres ? Le CSS permet de le faire très simplement et ce avec une simple propriété.
Dans ce tutoriel, nous allons utiliser la propriété border-radius. C'est elle qui permet d'arrondir nos coins. Elle s'utilise comme ceci :
Ceci est un exemple, vous pourrez bien sûr personnaliser le degré de rondeur de vos coins.
Simple, n'est-ce pas ? Voilà un petit exemple de cadre arrondi :
Notez que cette propriété ne définit que la rondeur des coins. C'est la propriété border qui définit le style de bordure. Border-radius complète donc border pour ajouter les coins arrondis.
Si vous voulez définir la rondeur de chaque coin, vous pouvez utiliser la propriété comme ceci :
Là encore, c'est personnalisable. Vous pouvez définir le nombre de pixels que vous voulez pour chaque coin. Les correspondances sont les suivantes :
Un petit exemple :
Et voilà, vous savez faire des coins arrondis !
Note : Il se peut que cela ne marche pas avec Firefox 3.6 et antérieur. Pour régler ce problème, vous devez créer la même propriété avec le préfixe -moz-. Cela donne :
Je pense que Firefox 4 n'aura plus besoin de ça, c'est juste une question de patience. Pour en savoir plus sur les préfixes : http://www.journaldunet.com/developpeur/client-web/les-prefixes-vendeurs-en-css.shtml
EDIT : Firefox 4 étant sorti, vous n'avez plus besoin d'utiliser le préfixe -moz-. Vous pouvez toujours utiliser des préfixes pour la compatibilité sur d'anciens navigateurs, mais il vaut mieux inciter vos visiteurs à se mettre à jour.
Une petite chose, pour IE, ce n'est même pas la peine d'y penser. Je vous conseille de mettre un message sur votre site pour inciter les utilisateurs d'IE à changer de navigateur.
Dans ce tutoriel, nous allons utiliser la propriété border-radius. C'est elle qui permet d'arrondir nos coins. Elle s'utilise comme ceci :
- Code:
#truc
{
border: 2px solid black;
border-radius: 15px;
}
Ceci est un exemple, vous pourrez bien sûr personnaliser le degré de rondeur de vos coins.
Simple, n'est-ce pas ? Voilà un petit exemple de cadre arrondi :
Notez que cette propriété ne définit que la rondeur des coins. C'est la propriété border qui définit le style de bordure. Border-radius complète donc border pour ajouter les coins arrondis.
Si vous voulez définir la rondeur de chaque coin, vous pouvez utiliser la propriété comme ceci :
- Code:
#truc
{
border: 2px solid black;
border-radius: 20px 40px 13px 0px;
}
Là encore, c'est personnalisable. Vous pouvez définir le nombre de pixels que vous voulez pour chaque coin. Les correspondances sont les suivantes :
Un petit exemple :
Et voilà, vous savez faire des coins arrondis !
Note : Il se peut que cela ne marche pas avec Firefox 3.6 et antérieur. Pour régler ce problème, vous devez créer la même propriété avec le préfixe -moz-. Cela donne :
- Code:
#truc
{
border: 2px solid black;
border-radius: 15px;
-moz-border-radius: 15px;
}
Je pense que Firefox 4 n'aura plus besoin de ça, c'est juste une question de patience. Pour en savoir plus sur les préfixes : http://www.journaldunet.com/developpeur/client-web/les-prefixes-vendeurs-en-css.shtml
EDIT : Firefox 4 étant sorti, vous n'avez plus besoin d'utiliser le préfixe -moz-. Vous pouvez toujours utiliser des préfixes pour la compatibilité sur d'anciens navigateurs, mais il vaut mieux inciter vos visiteurs à se mettre à jour.
Une petite chose, pour IE, ce n'est même pas la peine d'y penser. Je vous conseille de mettre un message sur votre site pour inciter les utilisateurs d'IE à changer de navigateur.
Dernière édition par Ubunix le Mar 31 Mai - 20:52, édité 1 fois
Invité- Invité
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|