6 : Traiter les cotés différemmentA Forme primaireNous allons apprendre à donner une couleur, un effet et/ou une épaisseur différente à chaque cotés. Pour cela. Au lieu de marquer
border: Σ Ξ Γ; il faudra écrire cela :
- Code:
-
<div style="border-top: Σ Ξ Γ; border-right: Σ Ξ Γ; border-bottom: Σ Ξ Γ; border-left: Σ Ξ Γ;"> Message dans le cadre</div>
(Si vous ne savez pas ce que sont Σ Ξ et Γ, référez-vous à "1 : Forme primaire".)
Vous l'aurez peut-être compris mais :
border-top concerne la bordure du haut,
border-right concerne la bordure de droite,
border-bottom concerne la bordure du bas
et
border-left concerne la bordure de gauche.
Vous pouvez maintenant écrire différents Σ Ξ et Γ pour chacun.
- Code:
-
<div style="border-top: 10px double blue; border-right: none; border-bottom: thin inset violet; border-left: thick outset #884695;"> Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
B Espacement intérieurLà aussi, il faudra remplacer "padding:Π". Il faudra e remplacer par :
- Code:
-
<div style="border: thick double blue; padding-top:Π; padding-right:Π; padding-bottom:Π; padding-left:Π;"> Message à l’intérieur du tableau</div>
(Si vous ne savez pas ce qu'est Π, référez-vous à "2 : Espacement intérieur".)
Vous l'aurez compris :
padding-top concerne la bordure du haut,
padding-right concerne la bordure de droite,
padding-bottom concerne la bordure du bas
et
padding-left concerne la bordure de gauche.
Vous pouvez maintenant écrire un Π différent pour chacun.
- Code:
-
<div style="border-top: 10px double blue; border-right: none; border-bottom: thin inset violet; border-left: thick outset #884695; padding-top:10px; padding-right:5%; padding-bottom:50px; padding-left:5%;"> Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
C Arrondir les anglesComme avant, il faudra remplacer les "border-radius:Θpx". Cette fois-ci par contre, par :
- Code:
-
<div style="border: thick double blue; border-top-left-radius:Θpx; border-bottom-left-radius:Θpx; border-top-right-radius:Θpx; border-bottom-right-radius:Θpx;"> Message du cadre</div>
(Si vous ne savez pas ce qu'est Θ, référez-vous à "3 : Arrondir les angles".)
Vous l'aurez compris :
border-top-left-radius est l'angle haut-gauche
border-bottom-left-radius est l'angle bas-gauche
border-top-right-radius est l'angle haut-droit
et
border-bottom-right-radius est l'angle bas-droit
Vous pouvez alors leur mettre un Θ à chacun.
- Code:
-
<div style="border-top: 10px double blue; border-right: none; border-bottom: thin inset violet; border-left: thick outset #884695; padding-top:10px; padding-right:5%; padding-bottom:50px; padding-left:5%; border-top-left-radius:0px; border-bottom-left-radius:100px; border-top-right-radius:20px; border-bottom-right-radius:200px;"> Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla