AccueilAccueil  CalendrierCalendrier  FAQFAQ  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Comment marche les codes !

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage

avatar
Milan

Messages : 31
Date d'inscription : 03/07/2014
Age : 19
Localisation : Tokyo, établissement du chef

Informations générales du perso
Double-Compte: Adam & Ren
Rang: Secrétaire
Camp: Neutre

MessageSujet: Comment marche les codes !   Sam 5 Juil - 19:50

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/
http://www.zupimages.net/


Dernière édition par Milan le Dim 17 Aoû - 19:34, édité 18 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur

avatar
Shiro

Messages : 105
Date d'inscription : 18/06/2014
Localisation : Parlement

Informations générales du perso
Double-Compte: Sloane, Jason
Rang: Chef
Camp: Alliés

MessageSujet: Re: Comment marche les codes !   Sam 5 Juil - 19:51

Intéressant et très utile ! happy
Merci de le mettre à notre portée ^V^ C'est difficile parfois de trouver de bon tuto
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://neko-systeme.deviantart.com/

avatar
Milan

Messages : 31
Date d'inscription : 03/07/2014
Age : 19
Localisation : Tokyo, établissement du chef

Informations générales du perso
Double-Compte: Adam & Ren
Rang: Secrétaire
Camp: Neutre

MessageSujet: Re: Comment marche les codes !   Sam 5 Juil - 21:36

Mais deuh rien *^*

Je partage mes connaissances que j'ai appris durant 4 mois  evil 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur

avatar
Sloane

Messages : 50
Date d'inscription : 04/08/2014
Localisation : Partout et nul part

Informations générales du perso
Double-Compte: Shiro, Jason
Rang: Princesse
Camp: Neutre

MessageSujet: Re: Comment marche les codes !   Mer 6 Aoû - 20:40

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>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur

avatar
Adam

Messages : 63
Date d'inscription : 21/06/2014
Localisation : Tokyo

Informations générales du perso
Double-Compte: Milan & Ren
Rang: Chef
Camp: Axes

MessageSujet: Re: Comment marche les codes !   Jeu 7 Aoû - 16:25

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

Mais je te pardonne, parce que je suis so fantastique

~

Revenir en haut Aller en bas
Voir le profil de l'utilisateur

avatar
Sloane

Messages : 50
Date d'inscription : 04/08/2014
Localisation : Partout et nul part

Informations générales du perso
Double-Compte: Shiro, Jason
Rang: Princesse
Camp: Neutre

MessageSujet: Re: Comment marche les codes !   Jeu 7 Aoû - 16:37

Ur so fancy !!

~




« Well, I, I, wanna fly fly
On the wings, wings of summer
But you, you put your eyes
You put your eyes on mine
»
Revenir en haut Aller en bas
Voir le profil de l'utilisateur

avatar
Adam

Messages : 63
Date d'inscription : 21/06/2014
Localisation : Tokyo

Informations générales du perso
Double-Compte: Milan & Ren
Rang: Chef
Camp: Axes

MessageSujet: Re: Comment marche les codes !   Jeu 7 Aoû - 16:38

Yes of course!

~

Revenir en haut Aller en bas
Voir le profil de l'utilisateur


Contenu sponsorisé


MessageSujet: Re: Comment marche les codes !   

Revenir en haut Aller en bas
 
Comment marche les codes !
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Comment marche le MULTI EXP
» [Tuto] Comment marche la PokéBank ?
» Topic des QR Codes de ROSA!
» VIDEOCAP
» [DECK-LIST EDH] : Angry Hermit.

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
La porte de l'outre-monde :: Hors jeu :: Atelier-