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 :
Manga Chainsaw Man : où acheter le Tome 17 ...
Voir le deal
19.99 €

    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 20 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 20 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 20 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 20 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 20 121926034f5e3fbba2a48
    O'Daim
    O'Daim
    FémininAge : 28Messages : 116

    Dim 6 Avr 2014 - 11:13

    Merci pour les codes !
    ColorTime'Less
    ColorTime'Less
    FémininAge : 26Messages : 106

    Lun 14 Avr 2014 - 18:52

    merci du partage !
    Anonymous
    Invité

    Jeu 17 Avr 2014 - 13:59

    Je suis curieux, merci :)
    Kraken
    Kraken
    FémininAge : 31Messages : 137

    Dim 20 Avr 2014 - 21:25

    Merci du partage ! ♥
    Stiou
    Stiou
    FémininAge : 30Messages : 42

    Mer 23 Avr 2014 - 20:01

    Ah ça c'est super pratique *-*
    Merci !



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 20 Dany12
    Théandras
    Théandras
    FémininAge : 23Messages : 25

    Jeu 1 Mai 2014 - 19:24

    j'aimerais bien voir tout ça !!
    merci d'y partager
    Hippopotame
    Hippopotame
    FémininAge : 110Messages : 32

    Dim 4 Mai 2014 - 19:24

    Merci beaucoup ! Very Happy
    Glow
    Glow
    FémininAge : 24Messages : 94

    Mer 18 Juin 2014 - 17:14

    Merci beaucoup ~
    Hippopotame
    Hippopotame
    FémininAge : 110Messages : 32

    Mer 23 Juil 2014 - 17:13

    Exactement ce que je recherchais merci beaucoup !
    Jeff`22
    Jeff`22
    MasculinAge : 23Messages : 34

    Ven 25 Juil 2014 - 13:18

    Merci OwO
    Raven Sumire
    Raven Sumire
    FémininAge : 30Messages : 43

    Sam 2 Aoû 2014 - 11:38

    Merci beaucoup :3
    Bzzzz
    Bzzzz
    FémininAge : 39Messages : 88

    Ven 29 Aoû 2014 - 22:15

    Merci beaucoup
    Mangédéfruiélégumeuh
    Mangédéfruiélégumeuh
    MasculinAge : 26Messages : 83

    Jeu 11 Sep 2014 - 23:17

    Merci Very Happy
    Deobryn
    Deobryn
    MasculinAge : 29Messages : 39

    Ven 19 Sep 2014 - 15:11

    Merci pour le partage ! :)
    Kathlyn
    Kathlyn
    FémininAge : 27Messages : 33

    Lun 20 Oct 2014 - 12:43

    merci =)
    Zaidko
    Zaidko
    FémininAge : 21Messages : 81

    Jeu 30 Oct 2014 - 0:47

    Merci du partage ! Very Happy
    Kaamee
    Kaamee
    FémininAge : 28Messages : 110

    Jeu 6 Nov 2014 - 17:46

    Merci o/



    Dragma
    Dragma
    MasculinAge : 28Messages : 65

    Lun 10 Nov 2014 - 18:36

    Merci :)

    Ab0utxMe
    Ab0utxMe
    FémininAge : 29Messages : 186

    Ven 14 Nov 2014 - 17:32

    Merci :3



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 20 878302signaturevegeta
    Zoé
    Zoé
    FémininAge : 24Messages : 189

    Ven 14 Nov 2014 - 20:42

    micii ♥



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 20 274643signaaaa
    lelie25
    lelie25
    FémininAge : 31Messages : 160

    Dim 23 Nov 2014 - 13:45

    je vais tester
    Kimberlay *
    Kimberlay *
    FémininAge : 33Messages : 161

    Mer 26 Nov 2014 - 12:55

    Merci beaucoup
    Sophia
    Sophia
    FémininAge : 29Messages : 44

    Dim 30 Nov 2014 - 11:33

    merci du partage !
    Kanu
    Kanu
    FémininAge : 34Messages : 62

    Mar 16 Déc 2014 - 23:36

    merci ! :3
    LKD
    LKD
    FémininAge : 33Messages : 22

    Mar 6 Jan 2015 - 0:35

    merci cela à l'air intéressant :love:
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 3:27