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.


    Effet Transition - Infobulle, Rotation et Agrandissement

    Xplo-Sion
    Xplo-Sion
    FémininAge : 24Messages : 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 2 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 2 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 2 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 2 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 2 121926034f5e3fbba2a48
    Ui
    Ui
    FémininAge : 24Messages : 16

    le Lun 23 Avr 2012 - 15:36

    Vraiment sympathique comme code. Merci. (:
    Kisuke.U
    Kisuke.U
    MasculinAge : 21Messages : 66

    le Lun 23 Avr 2012 - 17:49

    Intéressant.. Merci !



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 2 649969Laggron2
    Sparkling Sky
    Sparkling Sky
    FémininAge : 32Messages : 48

    le Lun 23 Avr 2012 - 23:49

    j'adore ! je cherchais depuis un moment, merci !
    Jae Joong
    Jae Joong
    MasculinAge : 30Messages : 34

    le Mar 24 Avr 2012 - 4:07

    Merci per le tuto ^^
    Mitsuomi Takayanagi
    Mitsuomi Takayanagi
    Age : 27Messages : 76

    le Mar 24 Avr 2012 - 13:12

    Merci beaucoup =)



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 2 Bannol1xj5
    Chaussette
    Chaussette
    FémininAge : 26Messages : 59

    le Mar 24 Avr 2012 - 16:29

    Superbe ! Merci. *O*
    Del
    Del
    MasculinMessages : 110

    le Mar 24 Avr 2012 - 19:09

    Merci du partage.



    « Run you clever boy and remember... »
    phinolex
    phinolex
    MasculinAge : 19Messages : 63

    le Mer 25 Avr 2012 - 20:08

    C'est génial <3
    XXB
    XXB
    MasculinAge : 25Messages : 34

    le Mer 25 Avr 2012 - 22:00

    Mercii *o*
    Lady Doll
    Lady Doll
    FémininAge : 30Messages : 101

    le Mer 25 Avr 2012 - 22:26

    merciiii *o*
    vodkaspazz
    vodkaspazz
    FémininAge : 27Messages : 40

    le Jeu 26 Avr 2012 - 12:44

    Superbe code ♥
    Shizuka
    Shizuka
    FémininAge : 25Messages : 3

    le Ven 27 Avr 2012 - 12:20

    Wouhaou je suis en admiration *.* J'adore tes infobulles qui tournent et apparaissent ♥
    Zouzou
    Zouzou
    FémininAge : 20Messages : 19

    le Ven 27 Avr 2012 - 15:32

    Enfin des infobulles, merci encore !
    Messa
    Messa
    FémininAge : 23Messages : 24

    le Ven 27 Avr 2012 - 16:08

    J'adore emrci !




    Effet Transition - Infobulle, Rotation et Agrandissement - Page 2 Messas
    Caldinia
    Caldinia
    FémininAge : 21Messages : 7

    le Ven 27 Avr 2012 - 20:43

    J'ai toujours trouvé ça très marrant comme transitions.
    Je vais jeter un coup d'oeil, merci bien Wink
    Soul
    Soul
    MasculinAge : 23Messages : 1723

    le Ven 27 Avr 2012 - 21:18

    Ouha super cool merci jeune homme x)
    Xplo-Sion
    Xplo-Sion
    FémininAge : 24Messages : 266

    le Ven 27 Avr 2012 - 23:10

    Regarde mon profil, Brain :)



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 2 121926034f5e3fbba2a48
    Elimona
    Elimona
    FémininAge : 23Messages : 892

    le Dim 29 Avr 2012 - 15:11

    Merci pour le partage, surtout pour les derniers exemples qui sont sympas :)
    Cristallou
    Cristallou
    FémininAge : 22Messages : 54

    le Dim 29 Avr 2012 - 18:35

    Ce code m'a l'air sympa je poste pour en voir un peu plus ^^



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 2 502700TaoCarapuce
    Métaphore.
    Métaphore.
    FémininAge : 26Messages : 7

    le Dim 29 Avr 2012 - 22:11

    Très intéréssant merci ! (:



      ❝you jump, I jump❞
      Now you know that there was a man named Jack Dawson and he saved me, in every way a person can be saved. I don’t even have a picture of him. He exists now only in my memory
    Byakuya Kuonki
    Byakuya Kuonki
    MasculinAge : 20Messages : 107

    le Dim 29 Avr 2012 - 23:17

    Pas mal en effet, je pense m'en servir. Merci ! Very Happy
    JeHwa
    JeHwa
    FémininAge : 24Messages : 34

    le Lun 30 Avr 2012 - 12:39

    ça pourrait me servir tiens. merci pour le partage des codes ♥.




    Jimmy
    Jimmy
    MasculinAge : 24Messages : 166

    le Mar 1 Mai 2012 - 17:37

    J'adore !
    Yesterday
    Yesterday
    FémininAge : 24Messages : 57

    le Mer 2 Mai 2012 - 20:28

    Merci beaucoup!! Very Happy
    Honey
    Honey
    FémininAge : 27Messages : 57

    le Jeu 3 Mai 2012 - 15:58

    Code très intéressant Very Happy Merci :heart:
    Contenu sponsorisé


      La date/heure actuelle est Jeu 20 Juin 2019 - 9:52