AccueilAccueil  Dernières imagesDernières images  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  
-34%
Le deal à ne pas rater :
-34% LG OLED55B3 – TV OLED 4K 55″ 2023 – 100Hz HDR 10+, ...
919 € 1399 €
Voir le deal

Partagez|

Tuto #2 | Les bordures

Voir le sujet précédent Voir le sujet suivant Aller en bas
Andramas
MessageSujet: Tuto #2 | Les bordures Tuto #2 | Les bordures EmptyDim 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
https://kingdom-of-panda.forumactif.org

Tuto #2 | Les bordures

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
Somewhere :: Tutoriels :: Codage-