AccueilDernières imagesRechercherS'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 :
Manga Chainsaw Man : où acheter le Tome 17 édition Collector de ...
19.99 €
Voir le deal

    Effet Transition - Infobulle, Rotation et Agrandissement

    Xplo-Sion
    Xplo-Sion
    FémininAge : 29Messages : 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 4 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 4 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 4 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 4 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 4 121926034f5e3fbba2a48
    Jaekwang
    Jaekwang
    MasculinAge : 30Messages : 27

    Lun 14 Mai 2012 - 15:15

    wow, merci ! *o*
    Riingo
    Riingo
    FémininAge : 27Messages : 17

    Lun 14 Mai 2012 - 18:03

    Merci du partage ! >w<
    Onitsuki
    Onitsuki
    FémininAge : 34Messages : 6

    Mar 15 Mai 2012 - 11:25

    Merci °3°
    Rin Nikky
    Rin Nikky
    FémininAge : 24Messages : 37

    Mar 15 Mai 2012 - 12:55

    Merci pour le partage ~
    NYN
    NYN
    FémininAge : 32Messages : 13

    Mar 15 Mai 2012 - 15:13

    Merci de proposer ce code, j'adore l'effet rotation :love:



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 4 Jack-Sparrow-GIF-johnny-depp-22453635-500-200
    Domichi
    Domichi
    FémininAge : 30Messages : 30

    Mar 15 Mai 2012 - 15:58

    Merci beaucoup pour ce tuto :3
    Motoko
    Motoko
    FémininAge : 25Messages : 39

    Mar 15 Mai 2012 - 17:41

    Merchhhhi ^^
    Anonymous
    Invité

    Mer 16 Mai 2012 - 16:04

    Just awesome ♥
    Merci :3
    nuanciel
    nuanciel
    FémininAge : 32Messages : 139

    Mer 16 Mai 2012 - 17:37

    Merciiiiiiiiii :toto:
    Guigui
    Guigui
    FémininAge : 28Messages : 13

    Jeu 17 Mai 2012 - 17:28

    Merci !
    Sweety.G
    Sweety.G
    FémininAge : 30Messages : 37

    Jeu 17 Mai 2012 - 20:07

    Merci beaucoup pour ce tuto Very Happy

    Je voulais juste savoir, ton code ne marche pas pour les avatar?
    En faite, je souhaitais que lorsque l'on passait la sourie sur l'avatar il fasse une légère rotation...
    Est-ce possible ou pas du tout Very Happy ?

    Merci beaucoup en tout cas Very Happy
    Vine
    Vine
    FémininAge : 34Messages : 9

    Jeu 17 Mai 2012 - 21:58

    Merci beaucoup pour le partage, c'est d'une grande utilité ! :hug:
    Erebe
    Erebe
    FémininAge : 30Messages : 25

    Ven 18 Mai 2012 - 0:10

    Merci beaucoup 8D
    Catalane
    Catalane
    FémininAge : 30Messages : 110

    Ven 18 Mai 2012 - 19:49

    Merci pour le tuto qui est super bien expliquer ^^
    Il va bien me servir



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 4 Cat2r
    Marwen
    Marwen
    FémininAge : 30Messages : 25

    Ven 18 Mai 2012 - 23:52

    Merci pour le partage =D
    TiBiscuit
    TiBiscuit
    FémininAge : 31Messages : 4

    Dim 20 Mai 2012 - 1:04

    merci beaucoup :love:
    Lauriale
    Lauriale
    FémininAge : 27Messages : 113

    Dim 20 Mai 2012 - 15:27

    Merci pour ce tuto qui m'a l'air très utile !
    Keith
    Keith
    MasculinAge : 32Messages : 37

    Dim 20 Mai 2012 - 23:33

    Merci :B
    Ariess
    Ariess
    MasculinAge : 25Messages : 44

    Lun 21 Mai 2012 - 0:06

    Je cherchais comment faire ! Very Happy
    Merci beaucoup !



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 4 XhCUWz4
    TUC
    TUC
    FémininAge : 36Messages : 103

    Lun 21 Mai 2012 - 11:51

    je poste pour voir a quoi ça ressemble ça m'a l'air très intéressant comme rendu :)

    en tout cas merci de nous le faire partager Wink



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 4 Tumblr_msx9fygOsJ1qlujrso1_250 Effet Transition - Infobulle, Rotation et Agrandissement - Page 4 Tumblr_msx9fygOsJ1qlujrso2_250 Effet Transition - Infobulle, Rotation et Agrandissement - Page 4 Tumblr_msx9fygOsJ1qlujrso3_250 Effet Transition - Infobulle, Rotation et Agrandissement - Page 4 Tumblr_msx9fygOsJ1qlujrso4_250
    Cocow'
    Cocow'
    FémininAge : 26Messages : 11

    Lun 21 Mai 2012 - 15:35

    Merci pour le code~
    Solstice
    Solstice
    MasculinAge : 40Messages : 72

    Mar 22 Mai 2012 - 9:19

    Merci pour le partage Wink
    Ersatz.
    Ersatz.
    MasculinAge : 30Messages : 26

    Mar 22 Mai 2012 - 14:22

    Merci pour ces codes on va voir ce que ça donne Very Happy
    ELLAENYS
    ELLAENYS
    FémininAge : 38Messages : 127

    Jeu 24 Mai 2012 - 21:17

    Merci pour les codes :love:



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 4 478222tumblrm03ndpsPY21qb5heyo3r2500
    Ashouille
    Ashouille
    FémininAge : 34Messages : 47

    Sam 26 Mai 2012 - 13:44

    Merci ! Merci ! Et Merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 11:08