Alors, je ne code pas super bien (j'ai appris principalement sur le tas u__u) Mais vu la demande de certains membres, voici une leçon pour débutant \o/ !
Déjà dites vous qu'un code en générale ce n'est qu'un empilement de boite dans des boites (un peu comme les poupées russes) mais il faut bien les refermer pour le code apparaisse correctement ;)
D'abord une simple boite 100*200 :
TEXTE
- Code:
-
<center><div style="border:2px #375D81 solid; -moz-border-radius: 15px 5px 15px 5px; -webkit-border-radius: 15px 5px 15px 5px; height:100px; width:200px; background-color: #ABC8E2;box-shadow: 2px 2px 4px black;">TEXTE</div></center>
On trouve généralement cette structure :
- Code:
-
<div style="élément1 : effet1 effet2 effet3; élément2 : effet1 effet2 effet3;">CONTENU</div>
Décortiquons le code, afin de mettre en évidence les effets de chaque partie.
En bleu l'élément et en vert les effets rattachés à cet élément.
Vous pouvez donc changer les valeurs en vert pour modifier l'apparence de la boite :)
border: 2px #375D81 solid;- C'est la bordure de la boite :
2px = 2 pixels d'épaisseur.
#375D81 = la couleur.
solid = bordure continue, sinon vous pouvez mettre
dashed pour une bordure en tirés (en anglais "dash" signifie "tiré") ou
dotted pour des pointillés (en anglais "dot" signifie "point").
-moz-border-radius: 10px 10px 10px 10px;-webkit-border-radius: 15px 5px 15px 5px;15px 5px 15px 5px = un arrondi de 15 pixels en haut à gauche et en bas à droite ainsi que de 5 pixels en haut à droite et en bas à gauche. Pourquoi avoir deux fois le même code ? Le premier fait apparaitre les coins arrondis sur mozilla et le deuxième sur Chrome et safari.
height: 100px; = 100 pixels de hauteur.
width: 200px; = 200 pixels de largeur.
background-color: #ABC8E2; = la couleur de fond de la boite. On peut aussi utiliser une image pour le fond, le code sera alors :
background-image: url(https://i.servimg.com/u/f45/12/65/66/22/jj0d8g12.png);box-shadow: 2px 2px 4px black; C'est l'ombre que l'on peut distinguer autour de la boite. Les deux "2px" décalent l'ombre vers le bas et la droite. Des valeurs négatives sont possibles pour les directions inverses, exemple : "-2px -2px 4px". Le "4px" de la fin détermine la porté de l'ombre.
Si vous avez des questions, surtout n'hésitez pas je détaillerais le tuto ;) !