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.

Le deal à ne pas rater :
Code promo Cdiscount : 25€ de remise en plus des soldes dès 249€ ...
Voir le deal

    Effet Transition - Infobulle, Rotation et Agrandissement

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

    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 3 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 3 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 3 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 3 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 3 121926034f5e3fbba2a48
    Titevivi-Loveuse
    Titevivi-Loveuse
    FémininAge : 35Messages : 20

    Jeu 3 Mai 2012 - 17:55

    Merci



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 3 Tira11
    りん
    りん
    FémininAge : 28Messages : 73

    Jeu 3 Mai 2012 - 22:02

    Merci pour le partage ♥
    Laps~solutE
    Laps~solutE
    FémininAge : 37Messages : 74

    Ven 4 Mai 2012 - 11:30

    Pas mal... merci Very Happy



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 3 Ban_sl10
    Par notre bon Captain, merci *-* .
    Effet Transition - Infobulle, Rotation et Agrandissement - Page 3 0712270256061917640
    Kana-Chii
    Kana-Chii
    FémininAge : 22Messages : 40

    Ven 4 Mai 2012 - 15:31

    Merci beaucoup, j’étaie justement entrain de chercher ce code.



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 3 2z7g2d10
    Saena
    Saena
    FémininAge : 26Messages : 43

    Sam 5 Mai 2012 - 21:02

    Merci pour les codes!

    L'effet est très sympa, je pars essayer ça ^^
    shala
    shala
    FémininAge : 28Messages : 213

    Sam 5 Mai 2012 - 21:34

    merci



    Ratatouille
    Ratatouille
    FémininAge : 27Messages : 26

    Sam 5 Mai 2012 - 22:42

    merci!! ca semble super
    Amiyah
    Amiyah
    FémininAge : 25Messages : 47

    Dim 6 Mai 2012 - 20:19

    Wahou, c'est magnifique
    Miss Volchok
    Miss Volchok
    FémininAge : 34Messages : 139

    Lun 7 Mai 2012 - 17:55

    Oh j'aime. Je teste, je prends. Merci.
    Ryry
    Ryry
    FémininAge : 33Messages : 435

    Lun 7 Mai 2012 - 20:28

    Ma foi, y a moyen de combiner pour donner de superbes effets ^^ Merci pour le partage Very Happy
    Kael
    Kael
    MasculinAge : 27Messages : 126

    Lun 7 Mai 2012 - 20:45

    Super utile, merci!
    o~°Passion HELL
    o~°Passion HELL
    FémininAge : 32Messages : 214

    Lun 7 Mai 2012 - 23:22

    Merci beaucoup !! ♥



    ....
    P'titbou
    P'titbou
    FémininAge : 24Messages : 42

    Mar 8 Mai 2012 - 14:12

    Merci, le code à l'aire sympas .
    Iςħĩgø
    Iςħĩgø
    MasculinAge : 24Messages : 23

    Mar 8 Mai 2012 - 17:10

    Merci c'est intéressant







    Le mec le + Styléééé
    Oué Je gère héhé


    Effet Transition - Infobulle, Rotation et Agrandissement - Page 3 1307201770013918900
    ´Saiketsu «
    ´Saiketsu «
    MasculinAge : 23Messages : 80

    Mar 8 Mai 2012 - 17:24

    Il a l'air bien ce tuto Wink
    avatar
    Yin
    FémininAge : 23Messages : 43

    Mer 9 Mai 2012 - 18:10

    Waou ça à l'air pas mal ^^
    Moriarty
    Moriarty
    FémininAge : 25Messages : 85

    Jeu 10 Mai 2012 - 15:03

    Oww, merci *A*
    Polka
    Polka
    MasculinAge : 29Messages : 13

    Jeu 10 Mai 2012 - 17:24

    Merci ! Ça claque *-*
    cosv
    cosv
    MasculinAge : 25Messages : 260

    Jeu 10 Mai 2012 - 19:01

    cool
    warning.sign
    warning.sign
    FémininAge : 30Messages : 58

    Ven 11 Mai 2012 - 17:47

    C'est top, merci :)
    ♦ Mari-Jane
    ♦ Mari-Jane
    FémininAge : 28Messages : 39

    Ven 11 Mai 2012 - 19:32

    Merci pour les codes, l'effet est vraiment superbe *.*
    Candy Libertine
    Candy Libertine
    FémininAge : 22Messages : 136

    Ven 11 Mai 2012 - 19:53

    Merci du partage Very Happy
    Tincky
    Tincky
    FémininAge : 23Messages : 8

    Sam 12 Mai 2012 - 10:21

    C'est super jolie ! Merci !
    Daewyn
    Daewyn
    FémininAge : 30Messages : 25

    Dim 13 Mai 2012 - 22:49

    Merci ! :3
    Kendall
    Kendall
    FémininAge : 29Messages : 118

    Lun 14 Mai 2012 - 14:21

    Merci ♥