Coins arrondis en CSS
Y’a des visiteurs qui postent des commentaires sur mon blog et qui m’envoient des mails à l’orthographe plutôt approximative. Exemple : “Comment que tu fais les coins arrondis qui encadrent nos commentaires ?” :arrow: Ne comptant pas tout expliquer 50 fois à tout le monde, j’ai donc décidé de faire un billet convi-convi 
Bon c’est un peu technique mais ne nous affolons pas, ma grand-mère y arriverait sans peine :lol:
Alors y’a deux méthodes pour deux types de gens. Actuellement j’ai employé la première méthode dite “à-la-rache” parce que j’voulais faire ça rapidement sans me prendre la tête. Voyons de quoi il retourne.
Méthode “Moz Attitude”
Cette méthode c’est vraiment la simplicité même puisqu’il suffit d’ajouter une ligne dans sa feuille de style CSS. Le truc c’est que cette bidouille ne fonctionne que pour les visiteurs utilisant Firefox comme navigateur. Les autres verront un classique encadrement à angle droit. Donc on admet que la variable du commentaire se situe dans une div appelée “commentaire”. On ajoute donc à la div, la propriété suivante :
Mise en place :
| HTML | Feuille de style CSS |
|
.commentaire |
La propriété -moz-border-radius peut prendre comme valeur une dimension ou un pourcentage qui dépendra directement de la largeur de la div.
Résultat final :
| Internet Explorer | Mozilla Firefox |
 |
 |
Notons que nous ne sommes pas obligés d’appliquer l’arrondissement aux quatre coins. On peut en effet utiliser les propriétés suivantes :
-moz-border-radius-bottomleft met un coin arrondi en bas à gauche.
-moz-border-radius-bottomright met un coin arrondi en bas à droite.
-moz-border-radius-topleft met un coin arrondi en haut à gauche.
-moz-border-radius-topright met un coin arrondi en haut à droite.
La propriété border-radius proposée pour CSS 3 n’a pas encore atteint le statut de Candidate Recommendation. Cette dernière n’autorise pas des valeurs différentes pour chaque coin. Notons que les images d’arrière-plan débordent au-delà des bordures arrondies et que les bordures arrondies ne supportent que la valeur solid pour border-style.
Méthode Universelle.
Cette seconde méthode est l’unique méthode qui fonctionne avec tous les navigateurs. Elle est un peu plus longue à mettre en place et personnellement je trouve le montage un peu crade mais bon… Si vous voulez que ça marche à chaque fois, vous n’avez guère le choix ! Il s’agit le plus simplement du monde de dessiner 4 coins (Photoshop, Paint, etc) puis d’imbriquer 4 div les unes dans les autres.
Nos 4 petits coins :
 |
 |
 |
 |
Mise en place :
| HTML | Feuille de style CSS |
|
.coin-superieur-gauche |
Notez bien l’importance du padding à 3% qui est primordial !
Résultat final :
| Internet Explorer | Mozilla Firefox |
 |
 |
