RPG +16 ans
 

Partagez | 
 

 Texte CSS

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Jonathan Crane/Scarecrow

avatar

Localisation dans Gotham : Arkham Asylum

MessageSujet: Texte CSS   Sam 29 Sep - 10:54

Voici enfin un module où vous aurez l'occasion de plus personnaliser vos écritures en tant que couleur, forme, espacement, alignement codé, la direction et ce genre de truc. Initialement, avec les codes du forum, vous pouvez facilement améliorer vos textes avec une couleur ou une grandeur prédéfinie. Rien de sorcier, mais ce n'est souvent pas assez pour vraiment avoir un contrôle parfait sur nos écritures.

Couleur forum
Code:
[color=red]Couleur forum[/color]
Couleur Css

Code:
<div style="color:red;">Couleur Css</div>

La balise "Color" sert à appliquer votre couleur couleur au texte. Nous l'avons mit dans le style de la division afin d'y ajouter d'autre fonction plus tard. On peut lui appliquer la couleur en nom (red), en hexa (#334488)ou en RGB(rgb(255,0,0)).

On peut aussi régler l'alignement de votre texte dans les codes css. Sachez que si vous voulez utiliser les balises existantes du forum,vous devez les mettre à l'intérieur de la division.

Alignement forum
Code:
[center]Alignement forum[/center]
Alignement Css

Code:
<div style="text-align:center;">Alignement Css</div>
Alignement html avec couleur

Code:
<div style="color:red;">[center]Alignement html avec couleur[/center]</div>
Alignement Css avec couleur

Code:
<div style="text-align:center;color:red;">Alignement Css avec couleur</div>

Vous pouvez dans ce cas mettre un alignement de droite (right), left (qui est la par défaut...) justify (justifié) et center (milieu). La balise utilisée est ici text-align.

Les décorations sont aussi réalisable grâce au code css. Voici les balises possible dans ce cas. Overline (va créer un ligne au dessus du texte) Line-through (Texte barré), Underline (ligne en dessous).

Overline

Code:
<div style="text-decoration:Overline;">Overline</div>
Line

Code:
<div style="text-decoration:line-through;">Line</div>

Vous pouvez aussi vous amuser avec les majuscules (Uppercase), minuscules(lowercase) ou les lettres majuscules en début de chaque mot(capitalize). Il suffit de mettre la balise text-transform: avant. C'est simple et facile d'utilisation. Il suffit de toujours ajouter la balise suivant dans notre code. La division est toujours fermée en fin de code.

Un jour mon prince viendra

Code:
<div style="text-transform:uppercase;">Un jour mon prince viendra</div>
Un jour mon prince viendra

Code:
<div style="text-transform:lowercase;">Un jour mon prince viendra</div>

Dans le même cas, on peut mettre le texte complètement en majuscule mais qui respecte les grandes ou les petites.

Un jour mon prince viendra

Code:
<div style="font-variant:small-caps;">Un jour mon prince viendra</div>

Il y a aussi les fameuses marges que nous ne pouvons pas ajouter sur forum en utilisant la barre espace ou la touche tabulation. Il y a cependant moyen par codage d'y arriver. La balise se nomme text-indent. Vous n'avez qu'a spécifier sa grandeur par le nombre de pixels qui l'éloignera du bord gauche. Voici un exemple:

« Entre toutes les différentes expressions qui peuvent rendre une seule de nos pensées, il n’y en a qu’une qui soit la bonne. On ne la rencontre pas toujours en parlant ou en écrivant… »

Code:
<div style="color:#ff99ff;text-indent:40px; text-transform:capitalize;">« Entre toutes les différentes expressions qui peuvent rendre une seule de nos pensées, il n’y en a qu’une qui soit la bonne. On ne la rencontre pas toujours en parlant ou en écrivant… »</div>

J'ai ajouté ici aussi une transformation pour que vous puissiez avoir un aperçu des données décrites un peu plus haut. Vous pouvez voir aussi l'espace qui s'est créée à la première ligne du texte. Si vous voulez éloigner votre texte complet, seulement utiler la balise margin comme expliqué dans Création de cadres et fonds.

On peut aussi ajouter plus de choix au niveau du style d’écriture surtout dans les noms. On doit seulement utiliser ceux par défaut donnés par Word ou tout logiciel qui possède des noms de caractère. Avec la balise font-family, vous pouvez ajouter un texte Time new Roman, Castellar ou tous ceux qui se retrouve initialement sur votre ordinateur. Voici quelque exemple :

Goudy Stout

