Ψ : Position horizontale de l'ombre. Le zéro est la position de l'écriture donc il faut un chiffre négatif pour éloigner l'ombre vers la gauche et un chiffre positif pour l’éloigner vers la droite.
Φ : Position verticale de l'ombre. Le zéro est la position de l’écriture donc il faut un chiffre négatif pour éloigner l'ombre vers le haut et un chiffre positif pour l'éloigner vers le bas.
Δ : Degré de flou de l'ombre. Le zéro est le maximum de netteté. L'usage de chiffre négatif est impossible. Plus le chiffre est grand plus l'ombre est floue.
Σ : Couleur de l'ombre. Elle s'écrit en anglais comme pour la couleur de l'écriture. Vous trouverez une liste des couleurs possibles, ici : http://www.yooprint.fr/lexique/wp-content/uploads/2008/09/couleur1.gif Vous pouvez aussi mettre une couleur en hexadécimale comme celle-ci #000000 (noir).
1 : Forme primaire Bon tout d'abord, voyons le code primaire et épuré pour faire un cadre :
Code:
<div style="border: Σ Ξ Γ;"> Message dans le cadre</div>
Σ : Épaisseur des bords Alors il est possible de marquer thin (fin), medium (moyen), thick (gros) pour aller plus vite ou alors de choisir un nombre de pixel. Dans ce cas ci, il faudra écrire Ypx où Y sera le nombre de pixel que vous aurez choisi. Si vous ne marquez rien, la taille sera medium d'office.
Ξ : Style des bords Vous pouvez y inscrire : solid, avec lequel les bords du cadre ne seront que de simples lignes continues. double, le cadre est alors entouré par deux lignes. dashed, le cadre est maintenant entouré d'une ligne discontinues (en tiret). dotted, la ligne qui entourent le cadre est en pointillée. inset, le cadre semble enfoncé dans la page. outset, le cadre semble ressortir de la page. groove, les lignes ont un effet de gravure. ridge, les lignes ont un effet de gravure inversé. none, les lignes ne sont plus visibles.
Γ : Couleur des bords Elle s'écrit en anglais comme pour la couleur de l'écriture. Vous trouverez une liste des couleurs possibles, ici : http://www.yooprint.fr/lexique/wp-content/uploads/2008/09/couleur1.gif Vous pouvez aussi mettre une couleur en hexadécimale comme celle-ci #000000 (noir).
Code:
<div style="border: thick double blue;"> 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
2 : Espacement intérieur C'est une de choses les plus utiles pour donner un aspect agréable à votre cadre en effet. Il permet de décoller les écritures des bords du cadre. Il faut pour cela rajouter un morceau au code :
Code:
<div style="border: thick double blue; padding:Π;"> Message à l’intérieur du tableau</div>
Π : Espacement Il est possible soit de le rajouter en pourcentage, soit en pixel. Si vous le rajouter en pourcentage, ce sera le pourcentage du tableau qui ne sera plus occupé par les écritures autour des bords. Dans ce cas-ci, le code sera X% avec X le pourcentage que vous aurez choisi. Si vous les rajouter en pixel, ce sera le nombre de pixel qui sépareront les bords du tableau des écritures à l'intérieur. Dans ce cas-là, le code sera Ypx où Y sera le nombre de pixel que vous aurez choisi.
Code:
<div style="border: thick double blue; padding:2%;"> 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
3 : Arrondir les angles Ce sympathique ajout, permet d'adoucir ces angles droits et sévère qu'a actuellement votre cadre. Il faut pour cela rajouter un morceau au code :
Code:
<div style="border: thick double blue; border-radius:Θpx"> Message du cadre</div>
Θ : Degré d'adoucissement des angles. Il faut le replacer par un nombre. Si l'on met 0, les angles seront droit et plus le nombre que l'on mettera sera élevé, plus l'angle sera arrondi. /!\ Avec un adoucissement trop puissant des angles, Des mots peuvent se retrouver hors du cadre, augmentez l'espacement intérieur pour palier à ce problème.
Code:
<div style="border: thick double blue; padding:2%; border-radius:50px;"> 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
4 : Définir un hauteur et une longueur Il permettra de fixer hauteur et une longueur donné que votre cadre fera. Il faut pour cela rajouter un morceau au code :
Λ : Longueur du cadre Il est possible soit le remplacer par un pourcentage, auquel cas, le tableau fera tel pourcentage de la page. Dans ce cas-ci, le code sera X% avec X le pourcentage que vous aurez choisi. Ou alors, il peut être remplacer par un longueur en pixel, donnée. Dans ce cas-là, le code sera Ypx où Y sera le nombre de pixel que vous aurez choisi.
Ω : Hauteur du cadre Il faut le replacer par un nombre. Plus celui-ci sera grand, plus votre cadre sera grand. /!\ Si le cadre est trop petit, une partie de votre texte peut se retrouver hors du cadre. Dans ce cas là, rajouter "overflow: auto" à votre code.
/!\ Pour modifier la position du texte, il faudra alors utiliser les balises
Code:
<center></center> ou <right></right> au lieu de ou [right][/right]
Code:
<center><div style="border: thick double blue; padding:2%; border-radius:50px; width:30%; height:140px;"> 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></center>
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
4 : Fond du cadre Alors, celui-ci marche différemment des autres.
A Une couleur comme fond Dans ce cas-ci, il faut rajouter un morceau au code :
Ψ est une couleur. Elle s'écrit en anglais comme pour la couleur de l'écriture. Vous trouverez une liste des couleurs possibles, ici : http://www.yooprint.fr/lexique/wp-content/uploads/2008/09/couleur1.gif Vous pouvez aussi mettre une couleur en hexadécimale comme celle-ci #000000 (noir). /!\ Certaines couleurs de fond peuvent rendre illisible la couleur d'écriture, dans ce cas changer cette dernière avec les balise habituelle.
Code:
<center><div style="border: thick double blue; padding:2%; border-radius:50px; width:30%; height:140px; background-color:yellow;"> 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></center>
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 Une image comme fond Dans ce cas-ci, il faut rajouter un morceau au code :
Ж est une adresse. Il faut le remplacer par l'adresse directe de l'image que vous voulez mettre comme fond. /!\ Certaines images de fond peuvent rendre illisible la couleur d'écriture, dans ce cas changer cette dernière, ou alors, mettez en gras avec les balise habituelle. Attention, avec certaines images, il est très dur de trouver une couleur lisible.
Code:
<center><div style="border: thick double blue; padding:2%; border-radius:50px; width:30%; height:140px; background-image: url('http://webistique.com/media/2011/03/chat-avec-des-pouces-et-lime-a-ongles-150x150.jpg');"> [color=violet][b]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][/color]</div></center>
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 La répétition de l'image /!\ Il faut qu'il y ait obligatoirement, la ligne de code pour l'image, sinon c'est inutile. Il faut, ensuite, rajouter un morceau au code :
Ѡ est un code. Il y a 6 possibilités : repeat, il est le code mis par défaut si vous n'écrivez pas cette ligne. Il répète l'image jusqu'à ce qu'il n'y ait plus d'espace libre dans le cadre. Si besoin est, il coupe les dernières images. repeat-x, il répète l'image sur les cotés jusqu'à ce qu'il n'y ait plus d'espace de libre, si besoin est il coupe la dernière image. Par contre, en bas, s'il reste de l'espace que l'image ne couvre pas, le fond est transparent. repeat-y, il répète l'image vers le bas jusqu'à ce qu'il n'y ait plus d'espace de libre, si besoin est il coupe la dernière image. Par contre, à droite, s'il reste de l'espace que l'image ne couvre pas, le fond est transparent. no-repeat, il ne répète pas l'image, si celle-ci n'est pas assez grande, il y a de l'espace transparent à droite et en bas. space, l'image est répété en bas et sur les cotés mais au lieu de couper la dernière, ils distribueront l'espace transparent entre les images. /!\ si l'image est trop grande par rapport au cadre et qu'une seule puisse entrer, il est possible que ce code ne fonctionne pas. round, cette fois-ci au lieu de distribuer l'espace vide entre les images. Ce sont ces dernières qui sont redimensionnées pour prendre tout l'espace disponible. /!\ si l'image est trop grande par rapport au cadre et qu'une seule puisse entrer, il est possible que ce code ne fonctionne pas.
/!\ Il est possible de remplacer le fond transparent dû aux codes repeat-x, repeat-y, no-repeat et space par une couleur unie en utilisant le code donné à "Une couleur comme fond" (A).
Code:
<center><div style="border: thick double blue; padding:2%; border-radius:50px; width:30%; height:140px; background-image: url('http://webistique.com/media/2011/03/chat-avec-des-pouces-et-lime-a-ongles-150x150.jpg'); background-color:yellow; background-repeat:no-repeat;"> [color=violet][b]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][/color]</div></center>
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
D Position de l'image /!\ Ce code ne marche que si on a modifier "La répétition de l'image" (C) avec repeat-x, repeat-y ou no-repeat. Il faut, ensuite, rajouter un morceau au code :
Ѩ : Placement horizontal (inutile en cas de repeat-x). Il est possible d'y mettre un pourcentage, calculé par rapport au tableau. Dans ce cas-ci, le code sera X% avec X le pourcentage que vous aurez choisi. Ou alors vous pouvez utiliser des raccourcis : left (0%, collé au bord gauche), center (50%, à égal distance des deux bords) ou right (100%, collé au bord droit).
Ѭ : Placement vertical (inutile en cas de repeat-y). Il est possible d'y mettre un pourcentage, calculé par rapport au tableau. Dans ce cas-ci, le code sera X% avec X le pourcentage que vous aurez choisi. Ou alors vous pouvez utiliser des raccourcis : top (0%, collé au bord haut), center (50%, à égal distance des deux bords) ou bottom (100%, collé au bord bas).
Code:
<center><div style="border: thick double blue; padding:2%; border-radius:50px; width:30%; height:140px; background-image: url('http://webistique.com/media/2011/03/chat-avec-des-pouces-et-lime-a-ongles-150x150.jpg'); background-color:yellow; background-repeat:no-repeat; background-position:center center;"> [color=violet][b]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][/color]</div></center>
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
5 : Traiter les cotés différemment A Forme primaire Nous 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 :
(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érieur Là 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 angles Comme avant, il faudra remplacer les "border-radius:Θpx". Cette fois-ci par contre, par :
(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
6 Mettre un titre sur le bord du haut Alors ce code est différent des autres. Tout d'abord, il faut que vous modifier les "div" de votre tableau par des "fieldset". Et ensuite vous rajouter les "legend" qui seront les balises qui encadreront le titre :
Code:
<fieldset style="border: thick double blue;"> <legend>Titre</legend>Message à l’intérieur du tableau</fielset>
Pour modifier le placement de votre titre par contre, il faudra ajouté une partie à "legend"
Code:
<fieldset style="border: thick double blue;"> <legend style="text-align:И;">Titre</legend>Message à l’intérieur du tableau</fielset>
И est soit left (gauche), center (milieu), right (droite) et justify (d'un bout à l'autre).
À part cela, vous pouvez mettre ce que vous voulez entre les deux balises
Miharu Lescodes
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
Mer 13 Mar - 14:20