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

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

    le Lun 12 Mar 2012 - 21:05


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    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 attendre :

    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.



    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">
      <img class="primero_img" alt="" src="http://i44.servimg.com/u/f44/14/64/74/74/11-4410.jpg" />
      <div class="secundo">
        <img class="secundo_img" alt="" src="http://i44.servimg.com/u/f44/14/64/74/74/90536410.jpg" />
        <div class="slides">
          <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 class="slides_img" alt="" src="http://i44.servimg.com/u/f44/14/64/74/74/11-4410.jpg" />             
        </div>
      </div>
    </div>


    Pour ce qui est du CSS, il est assez simple à comprendre en suivant les identifiants et les commentaires-CSS:
    Spoiler:
    Code:
    /*Bloc image 1*/
    .primero {
    position: relative;
    display: block;
    width: 800px;
    height: 169px;
    margin-top: 5px auto;
    border: 3px ridge #fff;
    border-radius: 13px;
    }
    .primero img {
      border-radius: 13px;
    }
    /*Bloc image 2*/
    .primero .secundo {
    position: absolute;
    width: 0px;
    height: 0px;
    top: 50px;
    right: 150px;
    -webkit-transition: all 1.7s ease-in;
    transition: all 1.7s ease-in;
    }
    /*Bloc image 2*/
    .primero:hover .secundo {
    width: 806px;
    height: 175px;
    -webkit-transition: all 0.7s ease-in;
    transition: all 0.7s ease-in;
    }
    /*Image 2*/
    .primero .secundo_img {
    position: absolute;
    right: 0px;
    top: 0px;
    border: 0px ridge #fff;
    border-radius: 13px;
    width: 0px;
    height: 0px;
    -webkit-transition: all 1.7s ease-in;
    transition: all 1.7s ease-in;
    }
    /*Apparition Image 2*/
    .primero:hover .secundo_img {
    width: 800px;
    height: 169px;
    border-width: 3px;
    -webkit-transition: all 0.7s ease-in;
    transition: all 0.7s ease-in;
    }
    /*Bloc image 3*/
    .slides {
      position: absolute;
      border: 0px ridge #fff;
      border-radius: 13px;
      left: 100px;
      top: 50px;
      width: 0px;
      height: 0px;
      overflow: hidden;
      -webkit-transition: all 1.7s ease-in;
      transition: all 1.7s ease-in;
    }
    /*Apparition 3e image*/
    .secundo:hover .slides {
      width: 225px;
      height: 300px;
      border-width: 3px;
      -webkit-transition: all 0.7s ease-in;
      transition: all 0.7s ease-in;
    }
    /*Texte sous 3e image*/
    .slides p {
      margin: 0px;
      padding: 5px;
      width: 211px;
      height: 286px;
      background: grey;
      overflow-y: auto;
      color: darkblue;
      font: italic small-caps bold 16px arial;
      text-align: justify;
      padding: 7px;
    }
    /*Image 3*/
    .slides > img {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 225px;
      height: 300px;
      -webkit-transition: all 1.7s ease-in;
      transition: all 1.7s ease-in;
    }
    /*Déplacement Image 3 au survol*/
    .slides:hover > img {
      right: 225px;
      width: 225px;
      height: 300px;
      -webkit-transition: all 0.7s ease-in;
      transition: all 0.7s ease-in;
    }

    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 Arrow


    Bien du plaisir. :gentleman:
    avatar
    Nero Brigh
    MasculinAge : 33Messages : 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 ! ^^
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mer 11 Avr 2012 - 18:40

    J'avais pas vu ce sujet =O

    Merci du partage Wink



    avatar
    Marie
    FémininAge : 27Messages : 2203

    le Mer 11 Avr 2012 - 18:49

    Merci pour ce partage! :)



    /

    Kit fait par Arpège. Merci! :love:
    avatar
    Final-Blonde
    FémininAge : 93Messages : 144

    le Sam 14 Avr 2012 - 14:53

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

    le Dim 4 Nov 2012 - 17:51

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

    le Dim 11 Nov 2012 - 10:00

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

    le Jeu 7 Mar 2013 - 18:36

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

    le Ven 8 Mar 2013 - 11:45

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

    le Dim 30 Oct 2016 - 14:22

    merci
    avatar
    Kelalin
    FémininAge : 24Messages : 1473

    le Dim 30 Oct 2016 - 14:35

    Merci pour le partage !
    Contenu sponsorisé


      La date/heure actuelle est Mar 25 Avr 2017 - 8:41