Comment marche les codes !

Pour ceux qui se demande les questions suivantes :

Comment les autres font pour avoir une décoration autour de leurs texte?
Comment marche les codes ?
Comment changer la fiche?

Eh bien je vais faire un cours 101 pour ceux qui ne savent pas, mais seulement pour changer les images, les couleurs, la grosseur ( bordure, forme de la fiche..) , les contours et les formes de texte ( champs de texte, les ''front'' )

Puisque je suis merveilleuse comme un dieu, je vais les faire étape par étape pour les débutants!

Pour commencer, je vais prendre une fiche que j'ai déjà fait et je vais la modifier

Fiche modèle début:

1- Les dimensions

Sur une fiche de code, ont peut changer la longueur et la grosseur de la fiche, de large en long. Pour le large le code suivant ''width: 350px;'' dont le 350px représente la largueur voulu. Donc modifier, cela donne quelque chose du genre :

Fiche modèle largeur:

Vous pouvez jouer avec autant que vous voulez, l'image sort ou pas, pour mieux recarder. Pour la longueur, le code suivant ''height: auto'' dont le ''auto'' permet que lors de l'écriture, la fiche s'agrandira par rapport au texte automatiquement, aussi non, si vous voulez une longueur précise, vous n'avez qu'à le changer pour un nombre ''x'' de px.

Fiche modèle longueur auto:

2- Les bordures

Les bordures sont le contour de la fiche, donnant un certain style et referme la fiche. Le code suivant ''border-left: 5px dotted'' représente une bordure à gauche de largeur 5px et longueur automatique. Le style de la bordure peut changer en étant pleine ou bien en carrée suivis d'un espace ou même avec une double ligne. Le code suivant ''solid'' fait que la bordure sera pleine, le code ''double'' montre qu'il y aura une double ligne et le code ''dotted'' celui des carrée espace.

Fiche modèle dotted + bordure large:

Fiche modèle double + bordure moyenne:

Fiche modèle solid + petite bordure:

D'ailleurs, vous pouvez aussi en mettre en bas, le code ''border-bottom'' en haut le code ''border-top'' et à droite le code ''border-right''

3- Les champs de texte

Ceci est la chose la plus utile de l'univers, là où l'écriture doit naître. En gros, les champs de texte servent à encadré le texte qui est déjà à l'intérieur de la fiche, la plus part du temps pour mieux le mettre en valeur et qu'il soit plus lisible. Le code suivant

Code:

<div style="background-color: white; -moz-border-radius: 0px 0px 10px 10px; text-aline: justify; padding: 5px;">[center][color=black]TEXTE ICI[/color][/center]</div>

constitue le champ au complet. Pour mieux le comprendre, je vais décortiquer les codes juste pour vous. Le code

Code:

'<div style=

représente le début du champs, le style='' est se qui doit avoir à l'intérieur. Le code ''-moz-border-radius'' est pour que les coin soient rond, l'enlever et les coins seront droit. Le code suivant ''text-aline: justify'' dont le text-aline veux dire comment votre texte sera soit à droite (right) gauche (left) au centre (center) ou égale (justify). Vous pouvez combiner les trois premier au dernier. L'écriture doit être après le code  ''padding: 5px;">''. Puisque se n'est rien de bien compliquer, passons les exemples, aussi non, vous pouvez me contacter pas MP si vous avez besoin d'aide pour cette étape.

4- Style d'écriture

Les styles d'écriture dont le code est ''style="font-family:'' ou tout simplement front sont ceux ou la sorte d'écriture changera en fonction de se que vous écrivez. Arial, Time New Roman, Impact, Comic Sans MS, Georgia, se sont tous des front. Vous trouvez se code lors d'un début de texte quelque part dans le code ou bien vous pouvez le mettre vous même avec la les barres de défaut en haut qui sont la police. Vous n'avez qu'à surligner se que vous voulez changer de style d'écriture et s'est fait. La taille du texte peu changer aussi, mais il faut le faire manuellement avec le code size= d'où vous écrivez le chiffre voulu après le = . Il y a aussi de mettre le texte en gras (b entre crochets et un autre b mais une / avant dans les crochets) , italique ( même que b sauf remplacer par i ) ou souligner ( même que i sauf remplacer par u ).

5- Les couleurs

C'est la chose la plus dure au monde ! Il faut toujours trouver ou changer les couleurs et tout. Dans les codes, la couleur doit toujours être écrite en anglais et sans faute, aussi non, la couleur n’apparaîtra pas. Vous pouvez aussi utiliser les code de couleur si vous chercher des dégradés précis. Dans les couleurs en anglais, vous pouvez décider de mettre la couleur plutôt pâle de certaine couleur, le code suivant ''light'' et la couleur collé dessus sera plus pâle, comme lightblue ou lightgrey. Pour une couleur plus foncé, le code ''dark'' et la couleur collé ensuite et c'est une couleur plus foncé que l'originale!

Fiche modèle normal bleu:

Fiche modèle Dark:

Fiche modèle light:

