Personnaliser l'affichage de la citation

Voir le sujet précédent Voir le sujet suivant Aller en bas

Personnaliser l'affichage de la citation

Icône par defaut le Lun 4 Juin 2012 - 8:46
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
coucou ,

Actuellement vous avez ceci:



On va de ce pas améliorer cette apparence afin d'obtenir un effet bien plus agréable
à l’œil clin oeil .

Le résultat imagé:



Allez c'est parti..

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Pensez à bien valider votre feuille de style en cliquant sur Valid

Code:

.quote
{
background: url(http://i42.servimg.com/u/f42/09/02/12/09/commen10.png) no-repeat  4px 9px #FBFBFB;
border: 1px solid #00A5CD;
box-shadow: 0 1px 3px;
color: #141414;
padding:10px 10px 10px 30px;
  -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}



Explications:
Spoiler:
Code:
background: url(http://i42.servimg.com/u/f42/09/02/12/09/commen10.png) no-repeat  4px 9px #FBFBFB;
no-repeat = L'image ne se répète pas.
4px l'image sera décalée de la gauche de 4px.
9px l'image sera décalée du haut de 9px.
#FBFBFB la couleur de fond.

Code:
border: 1px solid #00A5CD;

1px l'épaisseur de la bordure sera de 1px.
solid la bordure sera continue .
#00A5CD la couleur de la bordure.

Code:
box-shadow: 0 1px 3px;

0 indique le décalage horizontal vers la droite.
1px correspond au décalage vertical vers le bas.
3px indique la force du dégradé.
vous pouvez ajouter une couleur à l'effet comme ceci:
Code:
box-shadow: 0 1px 3px #333333;

Code:
color: #141414;

#141414 la couleur de police .

Code:
padding:10px 10px 10px 30px;

Dans l'ordre :
10px marge de 10 px haut
10px marge de 10 px droite
10px marge de 10 px bas
30px marge de 10 px gauche

Code:

  -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Les quatre coins auront un arrondi de 5px.

Vous pouvez aussi avoir un effet de survol sur la partie fermée.
La class sera alors :
Code:

.quote:hover
{
votre css
}


Voilà, c'est tout pour le moment clin oeil .



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum