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 du moment : -17%
(Black Friday) Apple watch Apple SE GPS + Cellular ...
Voir le deal
249 €

    Effet Transition - Infobulle, Rotation et Agrandissement

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

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



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

    Dim 27 Mai - 22:00

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



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

    Lun 28 Mai - 10:00

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

    Mer 30 Mai - 4:01

    Ohhh Oui =D
    merciii



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

    Ven 1 Juin - 15:23

    Merci :3



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

    Sam 2 Juin - 21:16

    Merci



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

    Dim 3 Juin - 19:14

    L'effet est SUBLIME ! Merci !



    :friends:
    avatar
    AQW
    FémininAge : 30Messages : 225

    Lun 4 Juin - 13:44

    Merci !
    Yumi-chan
    Yumi-chan
    FémininAge : 31Messages : 67

    Lun 4 Juin - 19:30

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

    Lun 4 Juin - 21:33

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

    Lun 4 Juin - 23:48

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

    Mar 5 Juin - 19:19

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

    Mer 6 Juin - 8:30

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

    Mer 6 Juin - 16:35

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

    Jeu 7 Juin - 10:08

    J'adore! merci



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

    Ven 8 Juin - 2:42

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

    Ven 8 Juin - 11:23

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

    Sam 9 Juin - 10:43

    merci



    Arrow
    Shirabi
    Shirabi
    MasculinAge : 28Messages : 47

    Sam 9 Juin - 15:53

    Merci!
    Cissy
    Cissy
    FémininAge : 32Messages : 64

    Sam 9 Juin - 22:22

    Merciii !
    RozenBreizh
    RozenBreizh
    FémininAge : 33Messages : 1411

    Dim 10 Juin - 13:23

    Merci pour les code ils sont bien utile et surtout je trouve ça pas commun ^^
    Lacryma
    Lacryma
    FémininAge : 32Messages : 72

    Dim 10 Juin - 17:44

    Merci ^^


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

    Dim 10 Juin - 19: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 : 31Messages : 19

    Lun 11 Juin - 18:11

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

    Mar 12 Juin - 15: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 : 33Messages : 77

    Mar 12 Juin - 18:45

    Merci/Thanks/Arigato
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov - 19:21