Code:
<div style="font-family:goudy stout;text-align:center;color:#DAA520;">Goudy Stout</div>
SimHei

Code:
<div style="font-family:SimHei;text-align:center;color:#9370DB;">SimHei</div>

On peut bien sûr jouer au niveau du style italique (font-style:italic;)

La grandeur peut elle aussi varier selon les codes qu'on lui donne. On joue alors sur la grandeur en pixel qu'on veut lui offrir. Plus la valeur est haute, plus l'écriture devient grande.

Tutoriel

Code:
<div style="font-size:18px;">Tutoriel</div>
Tutoriel

Code:
<div style="font-size:40px;">Tutoriel</div>

Le pourcentage est aussi utilisable mais je le déconseille car il est difficile à maîtriser. Gardez une valeur normale en pixel pour pouvoir avoir la même hauteur partout.

Avant de rentrer dans les ombres et les modification plus majeur, voici quelque chose qui peut modifier relativement bien votre texte et pourtant n'est pas très apparent. On peut modifier l'espace entre les lettres qui peut permettre à un titre d'être plus large est les lettres plus évidentes.

Espace

Code:
<div style="letter-spacing:30px;">Espace</div>

Cela marche aussi avec les mots dans un paragraphe :

Espace entre les mots

Code:
<div style="word-spacing:15px;">Espace entre les mots</div>

Amusons-nous avant la prochaine étape :

Votre Nom

Code:
<div style="font-family:Rockwell;letter-spacing:10px;font-variant:small-caps;text-align:center;color:#FFB6C1;text-decoration:underline;font-size:36px;">Votre Nom</div>

_________________
La peur, c'est le pouvoir...
Revenir en haut Aller en bas
Jonathan Crane/Scarecrow

avatar

Localisation dans Gotham : Arkham Asylum

MessageSujet: Re: Texte CSS   Sam 29 Sep - 15:03

Ombrage

Il existe cette fonction amusante pour nous permettre de faire des tracés ou des ombres sous nos lettres (à éviter dans les textes complets). Il s'agit de Text-shadow. Je vais vous montrer plusieurs façon de l'utiliser afin que vous puissiez à votre tour vous amusez avec. Il est possible de changer les "em" par des pixels sans problème.

On va commencer avec un ombrage normal sous le texte.

Mon texte ici

Code:
<div style="font-size:30px;text-shadow: 0.1em 0.1em gray;">Mon texte ici</div>

Le premier 0.1em est la distance à droite et le deuxième celle qui sépare l'ombre du teste vers le bas. La troisième donnée est simplement la couleur que l'on peut faire varier selon nos goûts.

On peut aussi lui appliquer une fonction de brouillage qui va la mettre moins carré. Cette fonction sera le troisième "em" dans la ligne.

Mon texte ici

Code:
<div style="font-size:30px;text-shadow: 0.1em 0.1em 0.2em gray;">Mon texte ici</div>
Mon texte ici

Code:
<div style="font-size:30px;text-shadow: 0.1em 0.1em 0.05em gray;">Mon texte ici</div>
Mon texte ici

Code:
<div style="font-size:30px;text-shadow: 0.1em 0.1em 0.7em gray;">Mon texte ici</div>

Le dernier est presque juste un aura autour de nos lettres tellement il est effacé.

On peut s'amuser à en mettre plusieurs pour donner un effet dans notre texte.

Mon texte ici

Code:
<div style="text-align:center;color:#FFA500;font-size:30px;text-shadow: 0.2em 0.5em 0.1em #5F9EA0,-0.3em 0.2em 0.1em#7FFF00,0.4em -0.2em 0.1em #DEB887">Mon texte ici</div>

En plaçant bien vos ombres et lumières, vous pouvez aussi créer des jeux de profondeurs ou de textes qui sortent de votre fond.
Mon texte ici

Code:
<div style="font-size:30px;text-shadow: -1px -1px white, 1px 1px #CCCCCC">Mon texte ici</div>
Mon texte ici

Code:
<div style="font-size:30px;text-shadow: 1px 1px white, -1px -1px #D1D1D1">Mon texte ici</div>

L'apparence n'est pas très apparente à cause de la couleur du fond.

On peut aussi tracer nos lettres par code. Voici quelque exemple:

Mon texte ici

Code:
<div style="font-size:30px;text-shadow: -1px 0 red, 0 1px red,1px 0 red, 0 -1px red">Mon texte ici</div>
Mon texte ici

Code:
<div style="color:black;font-size:30px;text-shadow: -1px 0 black, 0 1px red,1px 0 red, 0 -1px red">Mon texte ici</div>
Mon texte ici

