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 : 25Messages : 266

    le Ven 20 Avr 2012 - 2: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 21 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 21 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 21 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 21 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 - 5:28, édité 1 fois



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 21 121926034f5e3fbba2a48
    Ouat
    Ouat
    FémininAge : 35Messages : 74

    le Sam 17 Jan 2015 - 9:03

    Merci !
    Kalypso San
    Kalypso San
    FémininAge : 23Messages : 21

    le Jeu 22 Jan 2015 - 13:39

    Ty



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 21 4keb

    Liens / Contacts:
                Effet Transition - Infobulle, Rotation et Agrandissement - Page 21 Pese            Effet Transition - Infobulle, Rotation et Agrandissement - Page 21 Q55l

            Effet Transition - Infobulle, Rotation et Agrandissement - Page 21 0lu2

                Effet Transition - Infobulle, Rotation et Agrandissement - Page 21 DfvqEffet Transition - Infobulle, Rotation et Agrandissement - Page 21 Pf5lEffet Transition - Infobulle, Rotation et Agrandissement - Page 21 W6qlEffet Transition - Infobulle, Rotation et Agrandissement - Page 21 Inef
    Klemmeria
    Klemmeria
    FémininAge : 19Messages : 147

    le Mer 4 Fév 2015 - 20:03

    merchi



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 21 Btqy
    Bellabimbo444
    Bellabimbo444
    FémininAge : 21Messages : 61

    le Sam 9 Mai 2015 - 13:48

    merci:



    Choko
    Choko
    FémininAge : 19Messages : 61

    le Dim 10 Mai 2015 - 12:35

    Arigatou ! /o/
    Prince Of Spades
    Prince Of Spades
    MasculinAge : 25Messages : 50

    le Sam 23 Mai 2015 - 4:19

    Merci ! Cool
    Dayaxa
    Dayaxa
    FémininAge : 25Messages : 60

    le Jeu 11 Juin 2015 - 13:25

    super ! <3



    Bloup.
    Anonymous
    Invité

    le Ven 12 Juin 2015 - 7:06

    Merci cela devrait me servir ^^
    cynical-echo
    cynical-echo
    FémininAge : 22Messages : 41

    le Sam 13 Juin 2015 - 11:06

    Merci ! \o/
    Neiko Seiteki
    Neiko Seiteki
    MasculinAge : 23Messages : 44

    le Ven 17 Juil 2015 - 17:28

    Merci beaucoup :3
    Hana Evali
    Hana Evali
    FémininAge : 29Messages : 179

    le Mar 21 Juil 2015 - 20:38

    merci ^^





    Je joue
    • ♚ Kili
    • ♚Ianto Jones
    • ♚ Thor Odinson
    • ♚ James T. Kirk
    J'anime
    • ♚ Les intrigues
    • ♚ Les soirées CB
    • ♚ Les événements
    • ♚ Le flood/les jeux


    Storminder
    Storminder
    MasculinAge : 23Messages : 56

    le Dim 26 Juil 2015 - 2:20

    Merci beaucoup Very Happy
    Allèle
    Allèle
    FémininAge : 26Messages : 56

    le Jeu 30 Juil 2015 - 13:11

    merci
    poloch
    poloch
    MasculinAge : 25Messages : 109

    le Mar 4 Aoû 2015 - 9:43

    Merci Very Happy



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 21 Sans_t12
    Kelalin
    Kelalin
    FémininAge : 26Messages : 2072

    le Mar 4 Aoû 2015 - 12:12

    Merci ! ヽ(;▽;)ノ
    Choucroute Mozzarella
    Choucroute Mozzarella
    FémininAge : 22Messages : 40

    le Sam 5 Sep 2015 - 22:17

    Merci ! par contre les exemples ne marchent plus D:
    Broken Lullaby
    Broken Lullaby
    FémininAge : 24Messages : 12

    le Jeu 22 Oct 2015 - 16:34

    Merci pour le partage ! Very Happy
    SvenO
    SvenO
    MasculinAge : 25Messages : 78

    le Dim 8 Nov 2015 - 23:13

    Merci ! Very Happy



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 21 703037Bann
    Nyotengu
    Nyotengu
    FémininAge : 25Messages : 85

    le Lun 9 Nov 2015 - 16:54

    Merci
    Asphebeä
    Asphebeä
    FémininAge : 25Messages : 17

    le Jeu 12 Nov 2015 - 1:23

    Merci merci ! /o
    sweetheart.
    sweetheart.
    FémininAge : 31Messages : 120

    le Ven 18 Déc 2015 - 15:07

    Merci



    Un bisou pour Invité


    Un bisou pour...
    Invité
    Mahogany
    Mahogany
    FémininAge : 26Messages : 54

    le Lun 21 Déc 2015 - 16:34

    merci!
    Kobye
    Kobye
    FémininAge : 22Messages : 37

    le Lun 28 Déc 2015 - 1:44

    merci bien que les exemples soient morts xD
    Youp
    Youp
    FémininAge : 24Messages : 579

    le Lun 28 Déc 2015 - 2:56

    Merci !



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 21 262632clip20160315at092522
    Nishiki
    Nishiki
    FémininAge : 21Messages : 325

    le Lun 28 Déc 2015 - 18:44

    merci



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 21 Head19
    Contenu sponsorisé


      La date/heure actuelle est Mar 23 Juil 2019 - 11:00