Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Lun 4 Juin 2012 - 8:46
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 .





Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

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

 
  • © PunBB | Signaler un abus