Code:
<div style="color:black;font-size:30px;text-shadow: -1px 0 #FFA500, 0 1px #FFA500,1px 0 #FFA500, 0 -1px #FFA500">Mon texte ici</div>

Sur la deuxième ligne j'ai volontairement laissé une des bordures noire pour vous montrer le résultat.

On peut aussi créer un effet de brillance ou néon à notre souhait. Les résultats sont à vos limites!

Mon texte ici

Code:
<div style="color:#7CFC00;font-size:30px;text-shadow: 0 0 0.4em #ADFF2F">Mon texte ici</div>
Mon texte ici

Code:
<div style="color:#7CFC00;font-size:30px;text-shadow: 0 0 0.4em #ADFF2F,0 0 0.4em #ADFF2F">Mon texte ici</div>
Mon texte ici

Code:
<div style="color:#20B2AA;font-size:30px;text-shadow: 0 0 0.4em #ADD8E6,0 0 0.4em #ADD8E6,0 0 0.4em #ADD8E6">Mon texte ici</div>

_________________
La peur, c'est le pouvoir...


Dernière édition par Jonathan Crane/Scarecrow le Sam 29 Sep - 15:55, édité 2 fois
Revenir en haut Aller en bas
Jonathan Crane/Scarecrow

avatar

Localisation dans Gotham : Arkham Asylum

MessageSujet: Re: Texte CSS   Sam 29 Sep - 15:19

Je vais vous montrer une méthode pour superposer vos textes maintenant que vous savez comment les personnalisés. J'ai utilisé la balise line-height pour choisir la grandeur de pixel entre ma première et ma deuxième ligne. Plus le chiffre est haut, plus l'espace est grand. Ensuite j'ai personnalisé chacune de mes lignes en utilisant leur style. Vous voyez ici la balise Span. Elle est semblable à la balise Div mais s'occupe surtout des lignes. Div s'occupe des groupes.

Modèle de base:

Bienvenue sur

Univers Gotham, forum Batman

Code:
<div style="text-align:center;">
  <span style="color:#483D8B; font-family:Lucida Handwriting; font-size:28px;letter-spacing:10px;">Bienvenue sur</span><br/>
  <span style="color:#9370DB;font-family:Palatino Linotype;font-size:28px;">Univers Gotham, forum Batman</span>
</div>


Bienvenue sur

Univers Gotham, forum Batman

Code:
<div style="text-align:center; line-height:4px;">
  <span style="color:#483D8B; font-family:Lucida Handwriting; font-size:28px;letter-spacing:10px;">Bienvenue sur</span><br/>
  <span style="color:#9370DB;font-family:Palatino Linotype;font-size:28px;">Univers Gotham, forum Batman</span>
</div>

On peut aussi modifier la marge du haut ou du bas de chacun de nos textes pour les superposés. Il faut simplement que le span en question devienne un bloc. Nous lui ajoutons donc la valeur de bloc (voir le deuxième span) et nous lui donnons un valeur négative du sommet pour qu'il passe par-dessus l'autre Voici quelque exemple :


Bienvenue sur

Univers Gotham, forum Batman

Code:
<div style="text-align:center;">
  <span style="color:#483D8B; font-family:Lucida Handwriting; font-size:28px;letter-spacing:10px;">Bienvenue sur</span><br/>
  <span style="display: block;margin-top: -20px;color:#9370DB;font-family:Palatino Linotype;font-size:28px;">Univers Gotham, forum Batman</span>
</div>

Voici un autre moyen facile en utilisant les blockquote. Il est cependant moins personnalisable que les deux autres. vous pouvez quand même lui ajouter de la couleur si vous le désirez.


Votre premier texte
Votre deuxième texte

Code:
<blockquote>
[center]<font face=georgia size=7 color=green>Votre premier texte</font>
<font face=georgia size=6>Votre deuxième texte</font>[/center]
</blokquote>

_________________
La peur, c'est le pouvoir...
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Texte CSS   

Revenir en haut Aller en bas
 
Texte CSS
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» texte word en JPG
» La jeune fille et ses colombes (texte de Masirène, toile de Shérazade)
» Télévision numérique: Télétexte uniquement sur les 2 TSR
» activer la saisie prédictive lors de l' écriture d'un texte
» [REQUETE] NOMBCRYPT Logiciel de crytage de données (texte,photo) GRATUIT

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Univers Gotham :: Hors jeu :: Amusement :: Tutoriaux-
Sauter vers: