Code Message - Esthétique

⇢ Mettre une image en fond. [CSS]

.post {
background-image: url("adresse_url_de_l'image");
background-repeat: repeat;
background-position: top left;
}

| Explication
background-repeat: repeat, no-repeat, repeat-x (horizontal) or repeat-y (vertical).
background-position: top, bottom or center.
background-position: left, right or center.


⇢ + Infos sur les balises DIV
margin-(top, left, right, bottom): ?px; (en négatif, écarte davantage)
float:(right, left);
position:absolute; (pour mettre un texte par dessus une image)

background-image:url(WWW);
background-repeat: no-repeat; (ou repeat)
background-attachment:fixed;
background-color: COLOR
border-radius: 0px 0px 0px 0px; (coin arrondis)
border: ?px (solid, dotted, etc) COLOR

opacity:0.?;
box-shadow: ?px ?px ?px COLOR;

line-height:??%; (70: small , 200: big)
text-align: (center, left, right, justify)
font-style: (italic, bold)
color:
text-shadow: ?px ?px ?px COLOR;
font-family: (police choisie)
font-size: ?px
letter-spacing: ?px (en négatif, rapproche les lettres)
font-variant: small-caps; (petite majuscule)
text-transform: uppercase; (majuscule)
font-weight: (normal, bold, 900 -thicker-)

⇢ Effet miroir / flip.
Vertical
Effet miroir vertical 

Code:

[flipv]TEXTE[/flipv]

Horizontal
Effet miroir horizontal 

Code:

[fliph]TEXTE[/fliph]

EN CSS :
Horizontal

Code:

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

Vertical

Code:

-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);

⇢ Mettre une couleur en fond.

Code:

<div style="width:100%;background-color:#d3d3d3;text-align:center;">TEXTE</div>

- Exemple

Une image.

Code:

<div style="background: url('LIEN IMAGE'); width: NOMBREpx; height: NOMBREpx; border: 0px solid #000000;">TEXTE</div>

⇢ Boite avec scroll.

Code:

<div style="width:300px;height:100px;overflow:auto;">
texte
</div>

- Exemple



⇢ Texte qui se chevauche.

Code:

<DIV style="TEXT-ALIGN:center" align=left><SPAN style="FONT-FAMILY: Palatino Linotype"><FONT face=georgia size=6><blockquote><l>
TON TEXTE
<span style="font-size: 15px; line-height: normal">ton texte</span></l><h>ToN TextE</h></FONT></SPAN><BR></DIV>

- Exemple



⇢ Informations ; Bordure
Il y a différent type de bordure: Solid - Double - Dotted - Dashed - Ridge - Outset - Inset - Hidden - Groove
Dotted sort mieux à 1.8px ; Double n'apparait pas avant 3px

Ensuite, il y a quatre côtés possible: border-bottom ; top ; left ; right
Il devrait apparaître comme ça dans un code: " border-bottom: px nature #color;"

Pour arrondir les bordures il faut utiliser le code suivant: "-moz-border-radius-topright: 11px;"
Il suffit de changer le coin. Sois: topright ; topleft ; bottomright ; bottomleft
Et la taille, en px.



⇢ Ligne de couleur, sous un texte.

Code:

<div style="border-bottom: 3px double #8A6B8F; width:170px">Texte</div>

| Explication
border-bottom: - Toujours mettre à l'avant
3px - Taille de la ligne
double - Le style de la ligne (solid, dotted, etc)
width - Longueur de la ligne en px
*Possibilité en +
TEXT-ALIGN - position du texte (center ; right ; left)
- Exemple



⇢ Effet Input
Le texte ne peut tenir que sur une ligne. Lien ici.

Code:

<input type='button' name='monbutton' value='Texte ici' style='color:black; background-color:inherit;border:hidden;font-family:Arial;font-size:10px'/>

À savoir qu'on peut changer...
Color | Background-color | Border: hidden, dotted, double, groove, inset, outset, ridge, none. | Font-family | Font-size
- Exemple




⇢ Formulaire

Code:

<fieldset><legend>Titre</legend>Texte</fieldset>

- Exemple

Titre

Texte

*Pour bouger le titre, ajouter "align=??" à la suite de

. Soit center ou right.
- Exemple

Titre

Texte

⇢ Ligne de chaque côté du texte. Droite & Gauche.

Code:

<TABLE align=center>
<TR> <TD style="BACKGROUND:#996f84" width="10" >  </TD>  <TD width=375 >[list]TEXTE[/list] </TD> <TD style="BACKGROUND:#996f84" width="10" ></TD> </TR>
</TABLE>

- Exemple

 

TEXTE

⇢ Cute News
Avec un tableau dedans ~
[float] : permet de mettre un texte à droite à côté de celui de gauche sans rien déranger!

Code:

<div><strong><center>{title}</center></strong></div> <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:5px solid #c3c3c3; border-bottom:5px solid #c3c3c3; background :#828282;"><font color="#FFFFFF;"><span style="align:left;">{avatar}</span>{short-story}</br></font></div> <div style="float: right;">[com-link] {comments-num} Comments[/com-link]</div> <div><i>Posted on {date} by {author-name}</i></div> </div></center>

- Exemple

{title}

{avatar}{short-story}

[com-link] {comments-num} Comments[/com-link]

Posted on {date} by {author-name}