Avatar avec effet slide.
nydelia
Messages postés
20
Statut
Membre
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
Je recherche a faire mon carnet de bord pour mon perso sur un forum rpg. Pour les relations, j'aimerais que le texte coulisse donc a cotée de l'avatar et en cherchant j'ai vu que ca portait le nom d'effet slide.
J'ai donc fini par trouver ca, mais voilà, j'y comprend vraiment rien :'(
http://www.css3create.com/Menu-avec-slider-effet-transition
Si quelqu'un peu m'aider, je debut en codage et ca faite déjà quelque temps que je cherche.
Merci d'avance
Je recherche a faire mon carnet de bord pour mon perso sur un forum rpg. Pour les relations, j'aimerais que le texte coulisse donc a cotée de l'avatar et en cherchant j'ai vu que ca portait le nom d'effet slide.
J'ai donc fini par trouver ca, mais voilà, j'y comprend vraiment rien :'(
http://www.css3create.com/Menu-avec-slider-effet-transition
Si quelqu'un peu m'aider, je debut en codage et ca faite déjà quelque temps que je cherche.
Merci d'avance
A voir également:
- Avatar avec effet slide.
- Avatar facebook - Guide
- Effet miroir word - Guide
- Waptrick avatar - Télécharger - TV & Vidéo
- Avatar whatsapp gratuit - Accueil - WhatsApp
- Effet miroir photo - Accueil - Photo
1 réponse
Bonjour.
Le principe est simple. En reprennant l'exemple de CSS3Create, tu as en gros un html comme ça:
Le principe à retenir est moins compliqué: tu dois avoir un premier conteneur (ici, une liste) qui affiche un contenu permanent, et un autre à l'intérieur du premier qui affiche le slide au survol (ici, les div).
Pour afficher les slides au survol (le contenu de div), on utilisera ce code:
Et on utilise celui-là pour cacher les slides quand leurs conteneurs ne sont pas survolés:
Tu auras juste besoin de remplacer les conteneurs (et les sélecteurs du css) par ce dont tu a besoin.
Le principe est simple. En reprennant l'exemple de CSS3Create, tu as en gros un html comme ça:
<ul>
<li>Abcd
<div>slide Abcd</div>
</li>
<li>Efgh
<div>slide Efgh</div>
</li>
</ul>
Le principe à retenir est moins compliqué: tu dois avoir un premier conteneur (ici, une liste) qui affiche un contenu permanent, et un autre à l'intérieur du premier qui affiche le slide au survol (ici, les div).
Pour afficher les slides au survol (le contenu de div), on utilisera ce code:
ul li:hover div{
left:182px;opacity:1;width:276px;
transition:1s left,1s width,1s opacity;
}
Et on utilise celui-là pour cacher les slides quand leurs conteneurs ne sont pas survolés:
ul li div{
left:0px;opacity:0;width:152px;
transition:1s left,1s width,1s opacity;
}
Tu auras juste besoin de remplacer les conteneurs (et les sélecteurs du css) par ce dont tu a besoin.
Utilisateur anonyme
Si tu as besoin d'aide, n'hésite pas! :)
