AccueilDernières imagesRechercherS'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.

Le deal à ne pas rater :
Aliexpress : codes promo valables sur tout le site
Voir le deal

    Infobulles en cascade et en slide

    Final-Blonde
    Final-Blonde
    FémininAge : 100Messages : 144

    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:

    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:
    Nero Brigh
    Nero Brigh
    MasculinAge : 39Messages : 85

    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 ! ^^
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mer 11 Avr 2012 - 18:40

    J'avais pas vu ce sujet =O

    Merci du partage Wink



    sign
    Marie
    Marie
    FémininAge : 34Messages : 2206

    Mer 11 Avr 2012 - 18:49

    Merci pour ce partage! :)



    /

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

    Sam 14 Avr 2012 - 14:53

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

    Dim 4 Nov 2012 - 17:51

    Thank you ! *O*
    nuanciel
    nuanciel
    FémininAge : 32Messages : 139

    Dim 11 Nov 2012 - 10:00

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

    Jeu 7 Mar 2013 - 18:36

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

    Ven 8 Mar 2013 - 11:45

    C'est avec plaisir.
    Darouine Lius
    Darouine Lius
    MasculinAge : 34Messages : 76

    Dim 30 Oct 2016 - 14:22

    merci
    Anonymous
    Invité

    Dim 30 Oct 2016 - 14:35

    Merci pour le partage !
    Illeanëlia
    Illeanëlia
    FémininAge : 37Messages : 404

    Sam 12 Jan 2019 - 12:41

    Merci pour se partage fort intéressant.
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 17:35