AccueilPortailFAQS'enregistrerConnexion

Partagez | 

 Arrondir les angles

Auteur
MessageSujet: Arrondir les angles   Dim 17 Jan - 1:07

Arrondir les angles

{ Niveau : Facile } { Auteur : Basil Hawkins } { Validation : Basil Hawkins }

Bonjour bonjour ! Smile

Nous allons apprendre aujourd'hui comment arrondir les angles en toute circonstance.
Si vous ne voyez pas de quoi je parle, regardez les exemples ci-dessous:
Spoiler:
 

Vous voyez donc que les angles sont arrondis ; je vais donc vous expliquer comment faire. Tout d'abord, je vais vous décevoir, cela ne marche pas sur IE et il n'y aucun moyen pour que cela marche. (actuellement, je vous rassure)

Voici le code :
Citation :
-moz-border-radius: (un nombre de px)px;
-webkit-border-radius: (un nombre de px)px;

En orange : C'est la petite particule pour que cela marche sur Mozilla Firefox. (d'où le moz)
En bleu : C'est la petite particule pour que cela marche sur d'autres navigateurs. (je ne les connais pas tous, donc je ne pourrais pas les citer)
En vert : La "vraie" partie CSS on va dire ; celle qui indique l'arrondi.

Donc si vous voulez que cela marche avec le plus de personnes possible, à chaque fois vous devrez mettre "-moz" et "-webkit".
Mais pour que ça marche, il faut un code correct ^^'
Donc je vais vous montrer un code et son résultat:

Partie CSS:
Code:
.arrondi {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Partie HTML:
Code:
<span class="arrondi">Test pour mon tutoriel</span>

Résultat:
Test pour mon tutoriel

    ? Mais on ne voit rien du tout !


Bah oui, puisque vu que nous n'avons pas défini de couleur au fond, c'est le même que celui du forum. Donc cela ne se voit pas Razz

Donc on recommence avec une couleur de fond:

CSS:
Code:
.arrondi {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #000000;
}

HTML:
Code:
<span class="arrondi">Test pour mon tutoriel</span>

Résultat:
Test pour mon tutoriel

    ? Mais c'est pas joli, le texte est collé au bord et on n'a pas de bordure ...


Patience, patience. Bah voui, c'est ce qu'on va faire maintenant Smile
Donc hop, une petite bordure rouge en tirets avec un écart des lettres par rapport au bord:

CSS:
Code:
.arrondi {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #000000;
border: 2px dashed #FF0000;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

HTML:
Code:
<span class="arrondi">Test pour mon tutoriel</span>

Résultat:
Test pour mon tutoriel

Bref on s'éloigne on s'éloigne, le but de ce tutoriel n'est pas de vous faire encadrer votre texte mais de maîtriser l'arrondissement des bordures. M'enfin on devait quand même passer par là puisque ça a son effet dessus ^^'

Donc voilà, vous savez tout sur l'arrondissement des bordures (enfin ce que je sais dessus en tout cas).

Je vous rappelle que -moz et -webkit vont par paires, et que cela ne marche malheureusement pas sur IE.

En espérant que ce tutoriel vous ait été utile, Smile
Basil Hawkins.

_________________
Basil Hawkins
© Magic Admin
avatar


Masculin
Messages : 515
Inscrit(e) le : 12/12/2009
Âge : 21
Localisation : En enfer
Emploi/Etudes : Torturer les membres
Humeur : Démoniaque


Voir le profil de l'utilisateur http://rpg-world.forum-actif.net
Revenir en haut Aller en bas
 

Arrondir les angles

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: Codage & Astuces pour ForumActif :: Cours De Codage :: Les Bases-
▲ UpBottom ▼
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit