Forums Webou.net - Hébergement gratuit et sans publicités avec PHP/MySQL Webou Webou Pro
Recherche avancée  
*
Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.
Avez-vous perdu votre courriel d'activation?
11 Décembre 2017, 14:23:41


Connexion avec identifiant, mot de passe et durée de la session


Pages: [1]   Bas de page
  Imprimer  
Auteur Fil de discussion: Différentes méthodes pour faire des bordures en CSS  (Lu 3063 fois)
0 Membres et 1 Invité sur ce fil de discussion.
Keanjyto
Bavard
***
Hors ligne Hors ligne

Messages: 170


Voir le profil WWW
« le: 14 Octobre 2010, 05:58:24 »

Salut,

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

Avertissement : TUTORIEL NON FINI!!
Je le compléterai quand j'aurai le temps, en attendant ce n'est qu'un squelette Lèvres scellées



Présentation

On cherche souvent à faire des bordures arrondis pour son site, parce que c'est jolie et que ça fait plus pro! Souriant
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 Tire la langue) 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 Cool

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! Clin d'oeil

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 Clin d'oeil). 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 Clin d'oeil. 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..... Indéci
      => Page d'illustration : 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! Grimaçant

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.
« Dernière édition: 14 Octobre 2010, 06:18:51 par Keanjyto » Journalisée
Forums Webou.net - Hébergement gratuit et sans publicités avec PHP/MySQL
« le: 14 Octobre 2010, 05:58:24 »

 Journalisée
G-rom
Nouveau
*
Hors ligne Hors ligne

Messages: 13


Voir le profil
« Répondre #1 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

Voila en image sur mes pages ce que ça donne (firefox 3.6)

Journalisée
Keanjyto
Bavard
***
Hors ligne Hors ligne

Messages: 170


Voir le profil WWW
« Répondre #2 le: 16 Octobre 2010, 03:06:01 »

Merci G-rom, bonne initiative Sourire

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 Souriant
Journalisée
websvi
Nouveau
*
Hors ligne Hors ligne

Messages: 22



Voir le profil
« Répondre #3 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.
Journalisée
Pages: [1]   Haut de page
  Imprimer  
 
Aller à:  

Propulsé par MySQL Propulsé par PHP Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Dilber MC Theme by HarzeM
Page générée en 0.021 secondes avec 21 requêtes.