Partage
  • Partager sur Facebook
  • Partager sur Twitter

Bordures aux coins arrondis

    8 décembre 2005 à 17:30:42

    Bonjour a tous!!
    Voila, en fait j'aimerais savoir, comment faire pour avoir des bordures arrondies, comme sur ce site:
    <lien url="http://www.n-c-team.com/"></lien>
    Ca serait sympa de me donné le code en entier.

    Merci d'avance

    Cordialement Faror
    • Partager sur Facebook
    • Partager sur Twitter
      8 décembre 2005 à 17:36:22

      • Partager sur Facebook
      • Partager sur Twitter
      Webmaster passionnée par mon métier mais aussi par les personnes qui m'entourent, l'art, le design, la nature, l'architecture, la lecture et toutes les beautés de la vie ;-)
        8 décembre 2005 à 17:36:41

        Salut,

        Voici un très bon récapitulatif qui devrait te donner de bonnes pistes :
        http://articles.e-t172.net/round/

        Bonne lecture ;)

        PS : @san1981 > le lien que tu donnes n'a malheureusement plus de contenu (le tuto est à présent dans le livre). Par contre tu as l'ancienne version du tuto ici :
        http://www.alsacreations.com/articles/cadre/#deux
        • Partager sur Facebook
        • Partager sur Twitter
        Anonyme
          8 décembre 2005 à 18:30:43

          Bah tu met une div en haut avec une image où t'aura toi meme dessiné les bordures arrondies, pareil en bas
          • Partager sur Facebook
          • Partager sur Twitter
            8 décembre 2005 à 21:50:21

            Moi j'utilise :

            Secret (cliquez pour afficher)
            -moz-border-radius: 15px;


            Cela marche pour tout les bords de ton cadre, biensûr tu peux changer le 15px, mais je pense que c'est une bonne valeur.

            W3C ne reconnais pas cette balise pour l'instant mais on m'a dit que ce la viendrais.
            • Partager sur Facebook
            • Partager sur Twitter
              8 décembre 2005 à 22:14:59

              Dans le CSS 3 oui, elle sera reconnue ;)
              Mais pour l'instant c'est une balise "à la propriété" de mozilla ;)
              • Partager sur Facebook
              • Partager sur Twitter
              Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal
                9 décembre 2005 à 1:31:47

                Que nous affiche un autre navigateur si on mets cette balise CSS3? (navigateur autre que FF bien sur...)
                • Partager sur Facebook
                • Partager sur Twitter
                  9 décembre 2005 à 7:15:15

                  Salut.
                  je te propose une solution tout css qui fonctionne avec tous les navigateurs.
                  les bords sont arrondis grace a la difference de couleur des backgroud et pas des bordures alors si ca peut te convenir c'est .
                  la
                  • Partager sur Facebook
                  • Partager sur Twitter
                    9 décembre 2005 à 10:09:58

                    Citation : bacardi55

                    Que nous affiche un autre navigateur si on mets cette balise CSS3? (navigateur autre que FF bien sur...)


                    Et ben sur Firefox tu auras un beau cadre arrondi ! Mais sur les autres navigateurs comme IE tu auras un cadre carré avec une bordure autour ... c'est tout ;)
                    • Partager sur Facebook
                    • Partager sur Twitter
                    Rikudo.fr Jeu de Rikudo gratuit et en ligne - Rikudo-puzzle.com (EN) - Rikudo.pl (PL) Tutoriel : La sémantique HTML / Un menu horizontal
                      9 décembre 2005 à 10:58:04

                      Citation : neoxx78

                      Dans le CSS 3 oui, elle sera reconnue ;)
                      Mais pour l'instant c'est une balise "à la propriété" de mozilla ;)

                      En fait, elle est déjà valide en CSS 2.1 ... mais le validateur du W3C n'est encore qu'en CSS 2.0
                      • Partager sur Facebook
                      • Partager sur Twitter
                        9 décembre 2005 à 11:53:10

                        Merci beaucoup a tous!!Je vais voir tout ca tout a l'heure!!

                        PS:C'est du Hors Sujet, mais, j'ai une annonce a passé, je la passe sur quelle partie du forum??
                        • Partager sur Facebook
                        • Partager sur Twitter
                          9 décembre 2005 à 15:06:03

                          Citation : Plume Séraphique

                          Moi j'utilise :

                          moz-border-radius: 15px;
                          Cela marche pour tout les bords de ton cadre, biensûr tu peux changer le 15px, mais je pense que c'est une bonne valeur.



                          Donc pour l utilisé je dois juste mettre dans mon CSS:
                          moz-border-radius: nbpixexls; ??

                          En fait ça me parrait étrange le moz devant border-radius ... donc faut il le mettre? Car Si le visiteur de mon site n'a pas FF j aimerais bien qu'il voit quand même les cadres... Meme si ils ne seront pas arrondis :-°
                          • Partager sur Facebook
                          • Partager sur Twitter
                            9 décembre 2005 à 15:10:08

                            Oui oui, dans ton css, fais ceci :

                            tag {
                             -moz-border-radius : x px;
                            }


                            Le visiteur avec mozilla verra de beaux cadres qui lui rappelleont à quel point il est génial parce qu'il a pris un bon navigateur. :p (humour, on ne troll pas ^^ )
                            L'autre n'y verra que du feu.

                            Bien sûr il faut que le background-color de <tag> soit différent du background-color du bloc dans lequel il se trouve pour voir les bords arrondis ;) .

                            ++
                            aimak
                            • Partager sur Facebook
                            • Partager sur Twitter
                              9 décembre 2005 à 17:14:33

                              le -moz-border-radius ne marche que sur les moteurs mozilla.
                              je vous donne une methode qui fonctionne sur tous les navigateurs et vous polemiquez encore autour de moz-border?
                              • Partager sur Facebook
                              • Partager sur Twitter
                                9 décembre 2005 à 17:45:58

                                faites des bordures images ! en plus ça évite la pixellisation quand c'est bien fait !
                                • Partager sur Facebook
                                • Partager sur Twitter
                                  9 décembre 2005 à 19:32:05

                                  bonjour,
                                  Pour ton lien donné en exemple, les bordures sont des images. Et la technique d'alsa ou lien donné par raphael sont approprié a l'idée du forum, pas de tableau ni de balise inutile.

                                  Quand a la technique que jp949 propose est aussi propose ici :
                                  http://www.cssplay.co.uk/boxes/curves.html
                                  et ses variantes ameliorées
                                  http://www.cssplay.co.uk/boxes/snazzy.html
                                  et variantes de formes ici :
                                  http://www.cssplay.co.uk/boxes/krazy.html

                                  il y a aussi les nifty corners (mais un copyright pas clair et un fichier js en option pour automatiser le creation des coins arrondis).
                                  (quand a moi, j'ai la divite :) j'utilise des div ermpilé du'un px de haut avec des marges differentes lol, je m'y perd dans ces <b> imbriqué).

                                  En bref, si tes bloc ont des largeurs (ou hauteurs)fixes, le plus simple est d'utiliser des images en fond, les liens t'ont deja etait donnés.
                                  Si les arrondis doivent etre repeté sur plusieurs page et/ou endroit de la page, c'est encore l'option "images" la plus facile a gerer.

                                  A plus
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                  | Mes bout de codes HTML/CSS sur Codepen : /gcyrillus | /gc-nomade | Un_tuto:1 menu HTML/CSS3 et variantes |
                                    10 décembre 2005 à 14:26:56

                                    Donc, j'ai essayé et le resultat, est mediocre...Je ne sais pas quoi faire.Voila ce que ca me donne:

                                    Mon site

                                    Voici le codes XHTML:
                                    <div id="corps">

                                    <div id="cadre">
                                            <div id="hautdroit"></div><div id="hautgauche"></div>
                                            <div id="contenu">
                                                    <p class="block"><img src="CSS/Images/4_Hokage.jpg" class="yondaime" alt="Yondaime"/>
                                              Bienvenue sur Naruto Fun!<br/>
                                              Tu es un fan de Naruto?Alors sur ce site, tu pourras
                                              t'eclater, sur ton manga préféré!<br/>
                                              <p class="dessous">Faror</p><br/>
                                            </div>
                                            <div id="basdroit"></div><div id="basgauche"></div>
                                    </div>

                                    </div>



                                    body
                                    {
                                     width: 760px;
                                     margin: auto; /* Pour centrer notre page */
                                     margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */
                                     margin-bottom:20px;/* Idem pour le bas du navigateur */
                                     margin-left:150px;
                                     background:url("../CSS/Modele du site/fond2.jpg") center;
                                     font: 1em black verdana, sans-serif;
                                     background-color: red;
                                    }

                                    #cadre
                                    {
                                    /* taille du cadre, à titre d'exemple */
                                    width: 15em;
                                    background-color: #909090;
                                    }
                                    /* propriétés communes à l'ensemble des 4 coins */
                                    #hautgauche, #hautdroit, #basgauche, #basdroit
                                    {

                                    height: 19px; width: 19px;
                                    background-repeat: no-repeat;
                                    font-size:1px; /* correction d'un bug IE */
                                    }
                                    /* propriétés spécifiques à chaque coin */
                                    #hautgauche
                                    {

                                    background: url("../CSS/Modele du site/hautgauche.gif");
                                    }
                                    #hautdroit
                                    {

                                    float: right;
                                    background: url("../CSS/Modele du site/hautdroit.gif");
                                    }
                                    #basgauche
                                    {

                                    background: url("../CSS/Modele du site/basgauche.gif");
                                    }
                                    #basdroit
                                    {

                                    float: right;
                                    background: url("../CSS/Modele du site/basdroit.gif");
                                    }
                                    #contenu p
                                    {
                                    color: white;
                                    margin: 0.5em; /*gestion des espaces interparagraphes */
                                    }
                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      10 décembre 2005 à 14:36:49

                                      tu as oublié de fermer un <p>
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        10 décembre 2005 à 14:44:26

                                        Ouai c'est vrais, mais ca a rien changé!!

                                        Mais, est ce que vous pouvez me donner les bons codes, pour regler le probleme svp??
                                        C'est bon, j'ai trouvé, mais maintenant, mon probleme, c'est qu'il est sur la gauche, et je ne me souviens pas de la balise, qui me permet de le center.Je dois mettre quoi deja pour le centrer dans le css??
                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          13 décembre 2005 à 13:24:29

                                          C'est bon, j'ai réussis a tout réglé, mais maintenant, j'ai 2 autres problemes.
                                          Regardez mon site:
                                          Mon site
                                          Premier probleme:
                                          Donc, comment ca se fait, que dans le cadre c'est ecrit en blanc?(je vous mettrais mon code CSS plus bas)

                                          Deuxieme probleme:

                                          -Premierement, je voudrais, que les coins arrondies en gris, aient le meme fond, que le reste du cadre:comment je dois faire?

                                          -Deuxiement, comment je fais pour que les coins blancs, aient le meme fond que le corps du site??

                                          Voila

                                          Code CSS:
                                          body
                                          {
                                           width: 760px;
                                           margin: auto; /* Pour centrer notre page */
                                           margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */
                                           margin-bottom:20px;/* Idem pour le bas du navigateur */
                                           margin-left:150px;
                                           background:url("../CSS/Modele du site/fond2.jpg") center;
                                           font: 1em black verdana, sans-serif;
                                           background-color:red;
                                          }
                                          /*---------------------------------------------------------------------------------------------------------------------------*/
                                          a
                                          {
                                           color:red;
                                          }

                                          /*Au passage de la sourie*/
                                          a:hover
                                          {
                                           color:rgb(49,196,163);
                                           font-size:large;
                                          }

                                          /*
                                          Pour les liens deja visités
                                          */

                                          a:visited
                                          {
                                           color:orange;
                                          }
                                          /*---------------------------------------------------------------------------------------------------------------------------*/
                                          p       
                                          {
                                           font-size:medium;
                                           font-family:"Times New Roman","Comic Sans MS",Arial,"Arial Black",serif;
                                           text-align:justify;
                                           width:50%;
                                           padding:12px;/*La marge interieur,entre la bordure,et entre le texte*/
                                           margin:0px;/*La marge extérieur,entre les paragraphes*/
                                           margin: auto;/*Pour centrer les paragraphes au centre.Attention!il faut d'abord avoir utilisé "width" */
                                           overflow:auto;

                                          }

                                          /*---------------------------------------------------------------------------------------------------------------------------*/
                                          #en_tete
                                          {

                                             width: 1000px;
                                             height:300px;
                                             background-image: url("../CSS/Modele du site/naruto banniere.gif");
                                             background-repeat: no-repeat;
                                             margin-bottom: 10px;
                                          }

                                          /*---------------------------------------------------------------------------------------------------------------------------*/

                                          #corps
                                          {

                                            background:url("../CSS/Modele du site/corps3.jpg");
                                            width: 690px;
                                            height:1000px;
                                            margin-left: 220px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
                                            margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
                                            padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
                                          }

                                          /*---------------------------------------------------------------------------------------------------------------------------*/

                                          #menu
                                          {

                                            float: left; /* Le menu flottera à gauche */
                                            width: 206px; /* Très important : donner une taille au menu */
                                            background:url("../CSS/Modele du site/menu.jpg") repeat-x;
                                            margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
                                            margin-right:100px;
                                           
                                          }

                                          /*---------------------------------------------------------------------------------------------------------------------------*/
                                          /* Tout ce qui concerne les cadres arrondis */

                                          #cadre
                                          {
                                          /* taille du cadre, à titre d'exemple */
                                          width: 30em;
                                          background:url("../CSS/Modele du site/fond.jpg");
                                          margin-left:100px;
                                          margin-top:50px;
                                          }
                                          /* propriétés communes à l'ensemble des 4 coins */
                                          #hautgauche, #hautdroit, #basgauche, #basdroit
                                          {

                                          height: 19px;
                                          width: 19px;
                                          background-repeat: no-repeat;
                                          font-size:1px; /* correction d'un bug IE */
                                          }
                                          /* propriétés spécifiques à chaque coin */
                                          #hautgauche
                                          {

                                          background: url("../CSS/Modele du site/hautgauche.gif");
                                          }
                                          #hautdroit
                                          {

                                          float: right;
                                          background: url("../CSS/Modele du site/hautdroit.gif");
                                          }
                                          #basgauche
                                          {

                                          background: url("../CSS/Modele du site/basgauche.gif");
                                          }
                                          #basdroit
                                          {

                                          float: right;
                                          background: url("../CSS/Modele du site/basdroit.gif");
                                          }
                                          #contenu p
                                          {
                                          color: white;
                                          margin: 0.5em; /*gestion des espaces interparagraphes */
                                          }
                                          /*---------------------------------------------------------------------------------------------------------------------------*/


                                          Merci d'avance!! :D
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            13 décembre 2005 à 14:49:57

                                            bonjour,

                                            pour que tes parties blanches de tes coins deviennent transparente il faut que tu le fasse par le biais de ton logiciel de dessin et que tu applique le blanc comme la couleur transparente de ton "gif".
                                            mais tu ne pourras choisir qu'une seule couleur transparente.
                                            tu peut aussi reprendre la couleur dominante du fond de page pour remplacer le blanc, et mettre ton gris en transparent. ou remplacer blanc et gris par les 2 couleurs dominante de tes 2 fond, refaire tes images d'arrondis, etc .. a toi de choisir ce qui te convient le mieux.

                                            pour la couleur blanche de tes paragraphes, c'est indiqué dans le css tout simplement:
                                            extrait:
                                            #contenu p
                                            {
                                            color: white;/* ici! color donne la couleur du texte, et white = blanc */
                                            margin: 0.5em; /*gestion des espaces interparagraphes */
                                            }


                                            a plus
                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                            | Mes bout de codes HTML/CSS sur Codepen : /gcyrillus | /gc-nomade | Un_tuto:1 menu HTML/CSS3 et variantes |

                                            Bordures aux coins arrondis

                                            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                            • Editeur
                                            • Markdown