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?
28 Octobre 2020, 01:30:37


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 4331 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
Erreur de base de données
Merci de réessayer. Si l'erreur se reproduit, merci de signaler cette erreur à un administrateur.
Retour
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.03 secondes avec 21 requêtes.