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 6 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 6 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 6 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 6 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 6 121926034f5e3fbba2a48
    Crépuscule de Lune
    Crépuscule de Lune
    FémininAge : 30Messages : 75

    le Mer 13 Juin 2012 - 21:07

    Merci beaucoup je connaissais bien, mais je n'ai encore jamais testé sur un design ham1




    Sunnie
    Sunnie
    FémininAge : 21Messages : 13

    le Ven 15 Juin 2012 - 18:42

    Je trouve ça génial, merci beaucoup. (:
    Bleed Like Me
    Bleed Like Me
    FémininAge : 27Messages : 17

    le Sam 16 Juin 2012 - 16:06

    Je testerai sûrement un jour, merci =D
    Aoi Kiseki
    Aoi Kiseki
    FémininAge : 27Messages : 105

    le Sam 16 Juin 2012 - 16:31

    merci
    Ambra Alesi
    Ambra Alesi
    FémininAge : 23Messages : 2

    le Sam 16 Juin 2012 - 23:48

    merci pour ce tuto !
    Nell
    Nell
    FémininAge : 25Messages : 22

    le Dim 17 Juin 2012 - 15:37

    Merci pour le tuto, il a l'air intéressant ! :)
    Kagami Tsuki
    Kagami Tsuki
    MasculinAge : 23Messages : 14

    le Lun 18 Juin 2012 - 0:44

    Merci Very Happy
    Aslinn
    Aslinn
    FémininAge : 21Messages : 21

    le Lun 18 Juin 2012 - 22:21

    Wahowh, ça faisait longtemps que je cherchais quelque chose dans ce style.
    Merci beaucoup pour ce code !
    Louise K. Jay
    Louise K. Jay
    FémininAge : 25Messages : 64

    le Jeu 21 Juin 2012 - 15:07

    Oh très joli code *0*
    servity
    servity
    MasculinAge : 47Messages : 82

    le Ven 22 Juin 2012 - 1:46

    merci



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 6 HadqjCkktw
    Ryosaki
    Ryosaki
    MasculinAge : 26Messages : 109

    le Ven 22 Juin 2012 - 9:45

    merci



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 6 Tutog
    Kyoraku Shunsui
    Kyoraku Shunsui
    MasculinAge : 25Messages : 864

    le Sam 23 Juin 2012 - 22:05

    Super code, merci !
    Ju' de fruits
    Ju' de fruits
    FémininAge : 25Messages : 82

    le Dim 24 Juin 2012 - 17:37

    Mercii



    Alonely
    Alonely
    MasculinAge : 24Messages : 43

    le Dim 24 Juin 2012 - 17:50

    Merci !
    Lylinee
    Lylinee
    FémininAge : 29Messages : 26

    le Dim 24 Juin 2012 - 19:26

    Merci beaucoup pour ce code depuis le temps que je le cherche =)



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 6 Sign113
    kingyo-chan
    kingyo-chan
    FémininAge : 22Messages : 61

    le Lun 25 Juin 2012 - 15:23

    Ca a l'air bien ça *Q* Merci~



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 6 1207060340227226510069188
    CN.June
    CN.June
    FémininAge : 55Messages : 314

    le Mar 26 Juin 2012 - 15:26

    Merci beaucoup :'D
    Killike
    Killike
    FémininAge : 24Messages : 33

    le Mer 27 Juin 2012 - 0:04

    Nyah merci du code j'adore!



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 6 Essaie4
    Metamorphe
    Metamorphe
    FémininAge : 25Messages : 17

    le Mer 27 Juin 2012 - 11:04

    merci ♥
    Reira-Sama
    Reira-Sama
    FémininAge : 26Messages : 190

    le Mer 27 Juin 2012 - 13:29

    sympa j'aime les effets <3
    AwTch
    AwTch
    MasculinAge : 23Messages : 3

    le Jeu 28 Juin 2012 - 18:45

    Merci du tuto.
    Anonymous
    Invité

    le Ven 29 Juin 2012 - 22:28

    Merci
    Givrix
    Givrix
    MasculinAge : 22Messages : 203

    le Sam 30 Juin 2012 - 12:15

    Merci :)



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 6 713484123
    Super Captain
    Super Captain
    MasculinAge : 27Messages : 33

    le Dim 1 Juil 2012 - 12:15

    merdi du partage :)



    i m j u s t a p a t c h e d u p マトリョシカ! (o`皿′o)♥
    Effet Transition - Infobulle, Rotation et Agrandissement - Page 6 Tumblr_lmqy8iZxzx1qam1cxo1_500
    Josh W. Irkès
    Josh W. Irkès
    MasculinAge : 22Messages : 14

    le Dim 1 Juil 2012 - 12:34

    Merci Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Avr 2019 - 2:27