AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Répondre au sujetPartagez|

Tuto #2 | Les bordures

Voir le sujet précédent Voir le sujet suivant Aller en bas
avatar
Andramas
Admin


Messages : 162
Inscription : 11/11/2014
Age : 19
Compétences : Codage, Graphisme

KRKRKR
Icône:
Citation: TEST TEST TEST
MessageSujet: Tuto #2 | Les bordures Dim 6 Sep - 11:13

Les bordures

Les bordures, on les voit partout et sont presque indispensable pour la construction d'une fiche de RP. Mais comment les fait-on et comment s'en sert-on ?

Si vous avez la moindre question n'hésitez pas.

01. Qu'est-ce qu'une bordure?

Une bordure (qui se dit border en anglais) est une propriété qui définit le style de bordure que nous voulons obtenir. En règle générale elles servent de décoration, mais elles sont aussi là pour séparer des textes ou images. Il existe différents types de bordures dont je parlerais dans un second point. voici un exemple de fiche avec bordure.

Je possède une balise "border" qui me permet d'avoir une bordure de couleur #D0CD98 je suis ici pour décorer et ne pas que la case soit toute blanche.

02. Comment la modifier ?

Après cette rapide ou pas introduction on passe maintenant dans le vif du sujet : comment on modifie cette petite bordure ?

Je suis une case délimité par un cadre "solid"


Code:
<div style="padding: 7px; border: 1px solid #000000;">Lorem ipsum dolor sit amet </div>

Je suis une case délimité par un cadre "dashed"


Code:
<div style="padding: 7px; border: 1px dashed #000000;">Lorem ipsum dolor sit amet</div>


Je suis une case délimité par un cadre "dotted"


Code:
<div style="padding: 7px; border: 1px dotted #000000;">Lorem ipsum dolor sit amet</div>


Je suis une case délimité par un cadre "double"


Code:
<div style="padding: 7px; border: 4px double #000000;">Lorem ipsum dolor sit amet</div>


Je suis une case délimité par un cadre "outset"


Code:
<div style="padding: 7px; border: 1px outset;">Lorem ipsum dolor sit amet</div>



03. Les éléments

Voici une petite liste des différentes bordures qu'il existe :

border-bottom: border en bas.
border-left: border à gauche.
border-right: border à droite.
border-top: border en haut.
border-width: défini la largeur du border.
border-color: défini la couleur du border.
border-radius: arrondi le border.

04. Exemple

Voici ce que l'on peut obtenir lorsque l'on mélange les différents types de bordures :

Lorem ipsum dolor sit amet



Code:
<div style="padding: 7px; border-left: 3px solid #000000; border-top: 3px dashed #000000; border-bottom: 3px double #000000; border-right: 3px dotted #000000;">Lorem ipsum dolor sit amet</div>


Tutoriel par Nemalus, ne pas redistribuer.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://kingdom-of-panda.forumactif.org

Tuto #2 | Les bordures

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

Sujets similaires

-
» Tuto Panda ActiveScan avec Firefox
» Big tuto
» tuto de findykill
» Problème avec le tuto Installer et utiliser plusieurs versions de MapSource
» tuto sur les newsgroups
Page 1 sur 1

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
Somewhere :: Tutoriels :: Codage-
Répondre au sujet