les couleurs

AliceBlue AntiqueWhite Aqua
Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue
Cornsilk Crimson Cyan
DarkBlue DarkCyan DarkGoldenrod DarkGray DarkGreen DarkKhaki
DarkMagenta DarkOliveGreen DarkOrange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray
DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DodgerBlue Firebrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite
Gold Goldenrod Gray Green GreenYellow Honeydew
HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan
LightGoldenrodYellow LightGray LightGreen LightPink LightSalmon LightSeaGreen
LightSkyBlue LightSlateGray LightSteelBlue
LightYellow Lime LimeGreen Linen Magenta Maroon
MediumAquamarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab
Orange OrangeRed Orchid PaleGoldenrod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum
PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown
Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray Snow SpringGreen SteelBlue
Tan Teal Thistle Tomato Turquoise Violet
Wheat White WhiteSmoke Yellow YellowGreen

code CSS

\!/ certains peuvent varier en fonction du design

texte

Code:

<div class=name>texte</div>

texte

Code:

<div class=name2>texte</div>

texte

Code:

<div class=name3>texte</div>

texte

Code:

<div class=linegossip>texte</div>

texte

Code:

<div class=linegeeks>texte</div>

texte

Code:

<div class=linelovers>texte</div>

texte

Code:

<div class=linecitoyens>texte</div>

texte

Code:

<div class=lineproies>texte</div>

texte

Code:

<div class=titlebox>texte</div>

texte

Code:

<div class=titlebox3>texte</div>

texte

Code:

<div class=buble>texte</div>

texte

Code:

<div class=line2>texte</div>

texte

Code:

<div class=line3>texte</div>

texte

Code:

<div class=infotext>texte</div>

texte

Code:

<div class=infotext2>texte</div>

texte

Code:

<div class=infotext3>texte</div>

texte

Code:

<div class=infotext4>texte</div>

texte

Code:

<div class=mister>texte</div>

code HTML

Allons-y simplement.
Ce n'est pas tout le monde qui sait faire un tableau, alors allons-y d'abord avec un petit cours rapide sur les tableaux (:

Texte 1 Vous voyez il est aligné avec le second texte

Texte2 Positionner de façon égale avec le premier texte

Code:

<table><tr><td>Texte 1
Vous voyez il est aligner avec le second texte</td> <td> Texte2
Positionné de façon égale avec le premier texte</td></tr></table>

On peut augmenter l'espace entre deux textes en rajoutant simplement pleins de

Code:

<td> </td>

.. Enfin, moi c'est comme ça que je fais ^^p
Il est aussi possible de mettre une border au tableau en faisant

Code:

<table border=1>

mais c'est moche donc je le conseille pas.

Pour faire un table plus complexe, il suffit de jouer avec les tr qui sont les rangés et td les colonnes ^.^ Par contre, je ne m'aventurerai pas dans ça puisqu'il y a des milliers de trucs possibles à faire

Faire de l'ombre a un texte est très facile ! Il s'agit simplement de ce petit code :

votre texte avec ombre

Code:

<div style="text-shadow: #A4A4A4 1px 1px 1px;">votre texte avec ombre</div>

Il suffit de remplacer " A4A4A4 " par la couleur désirée. Il est aussi possible de le faire avec de la couleur

votre texte avec ombre

Code:

<div style="text-shadow: #5A64E7 1px 1px 1px;">votre texte avec ombre</div>

Il y a pleins de choses à faire avec les texte. On peut jouer avec les espaces entres les lettres

votre texte avec espace

Code:

<div style="letter-spacing:2px;">votre texte avec espace</div>

On peut également enlever de l'espace

votre texte avec espace

Code:

<div style="letter-spacing:-1px;">votre texte avec espace</div>

Vous n'avez qu'à jouer avec le " 2px " & " -1px ". Un nombre positif augmentera a distance entre deux lettres, un nombre négatif la diminuera.

On peut aussi prédéfinir si les lettres doivent toutes être majuscules ou minuscules.

TEXTE EN MINUS'

Code:

<div style="text-transform: lowercase;">TEXTE EN MINUS'</div>

texte en majus'

Code:

<div style="text-transform: uppercase;">texte en majus'</div>

Les background maintenant. Pour l'exemple je vais prendre une image totalement au hasard (: À noter que le " background:url('lien image'); " peut être changer par " background-color: #couleur;" et ainsi devenir unis ^.^

votre texte ici

Code:

<div style="background:url('http://obsession27.free.fr/divers/fonds/epi6.png');">votre texte ici</div>

On peut arrondir les coins de celui-ci en jouant avec le nombre de pixel. Le premier chiffre correspond au coin haut-gauche, le second est le coin haut-droite, le troisième correspond au bas à droite et le dernier c'est logiquement le coin bas-gauche.

votre texte ici

Code:

<div style="background:url('http://obsession27.free.fr/divers/fonds/epi6.png');-moz-border-radius: 5px 5px 5px 5px;">votre texte ici</div>

Comme vous le remarquer, le texte est coller contre la parois du fond ce qui fait pas très beau, il est donc possible d'établir un espace. Vous pouvez égaliser tout le tour en mettant simplement " padding: 5px; " ou alors y aller côté par côté en faisant " padding-left: 5px; ", " padding-right: 5 px; " et etc..

votre texte ici

Code:

<div style="background:url('http://obsession27.free.fr/divers/fonds/epi6.png');-moz-border-radius: 5px 5px 5px 5px;padding: 5px;">votre texte ici</div>

On peut également définir la largeur et la hauteur du fond ! ( \!/ attention : le texte ne suivras pas. S'il est plus long, il pourrait dépasser. ) " width " correspond à la largeur et " height " à la hauteur

votre texte ici

Code:

<div style="background:url('http://obsession27.free.fr/divers/fonds/epi6.png');-moz-border-radius: 5px 5px 5px 5px;padding: 5px;width: 200px;height:100px;">votre texte ici</div>

On peut également mettre une bordure au fond. On a le choix entre " solid " qui fait une ligne pleine, " dotted " qui fait une ligne pointillée et " dashed " qui fait.. comme dans cet exemple.

votre texte ici

Code:

<div style="background:url('http://obsession27.free.fr/divers/fonds/epi6.png');-moz-border-radius: 5px 5px 5px 5px;padding: 5px;width: 200px;height:100px;border: #EF9D99 3px dashed;">votre texte ici</div>

Maintenant, comme vous êtes de gentil membre, je vous autorise à utiliser et modifier ce qui suis uniquement sur le forum.

Have fun !

Code:

<div style="color: #F32B92;text-decoration: none;display:block;text-shadow: #B2B2B2 1px 1px 1px;font-family: constantia;font-size: 20px;text-transform: uppercase;letter-spacing: 2px;margin-bottom: -16px;text-align: right;border-bottom: #FFDE00 2px dashed;margin-bottom: 2px;">Have fun !</div>

Have fun !

Code:

<div style="color: #47D5F2;text-decoration: none;display:block;text-shadow: #B2B2B2 1px 1px 1px;font-family: constantia;font-size: 20px;text-transform: uppercase;letter-spacing: 2px;margin-bottom: -16px;text-align: right;border-bottom: #FFDE00 2px dashed;margin-bottom: 2px;">Have fun !</div>

(c) Rainy