AccueilFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 Code Message - Esthétique

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Stephy
charming anti-PRINCE


Nombre de messages : 671
Date d'inscription : 30/05/2007

MessageSujet: Code Message - Esthétique   Dim 25 Oct - 17:11

⇢ Mettre une image en fond. [CSS]
Citation :
.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]
⇢ Mettre une couleur en fond.
Code:
<div style="width:100%;background-color:#d3d3d3;text-align:center;">TEXTE</div>
- Exemple
Le texte

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 texte texte texte
texte texte texte texte
texte texte texte texte

texte texte texte texte
texte texte texte texte
texte texte texte texte



⇢ 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

TON TEXTE
ton texte
ToN TextE




⇢ 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
Texte



⇢ 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
TitreTexte

*Pour bouger le titre, ajouter "align=??" à la suite de . Soit center ou right.
- Exemple
TitreTexte



⇢ 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}


- An's phone version
Code:
<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:5px solid #c3c3c3; border-bottom:5px solid #c3c3c3; background :#D1D8DC; width :400px">[table valign="top" border="0" cellpadding="2" cellspacing="2"]
[tr][td][img]http://i238.photobucket.com/albums/ff50/23folds/23folds3/imported_835.png[/img][/td]
[td][color=#8D8D8D]TEXTE[/color][/td]
[/tr][/table]</br></div><div style="width:400px">[right][size=9]<i>Text</i>
<i>By</i> An Sukieko[/size][size=8]|[url=URL]LIEN[/url]|[/size][/right]</div> </div>


Dernière édition par Stephy le Dim 21 Déc - 1:31, édité 13 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.folio-graphiques.fr/comptes/Chewy/index.php
Stephy
charming anti-PRINCE


Nombre de messages : 671
Date d'inscription : 30/05/2007

MessageSujet: Re: Code Message - Esthétique   Jeu 21 Juin - 5:01

⇢ Blockquote. [CSS]
Mettre une lettre en maj au debut du texte.
Code:
[justify]<span style="float:left; color: #FF0000; font-family: Georgia; font-size:40px; text-shadow: 1px 1px 2px #4A4A4A; margin-bottom: 2px; margin-top:2px;">L</span>e texte va comme suis, la la la la.[/justify]
Le texte va comme suis, la la la la.

Mettre une image à côté du texte.
Code:
<span style="float:left; margin:4px; padding-top:-5px;"><img src="http://i882.photobucket.com/albums/ac22/the-evil-stephy/Kwon%20Soo%20Young/icone43.png" style="width:100px;"></span> Texte ici, la la la la !
Texte ici, la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.folio-graphiques.fr/comptes/Chewy/index.php
Stephy
charming anti-PRINCE


Nombre de messages : 671
Date d'inscription : 30/05/2007

MessageSujet: Re: Code Message - Esthétique   Sam 15 Juin - 16:21

Resize a gif :
Code:
<img width="???" src="WWW"></img>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.folio-graphiques.fr/comptes/Chewy/index.php
Stephy
charming anti-PRINCE


Nombre de messages : 671
Date d'inscription : 30/05/2007

MessageSujet: Re: Code Message - Esthétique   Sam 19 Oct - 16:26

Balise pour interligne plus serré :

Code:
/** CODE POUR ASW **/
.postbody{
line-height: 11px;
}
.quote{
  line-height: 11px;
}
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.folio-graphiques.fr/comptes/Chewy/index.php
Stephy
charming anti-PRINCE


Nombre de messages : 671
Date d'inscription : 30/05/2007

MessageSujet: Re: Code Message - Esthétique   Mer 29 Avr - 8:50

Iframe pour utiliser des pages htlm (code trop lourd/long) :

Code:
<iframe width="100%" height="250" frameborder="0" src="http://jimforumtest.creer-forums.fr/h2-signature-test" target="_blank"></iframe>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.folio-graphiques.fr/comptes/Chewy/index.php
Stephy
charming anti-PRINCE


Nombre de messages : 671
Date d'inscription : 30/05/2007

MessageSujet: Re: Code Message - Esthétique   Sam 26 Nov - 20:47

Effet filtres CSS3 ! /O/ Trouvé par ici ~

Peu importe l'effet, de base il faut...
Code:
filter:type(value);

Noir&Blanc
Code:
filter:grayscale(1);

Flou
Code:
filter:blur(?px);

Saturation (la couleur actuelle est a 100%, donc mettre +)
Code:
filter:saturate(200%);

Sepia
Code:
filter:sepia(1);

Roue spectre couleur (comme une roulette de couleur, fonctionne en angle)(360 = état initial)
Code:
filter:hue-rotate(180deg);

Inversion couleur
Code:
filter:invert(1);

Luminosité (l'image actuelle est à 100%, mettre - rend plus sombre, mettre + rend plus clair)
Code:
filter:brightness(150%);

Contraste (l'image actuelle est à 100%)
Code:
filter:contrast(150%);
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.folio-graphiques.fr/comptes/Chewy/index.php
Contenu sponsorisé




MessageSujet: Re: Code Message - Esthétique   Aujourd'hui à 22:35

Revenir en haut Aller en bas
 

Code Message - Esthétique

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: TASTY PLAYGROUND :: Codes-