Final Fantasy Chronicles

Forum de RPG sur Final Fantasy VII. Enjoy ^^
 
AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Partagez | 
 

 ~TUTORIEL~ Le CSS, pratique et esthétique -par Tseng-

Aller en bas 
AuteurMessage
Tseng



Nombre de messages : 10
Age : 35
Date d'inscription : 06/08/2010

MessageSujet: ~TUTORIEL~ Le CSS, pratique et esthétique -par Tseng-   Dim 29 Aoû - 17:53

Bonjour bonjour!

sur ce topic je vais vous apprendre ce qu'est le CSS et comment vous en servir pour personnaliser vos forums.


Tout d'abord le CSS est un code utilisable sur les forums et les blogs, polyvalent et pratique pour crée différents aspect ou effets.

Exemple:
- crée des titres originaux
- personnaliser la mise en page
- mettre un peu de couleurs et des formes dans vos messages
...

et tellement d'autres choses.

pour commencer, je vous expliquerais les codes utiliser pour ma présentation. je vous les donnerais sur ce topic avec les explication prou els personnalisez facilement a votre manière.

Cours:
- Titres et formes
- fonds de paragraphes
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Tseng



Nombre de messages : 10
Age : 35
Date d'inscription : 06/08/2010

MessageSujet: Re: ~TUTORIEL~ Le CSS, pratique et esthétique -par Tseng-   Dim 29 Aoû - 18:18

première leçon: les titres!

(attention, sur ce modèle le CSS ne fait pas une réel apparition, mais sous la demande de membres, je vous le met )

Premier modèle:


LES TITRES

.
tutoriel...listening!

voici le modèle utiliser pour ma fiche de présentation. les codes se font ici en plusieurs parties. la partie du titre qui est ici "LES TITRES", la seconde partie celle des symboles ici des ■, et enfin la troisième et dernière partie, la barre rouge.
Le "tutoriel...listening" est une petite personnalisation de mon choix, donc pas indispensable.


commençons!

LES TITRES

pour avoir ce résultat, j'ais utiliser les codes les plus simples qu'il soit:

Code:
 
[center][size=18][font=century gothic][color=#D1C9C9] LES TITRES[/color][/font][/size][/center]
center (centrer)
size (taille)
font (police)
color (couleur)

comme vous pouvez le constater rien de compliquer et a la portée de tous. c'est ici la partie la plus facile. a personnaliser selon vos désirs et vos choix. Amusez vous!



cette partie est tout aussi facile, vous pouvez utilisez carré, rond, étoiles, n'importe quel symbole de votre choix. ensuite vous avez juste a jouer avec la taille et la couleur. je vous montrerais par la suite quelques façon de compliquer la chose pour donner de nouveau effets amusant et très esthétique.

pour l'exemple ci-dessus:

Code:
[size=20]■[/size]  [size=20][color=red]■[/color][/size]  [size=20]■[/size]  [size=20][color=red]■[/color][/size]  [size=20]■[/size]  [size=20][color=red]■[/color][/size]

Vous insérer votre symbole (carré ), vous l'insérer autant de fois que vous le désirez. moi je l'ais mis 6 fois. puis a chaque carré, j'ais insérer la commande de taille [size] (de taille 20). Tout les deux carrés, j'ais aussi insérer la commande [color] permettant de donner cette effet: blanc rouge blanc. Pour finir j'ais insérer deux espaces entre chaque carré.

Rien de sorcier!

_________________________


.


voici la dernière partie. toujours pas besoin de grande connaissance en codes. nous avons une barre simple, de couleur rouge. voici le code utiliser pour la crée:

Code:
[table width=100%][td BGCOLOR="Darkred"][/td][/table]

[table] est la commande pour crée les tableau. donc pour crée une barre nous créons en fait: un tableau d'une seule ligne.
Width=100% : est ici la taille que prendras la bande, j'ais mis 100% pour que notre bande fasse toute la longueur de la page.
[td] représente cette ligne
BGCOLOR="darkred"] représente la couleur qui recouvriras votre bande.

vous pouvez donc changer la longueur de votre barre en modifiant le 100%.
mais aussi la couleur, en modifiant "Darkred" par la couleur de votre choix.

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



Nombre de messages : 10
Age : 35
Date d'inscription : 06/08/2010

MessageSujet: Re: ~TUTORIEL~ Le CSS, pratique et esthétique -par Tseng-   Dim 29 Aoû - 18:44

Première leçon: les titres!

Second modèle:


Présentation de
Prénom & Nom



Code:
<div style="TEXT-ALIGN: center" align=center><SPAN style="FONT-FAMILY: georgia"><FONT face=Georgia size=13><blockquote>
[color=#eec762][size=25]Présentation de[/size][/color]
[color=violet][i]Prénom & Nom[/i][/color]</FONT></SPAN></div>

ce modèle demande quelques connaissance en CSS n'ayant pas un succès fou, je l'expliquerais en détail selon le nombre de demande. mais si individuellement vous voulez l'utiliser, vous pouvez me contacter par mp, pour que je vous aide a le modifier à votre guise.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Tseng



Nombre de messages : 10
Age : 35
Date d'inscription : 06/08/2010

MessageSujet: Re: ~TUTORIEL~ Le CSS, pratique et esthétique -par Tseng-   Mar 31 Aoû - 0:13

Leçon 2 : Fond de couleur

Premier modèle
Fond uni





TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE



Code:
<div align="center" style="background-color: #D1C9C9;">[size=12][justify]<blockquote><blockquote>

 TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE

</blockquote></blockquote>[/justify][/size]</div></center>

alors voici les codes pour crée un fond de couleur derrière un paragraphe de texte. a présent, les explication:

Code:
<div align="center" style="background-color: #D1C9C9;">
comme vous le voyez ces signes < > maque le commencement et la fin d'une commande. div, est le début d'une nouvelle ligne de code.

-aligne="center" : il centre le cadre de fond.
-style="background-color: ..... : est le code pour insérer la couleur de fond.
vous pouvez préciser ensuite la taille de votre cadre, mais si vous ne le faite pas, ce n'est pas grave il se placeras automatiquement autour de votre texte. ce n'est donc pas utile de retenir.

Code:
[size=12][justify]<blockquote><blockquote>

a la suite du premier code nous avons ceci.

- "size" signifie la taille du texte que vous encadrer du fond, si vous voulez qu'il soit uniforme. si vous désirez plusieurs taille, enlevez cette commande, et faites vos réglage sur le texte même.
-"justify": met le texte entier en justification, ce qui donne cet aspect droit et propre.
- <blockquote><blockquote> : marque le commencement du texte

__________________________

donc nous avons ensuite notre texte et les codes de fin.

Code:
</blockquote></blockquote>[/justify][/size]</div></center>

</blockquote></blockquote>: marque la fin du texte a encadrer
/justify: vous aurez compris xd
/size; idem
</div></center>: marque la fin de la commande de fond! 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé




MessageSujet: Re: ~TUTORIEL~ Le CSS, pratique et esthétique -par Tseng-   

Revenir en haut Aller en bas
 
~TUTORIEL~ Le CSS, pratique et esthétique -par Tseng-
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Final Fantasy Chronicles :: Section Hors RPG :: Graph Zone, Galerie...-
Sauter vers: