Accueil1
CSS : Coins arrondis partout sous FF, GC et Safari (phpbb3) 24/5/2009, 00:31
Zeco
Administrateur absent
| Ce tutoriel a été publié par ze_chaofan sur SOS-Forum. Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum. |
Hello everybody !
Voici une petite astuce très simple permettant à partir d'un tout petit code de rien rien du tout, d'offrir sous Firefox, Google Chrome et Safari des coins arrondis gérant automatiquement les couleurs (plus besoin donc de passer par une couleur de fond, et les bordures arrondies sont gérées. Sous les autres navigateurs, les coins restent... droits, tout simplement, mais avec les mêmes attributs.
Allez donc dans votre CSS, et collez-y ceci :
#wrap {
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
padding: 10px;
}
.forabg, .forumbg {
border: none;
}
div, table {
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border: none;
}
Pour les éventuelles modifications :
La valeur en rouge correspond à l'arrondissement du cadre du forum, plus important (en taille) que les autres (vu que le cadre est plus grand, bien oui). Augmentez la valeur pour augmenter l'arrondissement, ou mettez zéro pour ne pas faire d'angle.
La valeur en orange correspond elle au décalage du contenu par rapport au bords du cadre, faites la varier en fonction de la valeur en rouge.
La partie en bleu est une petite correction à mettre si vous n'attribuez pas de couleur au cadre des tables. Si vous attribuez une couleur à ce cadre, supprimez la partie en bleu.
Enfin, la valeur en vert correspond à l'arrondissement de tous les angles.
> Pour un meilleur rendu, retirez dans la gestion des images, les images de coins arrondis.
Et voilà, un petit tuto pratique.
Ah, et enfin pour la petite histoire dont tout le monde se fiche, le tuto m'a fait bang dnas l'esprit quand j'ai lu ce message de final-blond, le truc m'était complètement sorti de la tête. Dites lui donc merci ^^
Aussi, merci beaucoup à darkspectre pour la partie du code permettant de le rendre efficace sous Safari !
Dernière édition par ze_chaofan le 28/3/2010, 16:10, édité 1 fois