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 : -21%
LEGO® Icons 10329 Les Plantes Miniatures, ...
Voir le deal
39.59 €

    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 16 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 16 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 16 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 16 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 16 121926034f5e3fbba2a48
    samael
    samael
    MasculinAge : 46Messages : 15

    Mar 23 Avr 2013 - 18:50

    merci
    Alinoé
    Alinoé
    FémininAge : 32Messages : 35

    Mer 24 Avr 2013 - 18:41

    Merci ! :)
    LightGlace
    LightGlace
    FémininAge : 31Messages : 43

    Jeu 25 Avr 2013 - 19:30

    merci
    Tagada Choupy
    Tagada Choupy
    FémininAge : 26Messages : 39

    Jeu 25 Avr 2013 - 20:25

    Merci ! Ça m'a l'air intéressant... Je veux en voir plus !!
    Eoleum
    Eoleum
    FémininAge : 32Messages : 15

    Ven 26 Avr 2013 - 20:49

    Merci !
    Mais ça ne marche pas. Même sur ton site test. Je suis sur GC (si ça peut être utile).
    Chione
    Chione
    MasculinAge : 23Messages : 397

    Sam 27 Avr 2013 - 12:28

    Merci !



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 16 1435969469-signd
    FEZ!FEZ!
    Effet Transition - Infobulle, Rotation et Agrandissement - Page 16 150804081846482087
    lemondekawaii
    lemondekawaii
    FémininAge : 22Messages : 1

    Sam 11 Mai 2013 - 15:33

    merci !
    Kunie Lunie
    Kunie Lunie
    FémininAge : 23Messages : 16

    Sam 11 Mai 2013 - 18:44

    Merci !
    Sinavlia
    Sinavlia
    FémininAge : 26Messages : 158

    Sam 11 Mai 2013 - 21:44

    Merci pour le code, je crois que ça m'intéresse Wink



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 16 Grec10
    Masterweb80
    Masterweb80
    FémininAge : 35Messages : 129

    Dim 12 Mai 2013 - 19:25

    Merci
    Schnappi
    Schnappi
    FémininAge : 32Messages : 113

    Mar 21 Mai 2013 - 16:24

    le code ne marche plus sur les exemples mais je veux bien voir :)
    Feng.Yi
    Feng.Yi
    FémininAge : 109Messages : 30

    Mer 22 Mai 2013 - 21:22

    Merci
    Crucible
    Crucible
    FémininAge : 34Messages : 36

    Mer 22 Mai 2013 - 21:41

    Un gros merci pour tout ça ! Very Happy



    « ONCE, I DUG A PIT AND FILLED IT WITH CLOUDS. OR WAS IT CLOWNS ?
    DOESN'T MATTER. IT DIDN'T SLOW HIM DOWN.
    TO BE HONEST, IT WASN'T THE BEST IDEA.
    AND IT REALLY BEGAN TO SMELL. MUST HAVE BEEN CLOWNS.
    CLOUDS DON'T SMELL BAD. THEY TASTE OF BUTTER ! AND TEARS.
    »
    Justeen
    Justeen
    FémininAge : 32Messages : 30

    Ven 24 Mai 2013 - 8:52

    Merci !
    Crystal Shadow
    Crystal Shadow
    FémininAge : 40Messages : 29

    Sam 25 Mai 2013 - 12:38

    Merci Very Happy
    misssrubi
    misssrubi
    FémininAge : 32Messages : 66

    Lun 27 Mai 2013 - 14:34

    Merci :)



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 16 Green_10
    OMJ
    OMJ
    FémininAge : 33Messages : 92

    Mar 28 Mai 2013 - 20:32

    Jj'adore merci beaucoup
    QueenDancing13
    QueenDancing13
    FémininAge : 27Messages : 106

    Mer 5 Juin 2013 - 7:44

    Merci ^^



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 16 Christina_Aguilera_Signature_by_Sitic
    Blend
    Blend
    MasculinAge : 34Messages : 10

    Mer 5 Juin 2013 - 22:38

    Merci bien (vais je trouver mon bonheur ... suis curieux xD)
    Misery
    Misery
    FémininAge : 26Messages : 11

    Mer 5 Juin 2013 - 22:47

    Merci beaucoup !
    Hessnellia
    Hessnellia
    FémininAge : 28Messages : 18

    Jeu 6 Juin 2013 - 2:18

    C'est ce que je cherchais, merci !
    Anonymous
    Invité

    Sam 8 Juin 2013 - 23:52

    Merci pirat
    SO'
    SO'
    MasculinAge : 25Messages : 23

    Dim 9 Juin 2013 - 11:34

    :hug:
    Apokalip'z
    Apokalip'z
    MasculinAge : 30Messages : 290

    Mar 11 Juin 2013 - 22:32

    merci du partage Wink



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 16 1424818313-sign-apoka
    Amaluna
    Amaluna
    FémininAge : 33Messages : 103

    Dim 16 Juin 2013 - 1:55

    Merci beaucoup !!!
    Contenu sponsorisé


      La date/heure actuelle est Lun 13 Mai 2024 - 2:43