Texte depliant au passage souris

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

Résolu Texte depliant au passage souris

Message par frederique-rko le Dim 29 Juin 2014 - 14:14

Bonjour,

J'aimerais savoir comment faire pour qu'un texte se déplie au passage de la souris, comme s'il surgissait d'un trou (comme un taupe qui sort de la terre)

Je veux un effet de "tirette"
Comme si y'avait un papier dans une boite qui dépasse et quand on passe la souris dessus ça sort de la boite (comme sur l'illustration)

voici illustration en image.



Merci pour votre aide


Dernière édition par frederique-rko le Lun 30 Juin 2014 - 18:18, édité 1 fois

frederique-rko
*

Messages : 32
Inscrit(e) le : 01/03/2012

http://wwc-life.forumperso.com/
frederique-rko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte depliant au passage souris

Message par MlleAlys le Dim 29 Juin 2014 - 19:59

Bonjour,
voilà un code qui devrait donner l'effet désiré :

html :
Code:
<div class="tirette">
    <div class="contenu">
        blablabla
    </div>
</div>

css :
Code:
/*cadre effet tirette*/
.tirette {
    border-bottom: 1px solid black; /*ligne du bas*/
    padding : 0 10px;
    margin:5px;  /*marge*/
    width:150px; /*largeur du bloc*/
    height:200px;  /*hauteur du bloc*/
    position:relative;
    overflow:hidden;  /*pour cacher ce qui depasse*/
}
.contenu {
    height:200px; /*hauteur du bloc*/
    width:146px; /*largeur du bloc*/
    box-shadow: 0 0 3px black; /*ombre*/
    border:1px solid black; /*contour du bloc*/
    padding:2px; /*marge interieure*/
    position: absolute;
    top:150px; /*position normale abaissée de 150px*/
    left:10px;
    transition: top 0.8s ease-out; /*effet de transition glissée*/
}
.contenu:hover {
    top:0px; /*position au passage de la souris*/
}
/*fin cadre effet tirette*/

ce qui doit donner ceci : http://jsfiddle.net/UPYG5/


Dernière édition par MlleAlys le Lun 30 Juin 2014 - 1:39, édité 1 fois

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte depliant au passage souris

Message par frederique-rko le Dim 29 Juin 2014 - 20:59

Merci MlleAlys, c'est exactement ça  Wink  sauf que j'y suis pas arrivée

Faut aller dans Module  Question  HTML & JAVASCRIPT  Question  Gestion des pages HTML  Question 
Création en mode avancé HTML  Question 

Et ensuite .... J'avoue que je ne sais pas trop

Et sinon pour le CSS, on peut coller ça n'importe où ?

Y'a-t-il aussi moyen de personnaliser ? Par exemple en mettant autre chose qu'une simple barre (genre un cadre fantaisie...)

frederique-rko
*

Messages : 32
Inscrit(e) le : 01/03/2012

http://wwc-life.forumperso.com/
frederique-rko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte depliant au passage souris

Message par MlleAlys le Lun 30 Juin 2014 - 1:35

tout dépend de l'endroit où vous souhaitez le voir apparaitre ^^
mais l'option des pages html dans les modules permet de créer de nouvelles pages, surement souhaitez vous l'afficher sur une page du forum déjà existante ? où exactement ? Et dans ce cas le code css sera copié/collé dans apparence>couleurs>feuille de style css ^^
et oui, le code est personnalisable, mais surement via de petites modifications en fonction de ce que vous souhaitez faire.

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte depliant au passage souris

Message par frederique-rko le Lun 30 Juin 2014 - 11:32

C'est bon j'ai réussi à faire ce que je voulais dans l'ensemble. Merci MlleAlys

Par contre je voulais savoir si on pouvait personnaliser en mettant par exemple une bordure double trait, changer la couleur du trait, mettre une image en fond ....

frederique-rko
*

Messages : 32
Inscrit(e) le : 01/03/2012

http://wwc-life.forumperso.com/
frederique-rko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte depliant au passage souris

Message par MlleAlys le Lun 30 Juin 2014 - 15:38

pour modifier l'apparence de la bordure du bloc coulissant, il faut modifier cette ligne là du code css :
Code:
border:1px solid black; /*contour du bloc*/
en la remplaçan par exemple par :
Code:
border:3px double red; /*contour du bloc*/
pour une bordure double de 3px de large et de oculeur rouge ^^

pour ajouter une image de fond, ajoutez au même bloc une ligne ainsi :
Code:
backround-image: url(URL DE L'IMAGE); /*image de fond du bloc*/
en remplaçant URL DE L'IMAGE par l'url de l'image que vous souhaitez.
Ce qui donne par exemple :
Code:
/*cadre effet tirette*/
.tirette {
    border-bottom: 1px solid black; /*ligne du bas*/
    padding : 0 10px;
    margin:5px;  /*marge*/
    width:150px; /*largeur du bloc*/
    height:200px;  /*hauteur du bloc*/
    position:relative;
    overflow:hidden;  /*pour cacher ce qui depasse*/
}
.contenu {
    height:200px; /*hauteur du bloc*/
    width:146px; /*largeur du bloc*/
    box-shadow: 0 0 3px black; /*ombre*/
    border:3px double red; /*contour du bloc*/
    background-image: url(URL DE L'IMAGE); /*image de fond du bloc*/
    padding:2px; /*marge interieure*/
    position: absolute;
    top:150px; /*position normale abaissée de 150px*/
    left:10px;
    transition: top 0.8s ease-out; /*effet de transition glissée*/
}
.contenu:hover {
    top:0px; /*position au passage de la souris*/
}
/*fin cadre effet tirette*/

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte depliant au passage souris

Message par frederique-rko le Lun 30 Juin 2014 - 18:18

Milles merci MlleAlys, je pense désormais réussir à m'en sortir. Sincères remerciements pour votre aide précieuse.

frederique-rko
*

Messages : 32
Inscrit(e) le : 01/03/2012

http://wwc-life.forumperso.com/
frederique-rko a été remercié(e) par l'auteur de ce sujet.

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


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