Theoc Area
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.



 
AccueilRechercherDernières imagesS'enregistrerConnexion
Le Deal du moment : -29%
PC portable – MEDION 15,6″ FHD Intel i7 ...
Voir le deal
499.99 €

 

 Rendre votre RP sympa à l'oeil

Aller en bas 
2 participants
AuteurMessage
Invité
Invité




Rendre votre RP sympa à l'oeil Empty
MessageSujet: Rendre votre RP sympa à l'oeil   Rendre votre RP sympa à l'oeil Icon_minitime1Mer 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:

https://theoc-area.forumgratuit.org/t291-solitude-et-respiration-pv-lucia

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') )

Code:
<fieldset style="border-left: 9px solid darkred; border-top: 1px solid darkred;border-bottom: 1px solid darkred; border-right: 9px solid darkred; padding: 25px; -moz-border-radius: 10px; background-color: grey;">

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.

Code:
<center><table><tr><td><div style="width: 70px; height: 70px;border: 5px solid darkred; -moz-border-radius: 10px; background-image: url('http://img42.xooimage.com/files/2/8/3/emma-1461f41.jpg');"></div></td><td>
<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></td><td><div style="width: 70px; height: 70px;border: 5px solid darkred; -moz-border-radius: 10px; background-image: url('http://img42.xooimage.com/files/2/8/3/emma-1461f41.jpg');"></div></td></tr></table></center>

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 :

Code:
<fieldset style="border-left: 9px solid darkred; border-top: 1px solid darkred;border-bottom: 1px solid darkred; border-right: 9px solid darkred; padding: 25px; -moz-border-radius: 10px; background-color: grey;">[justify]</blockquote>
<center><table><tr><td><div style="width: 70px; height: 70px;border: 5px solid darkred; -moz-border-radius: 10px; background-image: url('lien image');"></div></td><td>
<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>Votre titre</FONT></SPAN></div></div></td><td><div style="width: 70px; height: 70px;border: 5px solid darkred; -moz-border-radius: 10px; background-image: url('lien image');"></div></td></tr></table></center>

Votre texte
 </blockquote> [/justify] </fieldset>


Dernière édition par Maïmélia Howgland le Ven 23 Sep - 1:14, édité 1 fois
Revenir en haut Aller en bas
FALSIFY

FALSIFY


Messages : 2029
Date d'inscription : 25/05/2011
Localisation : Nulle part

Carte d'identité
<font color='#B5AA96'><strong>Palier</strong></font> Palier:
Rendre votre RP sympa à l'oeil 1158/8Rendre votre RP sympa à l'oeil 416  (8/8)
<font color='#C4B8A2'><strong>Prime-Mérite</strong></font> Prime-Mérite: 0
Jobcard(s): Aucun & aucun

Rendre votre RP sympa à l'oeil Empty
MessageSujet: Re: Rendre votre RP sympa à l'oeil   Rendre votre RP sympa à l'oeil Icon_minitime1Mer 21 Sep - 21:18

Tutoriel complet, bien qu'assez complexe en apparence pour les débutants dans le domaine :3
+150 penas
Revenir en haut Aller en bas
Rayne Whitefeather
Expérience
Expérience
Rayne Whitefeather


Messages : 562
Date d'inscription : 28/08/2011
Age : 74
Localisation : Ici ♥

Carte d'identité
<font color='#B5AA96'><strong>Palier</strong></font> Palier:
Rendre votre RP sympa à l'oeil 1157/8Rendre votre RP sympa à l'oeil 416  (7/8)
<font color='#C4B8A2'><strong>Prime-Mérite</strong></font> Prime-Mérite:
Jobcard(s): Aucun & aucun

Rendre votre RP sympa à l'oeil Empty
MessageSujet: Re: Rendre votre RP sympa à l'oeil   Rendre votre RP sympa à l'oeil Icon_minitime1Dim 10 Juin - 19:40

    Note:

    Depuis la MaJ de Firefox, le code suivant n'est plus valide:

    Code:
    <fieldset style="border-left: 9px solid darkred; border-top: 1px solid darkred;border-bottom: 1px solid darkred; border-right: 9px solid darkred; padding: 25px; -moz-border-radius: 10px; background-color: grey;">

    Remplacer par:

    Code:
    <fieldset style="border-left: 9px solid darkred; border-top: 1px solid darkred;border-bottom: 1px solid darkred; border-right: 9px solid darkred; padding: 25px; border-radius: 10px; background-color: grey;">

    Pour ceux qui s'y connaissent, c'est la valeur de -moz-border-radius qui est invalide. Il faut remplacer par simplement border-radius!

    Pour ceux qui ne s'y connaissent pas, tout ce que ça fait, c'est des jolis coins arrondis ♥
Revenir en haut Aller en bas
http://lost-world-rpg.forumgratuit.be
Contenu sponsorisé





Rendre votre RP sympa à l'oeil Empty
MessageSujet: Re: Rendre votre RP sympa à l'oeil   Rendre votre RP sympa à l'oeil Icon_minitime1

Revenir en haut Aller en bas
 
Rendre votre RP sympa à l'oeil
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Votre proxy ?
» Votre admin prend ses RTT

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Theoc Area :: Formalités :: Les tutoriaux du bon citoyen-
Sauter vers: