AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Infobulles en cascade et en slide [CSS + HTML - toutes versions]

    Partagez
    Final-Blonde
    FémininAge : 93Messages : 144

    le Lun 12 Mar 2012 - 21:05

    Ohé Matelots !

    Le tutoriel que je vous propose vous permettra de réaliser un effet sympa mais aussi utile d'infobulles en cascade avec effet slide et rien que en CSS.
    Rien de bien nouveau cela dit.

    Cette astuce est applicable dans tous les coins et recoins du forum :
    PA, page HTML, templates, widget, messages, bref, partout.

    Voici ce que vous pouvez atteindre ici

    Je tiens aussi à souligner que les images ne sont pas ma propriété et qu'elles ne servent qu'à illustrer ce tuto.
    Comme je ne sais plus d'où elles viennent, je vous prie de pas en faire usage.


    Commençons par le HTML, que je ne développerai pas trop, si ce n'est que c'est le principe de l'infobulle, à savoir:
    le bloc dans le bloc du bloc principal.
    Code:
    <div class="primero" style="width: 800px; height: 169px;">
    <img src="http://i44.servimg.com/u/f44/14/64/74/74/11-4410.jpg" alt="" />
    <div class="secundo" style="width: 800px; height: 169px;">
    <img src="http://i44.servimg.com/u/f44/14/64/74/74/90536410.jpg" alt="" />
    <div class="slides"><div class="slide-left">
    <p class="contenu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
    <img src="http://i44.servimg.com/u/f44/14/64/74/74/11-4410.jpg" width="225" height="300" alt="" />
    </div></div>
    </div></div>
    Si j'ai mis des dimensions aux div et aux images c'est pour juste pour avoir utiliser des mêmes images en différentes dimensions.
    Il va de soi que tout peut passer par la feuille de style CSS, ce que personnellement je fais afin d'avoir un HTML le plus léger possible.
    Bien sûr vous pouvez remplacer les images par du texte.

    Pour ce qui est du CSS, il est assez simple à comprendre en suivant les identifiants et les commentaires-CSS:
    Spoiler:
    /*bulles en cascade avec slide left image
    ------------------------------------------------------------*/
    .bulcasca {
    position: relative; /*position par défaut mais spécifiée ici pour créer un parent et permettre un héritier par la suite*/
    width: 800px;
    margin: 0 auto;
    }
    /*image 1*/
    .primero {
    display: block;
    overflow: hidden; /*on dissimule ce qui dépasse*/
    width: 200px;
    height: 100px;
    margin-top: 5px auto;
    border: 3px ridge #fff;
    -moz-border-radius:13px;
    -webkit-border-radius: 13px;;
    border-radius: 13px;
    cursor: pointer;
    }
    .primero:hover .slides {
    width: 0px; /*façon de dissimuler sans le display none qui ne fonctionne pas pour le slide*/
    height: 0px;
    overflow: hidden;
    }
    /*image 2*/
    .primero .secundo {
    background-color: #000;
    border: 3px ridge #fff;
    -moz-border-radius:13px;
    -webkit-border-radius: 13px;;
    border-radius: 13px;
    transition: all 1.7s ease-in; /*le slide du retour*/
    -moz-transition: all 1.7s ease-in;
    -webkit-transition: all 1.7s ease-in;
    -o-transition: all 1.7s ease-in;
    -htm-transition: all 1.7s ease-in;
    }
    .primero:hover .secundo {
    position: absolute; /*héritier auquel on peut donner une position absolue à l intérieur de du bloc principal*/
    width: 200px ;
    height: 300px;
    margin-top: -90px; /*retrait top de la seconde image*/
    margin-left: -160px; /*retrait left de la seconde image*/
    transition: all 0.7s ease-in; /*le slide du hover*/
    -moz-transition: all 0.7s ease-in;
    -webkit-transition: all 0.7s ease-in;
    -o-transition: all 0.7s ease-in;
    -htm-transition: all 0.7s ease-in;
    }
    /*image 2 rollover on slide-left-image*/
    .secundo .slides, .slides div img {
    transition: 1.7s ease-in;
    -moz-transition: 1.7s ease-in;
    -webkit-transition: 1.7s ease-in;
    -o-transition: 1.7s ease-in;
    -htm-transition: 1.7s ease-in;
    }
    .secundo:hover .slides, .slides div img {
    position: absolute;
    width: 225px ;
    height: 300px;
    transition: 0.7s ease-in;
    -moz-transition: 0.7s ease-in;
    -webkit-transition: 0.7s ease-in;
    -o-transition: 0.7s ease-in;
    -htm-transition: 0.7s ease-in;
    }
    /*slide left on image*/
    .slides {
    width: auto;
    margin: -97px auto;
    }
    .slides div {
    position: relative;
    background: #fff;
    width: 225px;
    height: 300px;
    margin: 10px;
    overflow: hidden;
    cursor: pointer;
    }
    .slides p {
    background: grey;
    height: 280px;
    overflow-y: auto; /*on dertermine la scrollbar en hauteur*/
    color: darkblue;
    font: italic small-caps bold 16px arial; /* ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly (on peut omettre toutes les propriétés sauf le size et le family dans l ordre */
    text-align: justify;
    padding: 7px;
    margin: 0 auto;
    }
    .slides div img {
    position: absolute;
    left: 0;
    top: 0;
    transition: transform 1.7s ease-in-out;
    -moz-transition: -moz-transform 1.7s ease-in-out;
    -o-transition: -o-transform 1.7s ease-in-out;
    -webkit-transition: -webkit-transform 1.7s ease-in-out;
    -htm-transition: transform 1.7s ease-in-out;
    }
    .slides div.slide-left:hover img {
    transform: translateX(-300px);
    -moz-transform: translateX(-300px);
    -o-transform: translateX(-300px);
    -webkit-transform: translateX(-300px);
    -htm-transform: translateX(-300px);
    }
    Le plus important dans le CSS ce sont les dimensions qu'il faut définir afin d'établir où les infobulles doivent se décaler, les scrollbar, etc, que vous ayez des images ou du texte dans les infobulles.


    Fonctionne avec tous les navigateurs aux normes W3C. Arrow
    IE n'y est pas en ce qui concerne le slide, idem l'ouverture de l'image sur le texte. Evil or Very Mad


    Bien du plaisir. :gentleman:
    Nero Brigh
    MasculinAge : 32Messages : 85

    le Mer 11 Avr 2012 - 16:36

    Étrange que ce sujet n'est reçu aucun merci alors que c'est si utile...

    Et bien merci ! ^^
    Okhmhaka
    FémininAge : 31Messages : 31721

    le Mer 11 Avr 2012 - 18:40

    J'avais pas vu ce sujet =O

    Merci du partage Wink



    Marie
    FémininAge : 27Messages : 1911

    le Mer 11 Avr 2012 - 18:49

    Merci pour ce partage! :)




    Kit Par Sébastien. Merci beaucoup!
    Final-Blonde
    FémininAge : 93Messages : 144

    le Sam 14 Avr 2012 - 14:53

    Ah mais je vous en prie, c'était avec plaisir.
    •MYV382•
    FémininAge : 20Messages : 55

    le Dim 4 Nov 2012 - 17:51

    Thank you ! *O*
    nuanciel
    FémininAge : 25Messages : 112

    le Dim 11 Nov 2012 - 10:00

    Merci pour le partage ^^
    lapinou-doux
    FémininAge : 16Messages : 56

    le Jeu 7 Mar 2013 - 18:36

    Merci beaucoup Very Happy
    Final-Blonde
    FémininAge : 93Messages : 144

    le Ven 8 Mar 2013 - 11:45

    C'est avec plaisir.
    Darouine Lius
    MasculinAge : 27Messages : 63

    le Dim 30 Oct 2016 - 14:22

    merci
    Kelalin
    FémininAge : 24Messages : 1405

    le Dim 30 Oct 2016 - 14:35

    Merci pour le partage !
    Contenu sponsorisé

    Aujourd'hui à 7:52


      La date/heure actuelle est Sam 10 Déc 2016 - 7:52