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 - 6: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 5 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 5 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 5 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 5 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 - 9:28, édité 1 fois



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 5 121926034f5e3fbba2a48
    Dreamzz
    Dreamzz
    FémininAge : 25Messages : 30

    le Lun 28 Mai 2012 - 2:00

    Wah, le résultat est vachement classe!
    Merci du partage *p*



    Juliette, oh!
    avatar
    KanyeWest
    MasculinAge : 28Messages : 137

    le Lun 28 Mai 2012 - 14:00

    Merci beaucoup
    Zarwins
    Zarwins
    FémininAge : 23Messages : 155

    le Mer 30 Mai 2012 - 8:01

    Ohhh Oui =D
    merciii



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 5 121217030106243656
    Stanislava
    Stanislava
    FémininAge : 23Messages : 102

    le Ven 1 Juin 2012 - 19:23

    Merci :3



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 5 777748signnu
    Hisoka
    Hisoka
    MasculinAge : 31Messages : 224

    le Dim 3 Juin 2012 - 1:16

    Merci



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 5 Kitulqui2
    Mymz
    Mymz
    FémininAge : 27Messages : 24

    le Dim 3 Juin 2012 - 23:14

    L'effet est SUBLIME ! Merci !



    :friends:
    AQW
    AQW
    FémininAge : 24Messages : 224

    le Lun 4 Juin 2012 - 17:44

    Merci !



    Blblbl. ♥
    Yumi-chan
    Yumi-chan
    FémininAge : 26Messages : 67

    le Lun 4 Juin 2012 - 23:30

    Trop génial ! =)
    Merci beaucoup !
    Tchi
    Tchi
    FémininAge : 26Messages : 40

    le Mar 5 Juin 2012 - 1:33

    Merci pour ce code, il a l'air intéressant (o(
    Anonymous
    Invité

    le Mar 5 Juin 2012 - 3:48

    Merci beaucoup de partager. =)
    People Are Strange
    People Are Strange
    FémininAge : 32Messages : 29

    le Mar 5 Juin 2012 - 23:19

    merci ! *-*
    exotic
    exotic
    FémininAge : 27Messages : 5

    le Mer 6 Juin 2012 - 12:30

    Merci Very Happy
    Kabrina Lestrange
    Kabrina Lestrange
    FémininAge : 31Messages : 71

    le Mer 6 Juin 2012 - 20:35

    Hm intéressant! Je voudrais en savoir plus! Razz
    Win
    Win
    Age : 26Messages : 114

    le Jeu 7 Juin 2012 - 14:08

    J'adore! merci



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 5 Spiritxz4
    Tamashi
    Tamashi
    MasculinAge : 23Messages : 57

    le Ven 8 Juin 2012 - 6:42

    merci :)
    oceansoul
    oceansoul
    FémininAge : 28Messages : 22

    le Ven 8 Juin 2012 - 15:23

    C'est un super code
    Merci :love:
    Kreazen
    Kreazen
    FémininAge : 22Messages : 46

    le Sam 9 Juin 2012 - 14:43

    merci



    Arrow
    Shirabi
    Shirabi
    MasculinAge : 22Messages : 47

    le Sam 9 Juin 2012 - 19:53

    Merci!
    Cissy
    Cissy
    FémininAge : 26Messages : 63

    le Dim 10 Juin 2012 - 2:22

    Merciii !
    Rozenbrez
    Rozenbrez
    FémininAge : 27Messages : 1383

    le Dim 10 Juin 2012 - 17:23

    Merci pour les code ils sont bien utile et surtout je trouve ça pas commun ^^

    Lacryma
    Lacryma
    FémininAge : 27Messages : 72

    le Dim 10 Juin 2012 - 21:44

    Merci ^^


    Dernière édition par Lacryma le Lun 11 Juin 2012 - 14:03, édité 1 fois
    Jeanne
    Jeanne
    FémininAge : 22Messages : 95

    le Dim 10 Juin 2012 - 23:00

    Haaaaaaaaaaaaaaaaan merciiiiiiiiiiiiiiiiiiiii, je cherche à faire ça depuis super longtemps !
    Tu sais que je t'adore ♥ Je te garde une place sur ma PA.



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 5 Chloe-Moretz-Dark-Shadows-gif-by-jimmy-fungus
    Leean
    Leean
    FémininAge : 25Messages : 19

    le Lun 11 Juin 2012 - 22:11

    Je cherche comment faire ça depuis si longtemps T__T
    Merci : D
    Depp
    Depp
    FémininAge : 28Messages : 298

    le Mar 12 Juin 2012 - 19:44

    Je sens que cela va m'être utile Very Happy Merci



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 5 Tumblr_nenygwIlcz1s4u464o1_500
    Elricka
    Elricka
    MasculinAge : 28Messages : 77

    le Mar 12 Juin 2012 - 22:45

    Merci/Thanks/Arigato
    Contenu sponsorisé


      La date/heure actuelle est Jeu 20 Juin 2019 - 11:02