Conclusion
La méthode à retenir est bien sûr la méthode universelle puisqu’elle fonctionnera invariablement sur tous les navigateurs. Néanmoins j’espère fortement que les problèmes présents sur la méthode -moz- seront réglés prochainement et que cette dernière sera adoptée CSS3. Non parce que franchement, l’imbrication des 4 div et le fait de dessiner 4 petits coins ça me ramène un p’tit peu à la maternelle et… ça fait clairement pitié !
Hello World !
Le probleme avec cette commande -moz, c’est qu’il n’y a que sous firefox que çà passe…
Ouaip Guigui et c’est pour ça qu’ils vont essayer de faire valider la propriété border-radius CSS3 mais ce n’est pas gagné visiblement. Il va falloir que je me motive à faire l’imbrication des 4 div un jour ou l’autre mais là… je n’ai pas trop le courage :lol:
précision : la méthode -moz ( accepté par le w3c même si le validateur râle) est disponsible sur firefox mais pas seulement tout les navigateur basé sur gecko le prenne en compte!
donc :
- firefox
- camino
- SeaMonkey
- Flock
et bien d’autres…
cf : http://fr.wikipedia.org/wiki/G[...]_de_rendu)
Excellente remarque ! Tu as très bien fait de le souligner Grummfy :nickel:
En meme temps on s’en fou de la’entourage du commentaire … le principal étant le commentaire !!! :lol: :lol:
Bon d’accord, cela fait mieux et plus propre, surtout avec ce nouveau design, mais encore une fois, cela m’interesse pas car étant sous IE, je vois pas la différence … Arf !!!
Un jour peut être je deviendrais aussi bon que le maître …
Moi je voudrais savoir comment on fait pour faire des formes hexagonales ? :razz:
Salut.
Il faut savoir que, même si la propriété passe CSS-3, non seulement la norme ne sortira pas demain, mains en plus il faudra un certain temps avant que la majorité des navigateurs (I.E. compris) le prenne en compte.
Donc ta solution est bien (je l’utilise sur un projet), mais réservée aux utilisateurs du moteur Gecko (de plus en plus rependu) comme le dit si bien Grummfy.
Ah bon ? Parce que maintenant Micro$oft va se mettre à prendre en compte des “standards” établis par d’autres ? (troll ironique inside) :-)
En parlant de l’interprétation faite par les différents moteurs ça me fait penser qu’il serait bon que je diffuse mon bout de code qui permet de faire pointer le bon navigateur sur la bonne CSS. Oué oué sur mon précédent template j’avais 3 CSS pour 3 moteurs de navigateur, c’était… classe :???:
Ca n’a jamais marché sous IE :ooo
Merci pour les infos, c’est sur ta page que je suis tombé lors d’une recherche “css bordures arrondies”
Tu introduis ta présentation en signalant les approximations langagières de certains, je me permets donc de corriger quelques petites erreurs que j’ai remarquées dans ton texte, par ailleurs bien mieux orthographié que la plupart des contributions que l’on lit sur le web.
“Comment que tu fais les coins arrondis qui encadrent nos commentaires ?”
La tournure est incorrecte, mais ne contient pas à proprement parler de faute d’orthographe.
“à-la-rache” n’est pas correct (c’est une orthographe souvent adoptée par les ados).
c’est “à l’arrache” qui convient.
Une tournure est maladroite :
“Ne comptant pas tout expliquer 50 fois à tout le monde, j’ai donc décidé de faire un billet convi-convi [...]”
Il conviendrait de supprimer le “donc” ou d’éviter le participe présent :
“Ne comptant pas tout expliquer 50 fois à tout le monde, j’ai décidé de faire un billet convi-convi [...]”
ou
“Je ne compte pas tout expliquer 50 fois à tout le monde, j’ai donc décidé de faire un billet convi-convi [...]”
Enfin, tu mets une virgule incorrecte dans ce passage
“On ajoute donc à la div, la propriété suivante :”
“Notons que nous ne sommes pas obligés d’appliquer l’arrondissement [...]”
L’utilisation ici du mot arrondissement est un contresens.
“arrondi” serait plus approprié.
Cordialement
JC
Tout ceci est exact néanmoins c’est bien de cette manière dont je voulais écrire. Tu verras régulièrement ce genre de fautes volontaires et autres tournures maladroites dans les autres billets du blog. Par ailleurs il faut savoir que je “dégrade” volontairement mon texte avant sa publication ; ainsi “je veux” se transforme régulièrement en “j’veux”, etc. Il s’agit d’un choix personnel qui n’est peut être pas le plus judicieux mais qui donne un peu “d’originalité” dans cet univers virtuel. Toujours est-il que je suis justement en train de remettre en question un certain nombre de ces choix un peu fantaisistes. Je te remercie pour ce commentaire :nickel: