Partagez | 
 

 Bordures arrondies

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage

Je suis
Stelyne
avatar

Logiciels : Gimp 2 & Photoshop CS5
Féminin Messages : 20
Date d'inscription : 21/01/2011
Age : 19

MessageSujet: Bordures arrondies    Lun 25 Avr - 5:53


Réaliser des bordures arrondies
    Bonjour !
    Vous en avez marre de toujours avoir des fonds rectangles ? Essayer donc d'en faire des arrondies. Smile
    Il y a dans ce tutorial, tous les codes pour faire des bordures arrondies, accompagnés d'explications pour que vous ne soyez pas perdus.

    Rendu


        RENDU
        RENDU


    Apprenons pas à pas. ♪


    Le premier code, le plus long aussi Very Happy

    Mettez ce code dans le CSS ou directement dans une balise :
    Code:
        border-radius-bottomleft:20px;
        border-radius-bottomright:20px;
        border-radius-topleft:20px;
        border-radius-topright:20px;
    Quelques explications
    bottomleft ▬ correspond à en bas, à gauche
    bottomright ▬ correspond à en bas, à droite
    topleft ▬ correspond à en haut, à gauche
    topright ▬ correspond à en haut, à droite
    Au final, c'est de l'anglais hein.

    Vous pouvez modifier :
    0px (soit le rayon de l'arrondissement) ▬ plus le chiffre est grand, plus ce sera rond (pour mes rendus finaux, j'ai utilisé le nombre 20)
    Astuce:
     

    A vous de modifier les valeurs selon ce que vous voulez !


    D'autres codes beaucoup plus courts

    → Il existe un autre code pour faire la même chose, qui prend d'ailleurs moins de place. Il suffit juste de remplacer le premier code par celui-ci :
    Code:
        border-radius: 20px 20px 20px 20px;

    Les chiffres sont dans le même ordre que tout a l'heure ; le premier correspond à en bas, à gauche, le second à en bas, à droite, le troisième à en haut, à gauche & le dernier à en haut, à droite.


    → Et puis, si vous souhaitez que les 4 côtés soient arrondis de la même manière, vous pouvez mettre directement ce code (encore moins long xD) :
    Code:
        border-radius: 20px;


    Warning : Compatibilité

    /!\ Soyez au courant que les codes donnés précédemment ne sont pas compatibles avec Mozilla Firefox, Linux, les nouvelles versions de IE & Google Chrome.
    Si vous souhaitez qu'il marchent sur ces autres navigateurs, il faut placer :

    Pour Mozilla Firefox • Ajoutez -moz- au début des codes donnés précédemment
    Code:
        -moz-border-radius: 20px;

    Pour Linux • Ajoutez -khtml- au début des codes donnés précédemment
    Code:
        -khtml-border-radius:10px

    Pour les nouvelles versions de Internet Explorer & Google Chrome • Ajoutez -webkit- au début des codes donnés précédemment
    Code:
        -webkit-border-radius: 20px;

    Et enfin, vous l'aurez compris ; pour que cet effet arrondi marchent sur le plus de navigateurs possibles, il suffit de tous mettre ces trois codes. ^^
    Code:
        border-radius: 20px;
        -khtml-border-radius:10px
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
Revenir en haut Aller en bas

Je suis
Kinoko
avatar
ADMIN - Photoshop

Logiciels : Photofiltre, Photoshop CS3/CS5, Illustrator et Flash CS3, InDesign CS5
Féminin Messages : 1607
Date d'inscription : 20/08/2010
Age : 26

MessageSujet: Re: Bordures arrondies    Ven 29 Avr - 1:05


Merci Stelyne pour ce tuto !
Revenir en haut Aller en bas
http://tsuki-no-kioku.forumactif.com

Je suis
design4u
avatar
MEMBRE - Photoshop

Logiciels : photoshop cs2 :illustrator cs2
Féminin Messages : 373
Date d'inscription : 29/04/2012

MessageSujet: Re: Bordures arrondies    Mer 23 Mai - 20:42


merci Smile maintenant je vois mieux les choses ^^


mes cadeaux:
 

Revenir en haut Aller en bas

Je suis
Contenu sponsorisé


MessageSujet: Re: Bordures arrondies    


Revenir en haut Aller en bas
 

Bordures arrondies

Voir le sujet précédent Voir le sujet suivant Revenir en haut 

 Sujets similaires

-
» Mettre des bordures arrondies à l'avatar
» Bordures catégories arrondies
» supprimer totalement les bordures d'un tableau
» Bordures pour catégories/widget/forums arrondis
» Coller la Bannière aux bordures du forum
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
foligraph ☁ communauté graphique. :: THREE ☁ la solidarité, c'est bon pour le cœur ... :: codage :: les tutoriels :: html-