Sujet: Rendre votre RP sympa à l'oeil Mer 21 Sep - 19:32
[Ce tutoriel a été rédigé par Maimélia]
Bonjours, bonjours,
c'est encore moi, mais je ne vais pas faire un tuto graphique ce coup ci, mais un tutoriel sur le HTML.
Pour commencer, je fais, personnellement un schémas sur un logiciel graphique. Paint,net plus précisément. je sais comme ca, comment je veux que mon codage ressemblerait. Mais ce coup ci, je n'en aurait pas besoin, étant donné que ca sera pour rendre vos rp plus attractif. C'est toujours mieux de voir un rp différent des autres. Plus agréable à l'œil on va dire. Si vous voulez un exemple, j'ai remarqué qu'un membre sur le forum le faisait, je vais donc me permettre de citer ce membre, enfin son rp:
C'est ce que je vais vous apprendre aujourd'hui. Évidemment, pour éviter tout plagiat sur son code, je vous montrerais mon propre codage, inventé spécialement pour l'occasion.
Pour commencer, évidemment, il faut un rp prêt. Pour ma part, je prendrais celui que j'ai fais avec Neosis. A la fin du tutoriel, mon rp ressemblera à ca:
Spoiler:
voilà à quoi devra ressembler le codage. Pour faire l'encadrement, on va utiliser le Fieldset ( ne me demandez pas ce que ca veut dire, je ne sais pas x') )
Je suppose que vous prenez ca pour du chinois, ne vous en faite pas, je vais décrypter ce charabia.
Border = C'est les contours, la vous remarquerez qu'il y en au 4, quatre pour quatre coté. Prenons du temps pour décrire ces border. Border-top: c'est le dessus, vous remarquerez que le border ne fait qu'un seul pixel. C'est pareil pour le border-bottom.
Border-bottom: c'est la bordure du dessous. Border-left et Right: c'est les bordures gauches et droites.
Le Moz-border-Radius: C'est les arrondis autour du cadre, plus vous augmentez, plus ca sera arrondis. Background-color: c'est la couleur du fond.
Pour le Fieldset, c'est fait, j'espère que j'ai réussi à bien détailler cette partie. Maintenant, venons en au titre et les images l'encadrant.
voilà, vous remarquerez que j'ai mis ca dans un tableau, pourquoi, simplement parce qu'on ne peux pas mettre deux Div cote à cote, sans que le deuxième revienne à la ligne, alors si on veut faire suivre les Div, un tableau est nécessaire.
Maintenant, commençons à décrire les deux div. Vous connaissez le Width et le Height, qui est la largeur et la hauteur. Le border, décrit plus haut, la vous verrez, il n'y en a qu'un, car la, on désire faire une bordure identique dans les cadres coins de l'image. Le moz-border-radius, c'est pareil, je l'ai décrit déjà. Maintenant le background-image: url('http://img42.xooimage.com/files/2/8/3/emma-1461f41.jpg'): et bien, c'est le fond, seulement la ce n'est pas une couleur, mais un lien.
Continuons notre dépouillage. Venons en maintenant au titre:
Code:
<div style="background:darkred;-moz-border-radius-topleft: 12px;-moz-border-radius-topright: 12px; -moz-border-radius-bottomright: 12px; -moz-border-radius-bottomleft: 12px; line-height: 12px; text-shadow: black 3px 3px 2px;"><div style="TEXT-ALIGN: center" align=center><SPAN style="FONT-FAMILY: georgia"><FONT face=Georgia size=6>L'art de se faire chier</FONT></SPAN></div></div>
;-moz-border-radius-topleft: arrondissement sur le dessus à droite moz-border-radius-topright: arrondissement sur le dessus à gauche moz-border-radius-bottomright: arrondissement sur le dessous à gauche moz-border-radius-bottomleft: arrondissement sur le dessous à droite text-shadow: afin que votre texte ait une ombre
Voila, à partir de la vous fermez votre tableau. Vous collez votre texte puis vous fermez le Fieldset
Code:
</fieldset>
voila maintenant, à quoi dois ressemblez votre code une fois fini :