AccueilRechercherS'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.


    Effet Transition - Infobulle, Rotation et Agrandissement

    Xplo-Sion
    Xplo-Sion
    FémininAge : 25Messages : 266

    le Ven 20 Avr 2012 - 4:28

    Rappel du premier message :


    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




    Bonjour Very Happy

    Donc je vous fais mon premier tutoriel qui va porter sur le thème " Transition ". Divers style qui vont vous permettre de décorer votre forum :)


    Effet Rotation


    Exemple :
    Effet Transition - Infobulle, Rotation et Agrandissement - Page 11 FHTNa3t

    HTML :
    Code:
    <span class="maclasse"> <img src="https://i.imgur.com/FHTNa3t.jpg" alt="" /></span>

    CSS :
    Code:
    /*Image*/
    .maclasse img{
    width: 70px;
    height: 70px;
    margin: 10px;
    padding: 0px;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
    }
    /*Effet sur image au survol*/
    .maclasse:hover img {
    -webkit-transform : rotate(360deg);
    transform: rotate(360deg);
    }



    Effet Rotation et Agrandissement


    Exemple :
    Effet Transition - Infobulle, Rotation et Agrandissement - Page 11 FHTNa3t

    HTML :
    Code:
    <span class="maclasse"><img src="https://i.imgur.com/FHTNa3t.jpg" alt="" /></span>

    CSS :
    Code:
    /*Image*/
    .maclasse img{
    width: 60px;
    height: 60px;
    margin: 10px;
    padding: 0px;
    -webkit-transition: all 1.5s ease;
    transition: all 1.5s ease;
    }
    /*Effet sur image au survol*/
    .maclasse:hover img {
    width: 96px;
    height: 96px;
    -webkit-transform : rotate(-360deg);
    transform: rotate(-360deg);
    }


    Infobulle Transition


    Exemple :
    Effet Transition - Infobulle, Rotation et Agrandissement - Page 11 FHTNa3tIci les infos qui s'afficheront au survol de l'image
    Profil MP


    HTML :
    Code:
    <div class="nu_infobulle"><img src="https://i.imgur.com/FHTNa3t.jpg" alt="" /><span class="nu_bulle">Ici les infos qui s'afficheront au survol de  l'image<br /><a href="#profil">Profil</a> <a href="#mp">MP</a></span></div>

    CSS :
    Code:
    /*Bloc qui contient l'image et l'infobulle*/
    .nu_infobulle{
    width: 100px;
    padding: 0px;
    position: relative;
    }
    /*Infobulle*/
    .nu_bulle{
    background: #090700;
    border: 0px solid #1c1706;
    color: #c4c4c4;
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100px;
    left: 70px;
    overflow: hidden;
    z-index: 20;
    text-align: left;
    border-radius: 10px;
    -webkit-transition: all 1.5s ease;
    transition: all 1.5s ease;
    }
    /*Apparition de l'infobulle au survol*/
    .nu_infobulle:hover .nu_bulle{
    width: 150px;
    height: 60px;
    padding: 5px;
    border-width: 1px;
    }


    Effet Infobulle sur Transition


    Exemple :
    Effet Transition - Infobulle, Rotation et Agrandissement - Page 11 FHTNa3t

    Mon joli titre


    Ici les infos qui s'afficheront au survol de l’icône
    Profil MP


    HTML :
    Code:
    <div class="transition_nu"><img width="50" height="50" src="https://i.imgur.com/FHTNa3t.jpg" alt="" /><div class="nu_transition"><h3>Mon joli titre</h3><br /><span> Ici les infos qui s'afficheront au survol de l’icône <br /><a href="#profil">Profil</a>    <a href="#mp">MP</a></span></div></div>

    CSS:
    Code:
    /*Bloc qui contient l'image et l'infobulle*/
    .transition_nu {
    position: relative;
    width: 50px;
    height: 50px;
    padding: 0px;
    }
    /*Bloc de l'infobulle*/
    .nu_transition{
    background: #090700;
    border: 0px solid #1c1706;
    color: #dfdfdf;
    width: 0px;
    height: 0px;
    overflow: hidden;
    position: absolute;
    left:50px;
    top: 0px;
    z-index: 999;
    padding: 0px;
    text-align: center;
    border-radius: 10px;
    -webkit-transition: all 1s ease-in;
    transition: all 1s ease-in;
    }
    /*Apparitiond e l'infobulle au survol*/
    .transition_nu:hover .nu_transition{
    height: 80px;
    width: 200px;
    padding: 5px;
    border-width: 1px;
    }
    /*Image*/
    .transition_nu img {
    position: relative;
    z-index: 990;
    width: 50px;
    height: 50px;
    left: 0px;
    bottom: 0px;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
    }
    /*Effet sur l'image au survol*/
    .transition_nu:hover img {
    -webkit-transition: rotate(-360deg);
    transform: rotate(-360deg);
    }



    En espérant avoir pu vous être utile,

    Xplo-sion.



    PS : Sparrow style, le fondateur de Never Utopia a eu l'amabilité de créer cette section pour que l'on puisse partager avec vous nos connaissance, il serait donc normal que vous mettiez un lien sur votre forum comme quoi NU a participer à la construction du codage de votre forum.

    Merci .




    Dernière édition par Xplo-Sion le Mer 25 Avr 2012 - 7:28, édité 1 fois



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 11 121926034f5e3fbba2a48
    SoulNémésis
    SoulNémésis
    FémininAge : 34Messages : 8

    le Mar 4 Sep 2012 - 3:08

    Merci du partage Very Happy
    Mimi-Haine
    Mimi-Haine
    FémininAge : 20Messages : 32

    le Mar 4 Sep 2012 - 17:10

    Merchiii pour les codes :3



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 11 264329signatureforum
    filing
    filing
    MasculinAge : 26Messages : 6

    le Mar 4 Sep 2012 - 21:30

    mici
    kamisama19
    kamisama19
    FémininAge : 25Messages : 17

    le Ven 7 Sep 2012 - 3:08

    Merci beaucoup
    Alys19
    Alys19
    FémininAge : 26Messages : 59

    le Ven 7 Sep 2012 - 19:52

    Merci beaucoup!! Ça va m'être très utile!!! (:
    Nessaleth
    Nessaleth
    FémininAge : 28Messages : 52

    le Ven 7 Sep 2012 - 22:22

    Merci beaucoup! Very Happy
    InkBoy
    InkBoy
    MasculinAge : 26Messages : 66

    le Sam 8 Sep 2012 - 10:00

    Merci pour ce tuto bien sympa



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 11 351tqox
    Summer15
    Summer15
    FémininAge : 23Messages : 5

    le Dim 9 Sep 2012 - 17:30

    Le rendu est superbe !
    Je vais tenter de l'utiliser o/
    Encore merci ^_^
    Morphine.
    Morphine.
    FémininAge : 28Messages : 41

    le Lun 10 Sep 2012 - 22:16

    Ca m'intéresse ! Merci :)



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 11 30st6
    Romoune
    Romoune
    MasculinAge : 29Messages : 9

    le Mer 12 Sep 2012 - 16:31

    merci c'est top
    Ohani
    Ohani
    FémininAge : 32Messages : 39

    le Mer 12 Sep 2012 - 21:08

    Magnifique merci, je l'ai cherché si longtemps T_T <3 <3



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 11 Signizt
    LittleChan
    LittleChan
    FémininAge : 29Messages : 60

    le Mer 12 Sep 2012 - 22:13

    Thanks ^^



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 11 34ex18y
    K.ay
    K.ay
    FémininAge : 28Messages : 5

    le Ven 14 Sep 2012 - 9:32

    merci ^^
    Rozenwyn
    Rozenwyn
    FémininAge : 24Messages : 11

    le Dim 16 Sep 2012 - 12:04

    Ouah, Génial ! Merci beaucoup !



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 11 12877710
    Faraday
    Faraday
    FémininAge : 29Messages : 39

    le Lun 17 Sep 2012 - 11:52

    Merci pour les codes.
    alex24d
    alex24d
    FémininAge : 31Messages : 95

    le Lun 17 Sep 2012 - 13:17

    Merci ♥
    LittleChan
    LittleChan
    FémininAge : 29Messages : 60

    le Lun 17 Sep 2012 - 18:17

    Bonsoir Xplo-sion ^^

    J'ai utilisé le code "effet rotation" et l'image de bouge pas au survol...
    De plus j'aimerais aussi qu'elle mène à un lien... Ça se trouve c'est ça qui fait que ça ne marche pas... Je ne sais pas...
    Mais même avec juste une image (celle de ton exemple) ça ne bouge pas ^^"

    J'ai fait l'essai sur mon QEEL (donc placé dans un template...) Et en fait j'aimerais pouvoir placer l'effet sur les images de groupes qui ont déjà un effet... En gros pouvoir le combiner... Mais jusque là je n'ai pas réussi...

    Mon forum de test : http://hakuouki-ssl.forumactif.com/forum

    Code:
    <!-- BEGIN disable_viewonline -->
    <div id="all_qeel">
        <!-- TITRE QEEL -->
    <div id="d-title"><h1> Qui Est En Ligne ?</h1></div>
    <div id="tfa_qeel">
      <div id="tfa_one-bloc">
        <img width="110" src="http://i46.tinypic.com/3535jki.png" style="position: absolute; top: 20px; right: -56px;" alt="" />
        <!-- BLOC DE GAUCHE(statistiques) -->
        <div class="tfa_d-container">
          <div class="d-content">
            <h2>Statistiques</h2>
            <div class="in_d-content">
              <img style="width: 80px; float:left; margin: 0 0 0 -40px;" src="http://i48.tinypic.com/2rgl8d2.png" alt="statistiques" />
              Te voila enfin ! Nous t'attendions avec impatience !             
              <!-- NOMBRE DE MEMBRES -->
              <div id="TFAd3">{TOTAL_USERS}
                <script type="text/javascript">
                  document.getElementById('TFAd3').innerHTML=document.getElementById('TFAd3').innerHTML.replace(/Nous avons /,"Dans les confins des mondes parallèles il y a, ");
                  document.getElementById('TFAd3').innerHTML=document.getElementById('TFAd3').innerHTML.replace(/membres enregistrés/,"voyageurs du temps. ");
                  document.getElementById('TFAd3').innerHTML=document.getElementById('TFAd3').innerHTML.replace(/membre enregistré/,"voyageur du temps. ");
                </script>
              </div>       
           
              <!-- NOMBRE DE MESSAGES -->
              <div id="TFAd2">{TOTAL_POSTS}
                <script type="text/javascript">
                  document.getElementById('TFAd2').innerHTML=document.getElementById('TFAd2').innerHTML.replace(/Nos membres ont posté un total de /,"Nos voyageurs du temps ont envoyé, ");
                  document.getElementById('TFAd2').innerHTML=document.getElementById('TFAd2').innerHTML.replace(/messages/,"messages spatio-temporel.");
                </script>
              </div>       
           
              <!-- DERNIER UTILISATEUR ENREGISTRE -->
              <div id="TFAd4">{NEWEST_USER}
                <script type="text/javascript">
                  document.getElementById('TFAd4').innerHTML=document.getElementById('TFAd4').innerHTML.replace(/L'utilisateur enregistré le plus récent est /,"Le dernier voyageur arrivé dans l'un de nos mondes est : ");
                </script> . Nous lui souhaitons tous la bienvenue !
              </div>
     
              <!-- UTILISATEURS EN LIGNE -->
              <span id="TFAd">{TOTAL_USERS_ONLINE}</span>
              <script type="text/javascript">
                document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Il y a en tout /,"En ce moment dans les confins des mondes parallèles il y a ");
                document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/utilisateurs en ligne/,"personnes connectées dont ");
                document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/utilisateur en ligne/,"personne actuellement connectée dont ");
                document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Enregistrés/,"voyageurs du temps  ");
                document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Enregistré/,"voyageur du temps  ");
                document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Invisible et/,"voyageur égaré et  ");
                document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Invisibles et/,"voyageurs égarés et  ");
                document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Invités/,"touristes. ");
                document.getElementById('TFAd').innerHTML=document.getElementById('TFAd').innerHTML.replace(/Invité/,"touriste.  ");
              </script>           

            </div>
          </div>
        </div>
     
        <!-- BLOC DE DROITE (groupes) -->     
        <div class="tfa_d-container2">
          <div class="d-content">
            <h2>Les groupes</h2>
            <div class="in_d-content2">                                   
              <!-- DEBUT GROUPES AVEC TRANSITIONS -->
              <br />       
              <!-- INFOBULLE GROUPE 1 -->
              <div class="d-transition-tfa">
                <img width="60"  src="http://i45.servimg.com/u/f45/11/95/30/70/l710.png" alt="" />
                <div class="d-block_transition"> 
                  <h3>Nom du groupe</h3>
                  <span>
                    Ici les infos qui s'afficheront au survol de l’icône <br />             
                    <a href="lien-groupe">Lien vers le groupe</a>
                  </span>
                </div>
              </div>
              <!-- INFOBULLE GROUPE 2 -->
              <div class="d-transition-tfa">
                <img width="60"  src="http://i45.servimg.com/u/f45/11/95/30/70/l413.png" alt="" />
                <div class="d-block_transition"> 
                  <h3>Nom du groupe</h3>
                  <span>
                    Ici les infos qui s'afficheront au survol de l’icône <br />             
                    <a href="lien-groupe">Lien vers le groupe</a>
                  </span>
                </div>
              </div>         
              <!-- INFOBULLE GROUPE 3 -->
              <div class="d-transition-tfa">
                <img width="60"  src="http://i45.servimg.com/u/f45/11/95/30/70/l510.png" alt="" />
                <div class="d-block_transition"> 
                  <h3>Nom du groupe</h3>
                  <span>
                    Ici les infos qui s'afficheront au survol de l’icône <br />             
                    <a href="lien-groupe">Lien vers le groupe</a>
                  </span>
                </div>
              </div> 
           
              <br />       
              <br style="clear:both;" />
              <!-- INFOBULLE GROUPE 4 -->
              <div class="d-transition-tfa">
                <img width="60"  src="http://i45.servimg.com/u/f45/11/95/30/70/l315.png" alt="" />
                <div class="d-block_transition"> 
                  <h3>Nom du groupe</h3>
                  <span>
                    Ici les infos qui s'afficheront au survol de l’icône <br />             
                    <a href="lien-groupe">Lien vers le groupe</a>
                  </span>
                </div>
              </div>
              <!-- INFOBULLE GROUPE 5 -->
              <div class="d-transition-tfa">
                <img width="60" src="http://i45.servimg.com/u/f45/11/95/30/70/l610.png" alt="" />
                <div class="d-block_transition"> 
                  <h3>Nom du groupe</h3>
                  <span>
                    Ici les infos qui s'afficheront au survol de l’icône <br />             
                    <a href="lien-groupe">Lien vers le groupe</a>
                  </span>
                </div>
              </div>   
              <!-- INFOBULLE GROUPE 6 -->
              <div class="d-transition-tfa">
                <img width="60" src="http://i45.servimg.com/u/f45/11/95/30/70/l116.png" alt="" />
                <div class="d-block_transition"> 
                  <h3>Nom du groupe</h3>
                  <span>
                    Ici les infos qui s'afficheront au survol de l’icône <br />             
                    <a href="lien-groupe">Lien vers le groupe</a>
                  </span>
                </div>
              </div>         
              <!-- FIN INFOBULLES AVEC TRANSITIONS DES GROUPES -->
              <img style="width: 80px; position: absolute; right: -60px; bottom: -60px;" src="http://i48.tinypic.com/2znqutk.png" alt="" />       
              <p style="10px Arial;"> Voir tous tes groupes <a href="TON-LIEN"> <stromg>▶</stromg></a></p>       
              <div style="clear:both;"></div>
            </div>     
          </div>   
        </div> 
     
        <!-- DERNIERS CONNECTES --> 
        <div class="tfa_d-container3"> 
          <div id="bloc_bas_qeel">
              <div id="derniers_connectes">
                <div id="conect-content">
                <span id="TFAd5">{LOGGED_IN_USER_LIST}</span>
                <script type="text/javascript">
                  document.getElementById('TFAd5').innerHTML=document.getElementById('TFAd5').innerHTML.replace(/Utilisateurs enregistrés/,"Ces voyageurs sont là ");</script>
                <table id="TFAd6">{L_CONNECTED_MEMBERS}                         
                  <script type="text/javascript">document.getElementById('TFAd6').innerHTML=document.getElementById('TFAd6').innerHTML.replace(/Membres connectés/,"Ces voyageurs étaient là ");</script>
                </table>
                </div>       
              </div>
            <span id="open_derniers_connectes">Voir les derniers connectés <stromg>▼</stromg></span>     
          </div> 
        </div>
     
        <!-- ANNIVERSAIRES --> 
        <div class="tfa_d-container4">
          <div class="bloc_bas_qeel">
              <div id="d_anniversaires">
                <div id="anniv-content">
                  <table>
                    {L_WHOSBIRTHDAY_TODAY}
                    <span id="TFA2p0">
                      {L_WHOSBIRTHDAY_WEEK}
                      <script type="text/javascript">document.getElementById('TFA2p0').parentNode.innerHTML=document.getElementById('TFA2p0').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Les voyageurs du temps fêtant leur anniversaire aujourd'hui sont").replace(/Membres fêtant leur anniversaire dans les ([0-9]+) prochains jours/,"Voyageurs du temps fêtant leur anniversaire dans les 7 prochains jours").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun voyageur du temps ne fête son anniversaire aujourd'hui").replace(/Aucun membre ne fête son anniversaire dans les ([0-9]+) prochains jours/,"Aucun voyageur du temps ne fête son anniversaire dans les 7 prochains jours");</script>
                    </span>
                  </table>
                </div>
              </div>
            <span id="open_anniversaires">Voir les anniversaires <stromg>▼</stromg></span>
          </div>
        </div> 
        <div style="clear:both;"></div>
     
        <img width="100" src="http://i45.tinypic.com/34s31bk.png" style="position: absolute; bottom: 100px; left: -48px;" alt="" /> 
     
        <!-- BLOC INFORMATIONS -->
        <div id="tfa_d-bas">   
          <div class="d-content">
            <h2>Informations</h2>         
            <div class="in_d-content">       
                <!-- BLOC TRANSITION DE GAUCHE -->
                <div id="bas_d-gauche">
                  <img height="90" src="http://i45.servimg.com/u/f45/11/95/30/70/p513.png" style="position: absolute; right: 0; top: 4px;" alt="" />
                  <div id="bloc_part_qeel">   
                  <ul>
                    <li>
                      <a style="margin-top: 3px;" class="info_link" href="TON-LIEN">Partenariat</a>
                      <div>
                        <p>
                          Tu souhaites devenir l'un de nos partenaires ?
                          Il suffit de faire ta demande ici : <a href="TON-LIEN"> Partenaires </a>,
                          après avoir lu les conditions.                   
                        </p>
                      </div>
                    </li>

                    <li>
                      <a class="info_link" href="TON-LIEN">Membres VIP</a>
                      <div>
                      <p>
                        Le membre VIP est un ancien du staff, un membre actif, un ami...
                        Tu penses mériter ce rang ? Envoie un MP à un admin.
                      </p>
                      </div>
                    </li>

                    <li>
                      <a class="info_link" href="TON-LIEN">Postuler</a>
                      <div>
                      <p>
                        Tu souhaites aider la communauté ? Tu penses avoir l'âme d'un dirigeant ?
                        Fais ta demande ici : <a href="TON-LIEN"> Postuler</a>
                      </p>
                      </div>
                    </li>
                  </ul>     
                  </div>
                </div>
                <!-- BLOC DE DROITE -->
                <div id="bas_d-droite">
                  <p>
                    <table><tr><td>Suivez-nous :</td> <td><a href="http://ritsukoyamaguchi.skyrock.com/1.html"><img src="http://i47.tinypic.com/iz3nzs.png" alt="" /></a> <a href="http://www.youtube.com/user/OfficielHakuoukiRPG"><img src="http://i47.tinypic.com/b6ebr5.png"></a></td></tr></table>
                      <table><tr><td>Nous écrire :</td> <td><a href=mailto:"hakuouki.s.k@hotmail.com"><img src="http://i50.tinypic.com/2aetooo.png"></a></td></tr></table> <span class="Xplo1"> <img src="http://www.pixyup.com/uploads/241836314f6e061f60ef8.png" alt="" /></span>
                      <img style="width: 140px; position: absolute; right: -60px; bottom: 0;" src="http://i45.servimg.com/u/f45/11/95/30/70/s10.png" alt="" />
                  </p>           
                </div>         
                <div style="clear:both;"></div>   
                             
            </div>     
          </div>   
        </div>
        <img width="180" src="http://i49.tinypic.com/2ym8t2w.png" style="position: absolute; bottom: -60px; left: 170px;" alt="" />
      </div>
    </div>
     
    </div>
    <!-- END disable_viewonline -->
    C'est quasi à la toute fin...

    Merci pour ton aide Wink
    MyNameIsTanalia
    MyNameIsTanalia
    FémininAge : 22Messages : 25

    le Mer 19 Sep 2012 - 15:21

    Merci !
    Ruby*
    Ruby*
    FémininAge : 27Messages : 24

    le Jeu 20 Sep 2012 - 21:56

    Merci (a)
    Kaleidoscope
    Kaleidoscope
    FémininAge : 20Messages : 36

    le Jeu 20 Sep 2012 - 22:31

    Merci beaucoup, ça me sera super utile pour ma PA ça ! :3



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 11 553970miku1
    bibi0712
    bibi0712
    FémininAge : 41Messages : 66

    le Ven 21 Sep 2012 - 11:16

    Super les transitions , j'adore les effets que cela donne .
    Merci
    Jabberwock Elyra
    Jabberwock Elyra
    MasculinAge : 25Messages : 44

    le Sam 22 Sep 2012 - 8:14

    Salush^^
    ceci m'intéresse beaucoup
    Merci pour le tuto Wink
    Elena'
    Elena'
    FémininAge : 25Messages : 26

    le Sam 22 Sep 2012 - 10:10

    Wahou c'est un magnifique effet, merci beaucoup !
    Okami
    Okami
    FémininAge : 25Messages : 620

    le Sam 22 Sep 2012 - 22:47

    Woh je cherchais un truc fluide comme ça : Thanx



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 11 Tumblr_m0lmf0oYqf1qbghoko1_500
    x°Okami°x
    crée par => Okami
    Barbosa
    Barbosa
    MasculinAge : 27Messages : 22

    le Dim 23 Sep 2012 - 6:44

    Merci beaucoup :)



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 11 1164232998
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Nov 2019 - 3:15