Texte CSS

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]

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.

Code:

[center]Alignement forum[/center]

Code:

<div style="text-align:center;">Alignement Css</div>

Code:

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

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

Code:

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

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.

Code:

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

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.

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:

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 :

Code:

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

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.

Code:

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

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.

Code:

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

Cela marche aussi avec les mots dans un paragraphe :

Code:

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

Amusons-nous avant la prochaine étape :

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>

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.

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.

Code:

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

Code:

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

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.

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.

Code:

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

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:

Code:

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

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>

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!

Code:

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

Code:

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

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>

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:

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>

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 :

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>