Forums Webou.net - Hébergement gratuit et sans publicités avec PHP/MySQL

Hébergement Webou.net => Tutoriels => Discussion démarrée; par: Keanjyto le 14 Octobre 2010, 05:58:24



Titre: Différentes méthodes pour faire des bordures en CSS
Posté par: Keanjyto le 14 Octobre 2010, 05:58:24
Salut,

C'est mon premier tutoriel, je vais essayer de faire court et précis! :)

Avertissement : TUTORIEL NON FINI!!
Je le compléterai quand j'aurai le temps, en attendant ce n'est qu'un squelette :-X



Présentation

On cherche souvent à faire des bordures arrondis pour son site, parce que c'est jolie et que ça fait plus pro! :D
Les plus motivés essayent même de coder directement les arrondis eux-même, sans utiliser d'images : uniquement avec du CSS! Tout simplement parce que c'est plus respectueux des standards du W3C et que ça montre une excellente maîtrise du (X)HTML/CSS, qui impose (la plupart du temps :P) le respect de leur compères webmestres! ^^

Cependant, on constate vite qu'une technique qui fonctionne avec un navigateur pose problème avec un autre, puisque chaque navigateur interprète le CSS plus ou moins à sa façon en dépit des standards... Bref, c'est pas la joie... D'où l'idée d'une petite présentation de différentes méthodes d'arrondis afin de vous faire gagner du temps 8)

Pré-requis nécessaires pour comprendre ce tutoriel : une bonne maîtrise du (X)HTML et du CSS. Pourquoi ? Hé bien, je n'expliquerai que le principe des différentes méthodes. Pour chacune d'elles, je vous donnerai un lien vers une page qui montre comment on l'implémente : à vous de comprendre le code. Sur cette page vous verrez les avantages et les inconvénients de la méthode présentée! ;)

C'est parti! ^^

Les méthodes

  • Avec images : sans conteste les méthodes les plus utilisées et les plus faciles. Elles consistent à utiliser des images qui remplaceront les bordures de vos menus. Ces images sont préalablement créées avec un logiciel comme Photoshop ou Gimp. Il existe deux variantes de cette méthode :
    • Qu'avec des images : aucun style CSS autre que les images misent en background pour les div.
      => Page d'illustration : à venir!
    • Hybridation images/CSS : on ne mets des images que dans les coins où l'on veut les arrondis, le reste est en CSS.
      => Page d'illustration : à venir!
  • Sans images :
    • Avec un caractère spécial, celui de la puce : •
      En fait, on se sert de la taille de la puce pour donner un arrondi plus ou moins marqué dans les coins. Une variante possible : on peut mettre une bordure avec une seconde puce par dessus la première et en jouant avec le z-index.
      => Page d'illustration : à venir!
    • A la place de la puce, on peut aussi utiliser l'attribut dotted pour les bordures (avec du CSS donc ;)). Pour bien comprendre, prenez le temps de voir le code. J'ai fait exprès de mettre des noms explicites pour les classes de sorte à ce que ce soit compréhensible ;). Vous ne trouverez pas cette méthode ailleurs sur le Net, vu que je l'avais faite à l'origine pour mon site mais vous comprendrez pourquoi je ne l'utilise pas en voyant les inconvénients..... :-\
      => Page d'illustration : http://mescahiers.webou.net/tutoriels/methode_arrondis.html (http://mescahiers.webou.net/tutoriels/methode_arrondis.html)

Ce classement est subjectif, mais représente relativement bien les différents types de méthodes pour faire les arrondis. Avec de l'imagination, vous pourrez aussi en trouver de nouvelles! ;D

Voilà, c'est tout pour le moment ^^
Chaque retour est bon à prendre, était-ce assez bien expliqué ? Des suggestions d'amélioration d'une des méthodes ? Etc.

Cordialement,
Keanjyto.


Titre: Re: Différentes méthodes pour faire des bordures en CSS
Posté par: G-rom le 15 Octobre 2010, 00:08:58
Bonsoir,
Je me permet d'ajouter à ton édifice ma petite pierre. Une méthode purement CSS. Elle fait partie de CSS3, donc pas forcément encore bien (re)connue. Mais les dernières version de Firefox, Opera, et Safari la reconnaissent (je n'ai pas testé sur des versions antérieures).

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;

Chacun des préfixes est nécessaire pour la bonne interprétations : -moz- pour firefox, -webkit- pour safari, -o- pour Opera.

Créer des coins arrondis - Alsacréation (http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html)

Voila en image sur mes pages ce que ça donne (firefox 3.6)
(http://i20.servimg.com/u/f20/14/00/33/68/coin_a10.png)


Titre: Re: Différentes méthodes pour faire des bordures en CSS
Posté par: Keanjyto le 16 Octobre 2010, 03:06:01
Merci G-rom, bonne initiative :)

Pour le moment tous les attributs autres que border-radius tout court (avec les préfixes -moz- pour Firefox, -webkit- pour safari et en -o- pour Opéra) ne sont pas reconnus comme "CSS valide" par le W3C.

Vivement l'avènement du CSS3 et de l'HTML5 :D


Titre: Re: Différentes méthodes pour faire des bordures en CSS
Posté par: websvi le 09 Novembre 2010, 22:05:19
L'utilisation de -moz-border-radius marche très bien sur Mozilla sans aucun effort avec la balise <p>. seulement il faut trouver la même astuce pour tous les autres navigateurs comme c'est le cas pour opéra et autres.

il suffit alors d'inclure toutes ces formes dans la feuille CSS et ca marchera certainement à tous les coups. je pense qu'il faut œuvrait dans cette voix au lieu de s'acharner avec les images et les div.