Dans les exemple ci-dessous, j'ai changer le background, qui est la première chose de ma fiche, le code suivant ''background: blue'' d'où le background montre le fond de la fiche en premier. Vous pouvez aussi changer la couleur des bordures si vous en avez. Le code suivant ''border-left: 5px dotted darkred;border-right: 5px dotted darkred;border-top: 5px dotted darkred;border-bottom: 5px dotted darkred''d'où darkred est la couleur de la bordure, vous pouvez la changer à volonté par des code de couleur telle que #33ff00 et autre pour des couleur plus précise ( lien du site pour : Code de couleur)

Fiche modèle couleur bordure:

Ensuite, la couleur du champ de texte peut aussi changer. Le code suivant ''background-color:'' près du champ de texte fera en sorte que lorsque vous mettrez une couleur quelconque, le champ la prendra.

Fiche modèle couleur champ vert:

Fiche modèle couleur champ orange:

De plus, certaine fiche possède un espace de couleur au début, comme pour le titre. Le code suivant ''background-color:'' sera suivis du style d'écriture ou près.

Fiche modèle couleur background Titre rose:

Pour finir et conclure l'étape des couleurs, il reste la couleur de l'écriture et des shadow. Les ''shadow''sont l'ombre crée sur la fiche ou pour le texte, pour se faire, trouver le code près de soit le début de la fiche pour le tour du background ou bien des titres.

Fiche modèle couleur Shadow titre blanc:

Enfin, vient le tour de l'écriture, cela dépend des fiches, vous pouvez toujours le faire à la main en surlignant le texte voulu de la couleur ou bien d'essayer de le trouver. Ici, le code suivant ''color: black'' toute suite après le style d'écriture peut changer la couleur du titre.

Fiche modèle couleur titre vert:

N'oublier pas que certaine fiche utilise des images comme background, donc vous ne pouvez pas changer les couleurs de fond.

6- Les images

Les images ne sont là que pour embellir une fiche, mais s'est un élément toute même cruciale tape-à-l'oeil. Pour tout dire, les images ne sont pas compliqué à trouver, sauf qu'elles changent d'endroit selon comment la fiche est faite. Normalement elle se retrouvera en premier. Les codes suivant

Code:

''url'' ''[img]'' ''url('''')'' ''background-image:''

sont tous des codes qu'à la suite, il y a une image. Pour faire simple, si vous voyez les trucs suivant :

Code:

http://img11.hostingpics.net/pics/593176garconsmangaepeebig.jpg

Code:

 ou  <img src="http://img4.hostingpics.net/pics/296513morphobleu3.jpg">

Ou autre, enlever simplement le début de http et la fin jpg ou quelque chose comme sa et remplacer le par votre image que vous aurez convertis dans un convertisseur d'images.

Image talk to the hand:

Si vous n'avez pas de convertisseur d'images, je vous en propose deux, cliquer dessus.
http://www.hostingpics.net/
https://www.zupimages.net/

Intéressant et très utile !
Merci de le mettre à notre portée ^V^ C'est difficile parfois de trouver de bon tuto

Mais deuh rien *^*

Je partage mes connaissances que j'ai appris durant 4 mois   

Aussi les gens il est peut-être plus facile de commencer le code avec une base !
Je vous conseille donc ce code (celui de ma fiche) que vous pourrez modifier !

Code:

<div style="width: 350px;background-image: url('http://dc611.4shared.com/img/76ltKZgJ/s7/137d1954610/HD_texture_Blue.jpg'); border-left: 5px dotted white;border-right: 5px dotted white;border-top: 2px solid white;border-bottom: 2px solid white ;border-radius: 0px 0px 0px 0px;margin: 20px auto;padding: 10px;"><DIV style="BACKGROUND-COLOR: black;border-left: 2px solid white;border-right:2px solid white;border-top:2px solid white;border-bottom:2px; -moz-"><span style="font-family:times new roman ;text-align: left;color: white;letter-spacing: 5px;font-size: 22px;text-shadow:#0033ff 0px 0px 20px;padding-center: 10px;"><br><div style="margin:auto;text-align:center;width:100%">
[img]http://i39.servimg.com/u/f39/18/91/58/22/griffi10.jpg[/img]

Titre du RP

[size=10]♣ ♣ ♣ ♣ ♣ ♣[/size]
</div><br> </span></DIV><DIV style="BACKGROUND-COLOR: black;border-left: 2px solid white;border-right:2px solid white;border-top:;border-bottom:2px solid white; -moz-border-radius: 0px 0px 0px 0px; TEXT-ALIGN: justify; padding: 10px;">[font=Times new roman][size=13][color=white] [/color][/size][/font]
</div><div style="width: auto; height: 20px; margin-right: -250px; font-size: 20px; color: #453325; font-family: Things we said; margin-top: -10px;"></div><br></div></center>

Tu m'as volé mon idée! J'allais le faire bientôt TTwTT

Mais je te pardonne, parce que je suis so fantastique

Ur so fancy !!

Yes of course!