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 - 11:59
coucou

Actuellement devez avoir un aperçu qui ressemble à ça :



Une fois cliqué çà donne çà:



oups1 ben c'est pas très chouette ce tit Spoiler ..

L’aperçu avec les changements dans la feuille de style:



Une fois cliqué çà donne çà:



Allez c'est parti..

Compréhension les deux class:

Code:
.spoiler_closed

C'est la partie fermée du Spoiler.

Code:
.spoiler_content

C'est la partie ouverte du Spoiler.

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

Pour la partie fermée, déposez ceci:

Code:

.spoiler_closed
{
background: url(http://i43.servimg.com/u/f43/16/03/32/63/arrow_10.png) no-repeat 4px 0px #cccccc;
color:#141414;
padding:5px 10px 5px 10px;
font-size:14px;
border: 1px solid #141414;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

}
Explications:
Spoiler:


Code:
background: url(http://i43.servimg.com/u/f43/16/03/32/63/arrow_10.png) no-repeat 4px 0px #cccccc;
no-repeat = L'image ne se répète pas.
4px l'image sera décalée de la gauche de 4px.
0px l'image sera placée à 0px du haut.
#cccccc la couleur de fond.

Code:
color:#141414;

La couleur de police.

Code:
padding:5px 10px 5px 10px;
Dans l'ordre :
5px marge de 5 px haut
10px marge de 10 px droite
5px marge de 5 px bas
10px marge de 10 px gauche

Code:
font-size:14px;

La taille de la police.
Code:

border: 1px solid #141414;

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

Code:

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

Les quatre coins auront un arrondi de 8px.

Pour la partie ouverte, déposez ceci:
Code:

.spoiler_content
{
background: url(http://i43.servimg.com/u/f43/16/03/32/63/arrow_11.png) no-repeat 100% 0px #cccccc;
color:#141414;
padding:5px 10px 5px 10px;
border: 1px solid #141414;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

}

Explications:
Spoiler:
Code:

background: url(http://i43.servimg.com/u/f43/16/03/32/63/arrow_11.png) no-repeat 100% 0px #cccccc;

no-repeat = L'image ne se répète pas.
100% l'image sera placée à droite..
0px l'image sera placée à 0px du haut.
#cccccc la couleur de fond.

Code:
color:#141414;

La couleur de police.

Code:
padding:5px 10px 5px 10px;
Dans l'ordre :
5px marge de 5 px haut
10px marge de 10 px droite
5px marge de 5 px bas
10px marge de 10 px gauche

Code:

border: 1px solid #141414;

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


Code:

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

Les quatre coins auront un arrondi de 8px.

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

.spoiler_closed:hover
{
votre css
}

Pour la partie ouverte:
La class sera alors:
Code:

.spoiler_content:hover
{
votre css
}

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





Fondateur des forums Milouze14

- Contact par MP -



Sick.l.Offrande


Membre

Sick.l.Offrande

Message posté: le Sam 31 Jan 2015 - 22:07
Merci beaucoup pour cette astuce Milouze, il me sembler bien l'avoir vus ici mais j'ai eu du mal a la retrouver. Sa vas bien me servir, ce soir je vais me faire plaisir en CSS <3! 

Autrement, 
aurait tu par hasard, les "class" des container : Hide, Citation et Code ? 
ainsi je pourrait finir de tout personnalisé sur mon petit forum.

Encore une fois merci!

Milouze14


Fondateur

Milouze14

Message posté: le Dim 1 Fév 2015 - 6:05
coucou Sick,
Ce forum n'a pas pour vocation d'apporter d'autre explication sur le tutoriel présent.
Si ce dernier n'est pas assez explicite:
Le forum d'entraide est prévu à cet effet.





Fondateur des forums Milouze14

- Contact par MP -



Sick.l.Offrande


Membre

Sick.l.Offrande

Message posté: le Mer 4 Fév 2015 - 21:19
Bonjour, 

D'accord Milouze !
J'ai trouver comment faire pour les autres "boite" je vais bientôt le poster dans les astuces (:

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