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.

-12%
Le deal à ne pas rater :
Apple MacBook Air (2020) 13,3″ au meilleur prix
999 € 1129 €
Voir le deal
Le Deal du moment : -29%
TV TCL 50C721 (2021) – QLED, 4K – ...
Voir le deal
374.99 €

    Effet Transition - Infobulle, Rotation et Agrandissement

    Xplo-Sion
    Xplo-Sion
    FémininAge : 27Messages : 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 22 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 22 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 22 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 22 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 22 121926034f5e3fbba2a48
    Azzuen
    Azzuen
    FémininAge : 23Messages : 61

    Ven 1 Jan 2016 - 0:16

    merci!
    Myosotis
    Myosotis
    FémininAge : 21Messages : 101

    Ven 1 Jan 2016 - 14:56

    Merci :)
    Lamire
    Lamire
    FémininAge : 28Messages : 96

    Ven 26 Fév 2016 - 1:40

    merci
    beza
    beza
    FémininAge : 25Messages : 47

    Dim 28 Fév 2016 - 14:57

    Merci !
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 53Messages : 167

    Mar 12 Avr 2016 - 1:17

    Merci
    Pucky
    Pucky
    FémininAge : 24Messages : 44

    Jeu 21 Avr 2016 - 23:16

    Merci :)
    M.O
    M.O
    MasculinAge : 31Messages : 51

    Mar 24 Mai 2016 - 4:04

    Merci!
    Nyroc
    Nyroc
    MasculinAge : 19Messages : 58

    Jeu 2 Juin 2016 - 20:55

    Merci ^^



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 22 1-3_mi10
    Lessien
    Lessien
    FémininAge : 39Messages : 163

    Dim 12 Juin 2016 - 16:58

    Merci Wink
    neurosis
    neurosis
    MasculinAge : 24Messages : 6

    Lun 20 Juin 2016 - 20:25

    Merci !
    Shakumiro
    Shakumiro
    MasculinAge : 24Messages : 8

    Mar 5 Juil 2016 - 18:54

    La preview ne fonctionne plus c'est possible de le mettre à jour pour voir le résultat ? Merci en tous cas pour le code
    Asarigolo
    Asarigolo
    MasculinAge : 28Messages : 29

    Mer 13 Juil 2016 - 9:19

    Merci.
    Kain A. Alaude
    Kain A. Alaude
    MasculinAge : 29Messages : 31

    Lun 1 Aoû 2016 - 4:03

    Merci !
    MeowLowDee
    MeowLowDee
    FémininAge : 30Messages : 72

    Ven 5 Aoû 2016 - 17:56

    Mercii Very Happy
    Elwing
    Elwing
    FémininAge : 30Messages : 86

    Dim 14 Aoû 2016 - 13:51

    Envie de voir... Merci ! ^^
    Ziktaon
    Ziktaon
    MasculinAge : 29Messages : 843

    Sam 24 Sep 2016 - 20:35

    Merci



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 22 719846zikisigna



    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    Star Rock Shooter
    Star Rock Shooter
    MasculinAge : 24Messages : 11

    Sam 8 Oct 2016 - 23:53

    Merci beaucoup ! :bisou:
    Froufy
    Froufy
    FémininAge : 21Messages : 59

    Jeu 20 Oct 2016 - 10:28

    C'est sympa! Merci^^



    1+1= 4
          2
    3
    peculiar soldat
    peculiar soldat
    FémininAge : 26Messages : 5

    Lun 21 Nov 2016 - 17:34

    Malheureusement les exemples ne sont plus visibles, mais merci du partage. :face:
    Arisu
    Arisu
    FémininAge : 33Messages : 116

    Mer 30 Nov 2016 - 17:53

    Merci !
    Ryuu
    Ryuu
    FémininAge : 27Messages : 61

    Ven 16 Déc 2016 - 1:15

    Merci



    Omys
    Omys
    FémininAge : 26Messages : 63

    Mer 21 Déc 2016 - 10:59

    merci !
    Whisperinette
    Whisperinette
    FémininAge : 29Messages : 22

    Mer 5 Avr 2017 - 9:48

    Merci ! Je ne sais pas pourquoi j'arrive jamais à me rentrer dans la caboche cette manip... Du coup double merci pour cette piqûre de rappel !
    PrincesseÔ
    PrincesseÔ
    FémininAge : 24Messages : 220

    Mar 25 Avr 2017 - 12:45

    Merci infiniment pour ce tutoriel, parce que je cherchais désespérément à comprendre comment faire certains effets ! =)
    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Nov 2021 - 21:15