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.

-50%
Le deal à ne pas rater :
-50% sur les sacs à dos pour ordinateur portable Urban Factory ...
19.99 € 39.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 18 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 18 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 18 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 18 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 18 121926034f5e3fbba2a48
    Lexis
    Lexis
    FémininAge : 34Messages : 40

    Mer 28 Aoû 2013 - 9:36

    Merci pour le partage !!
    Nami'
    Nami'
    FémininAge : 25Messages : 11

    Mer 28 Aoû 2013 - 9:40

    merchi!
    Hiro'
    Hiro'
    MasculinAge : 27Messages : 127

    Jeu 29 Aoû 2013 - 9:56

    Merci beaucoup :)



    Pas souvent là, mais je vous aime quand même très fort ! Étudiant en prépa littéraire, quand j'en ai marre de pas comprendre ce que je lis, je code pour ne plus comprendre non plus ce que j'écris.
    avatar
    donov89
    MasculinAge : 33Messages : 8

    Dim 1 Sep 2013 - 2:30

    Merci !
    Flower_*
    Flower_*
    FémininAge : 29Messages : 605

    Dim 1 Sep 2013 - 15:52

    Merci :)
    CapriceK
    CapriceK
    FémininAge : 32Messages : 254

    Mer 4 Sep 2013 - 17:53

    Petites astuces bien sympas, merci :)
    Cocoon
    Cocoon
    FémininAge : 31Messages : 49

    Ven 6 Sep 2013 - 19:54

    Merci bien ! :3
    Mitsu'ki
    Mitsu'ki
    FémininAge : 34Messages : 31

    Sam 7 Sep 2013 - 17:47

    Merciiiii



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 18 1o27SvUHjU
    Ryosaki
    Ryosaki
    MasculinAge : 31Messages : 109

    Mar 10 Sep 2013 - 12:53

    Merci encore pour ces codes



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 18 Tutog
    avatar
    L.I.N.E
    MasculinAge : 27Messages : 3

    Jeu 12 Sep 2013 - 2:39

    Merci pour le Code pirat 
    Il risque de bien me servir Wink
    Mitsuomi73
    Mitsuomi73
    MasculinAge : 31Messages : 42

    Sam 14 Sep 2013 - 14:10

    merci :)
    One Piece Shiro
    One Piece Shiro
    MasculinAge : 28Messages : 8

    Dim 15 Sep 2013 - 17:05

    Merci ! =D
    Aki'
    Aki'
    FémininAge : 27Messages : 258

    Dim 29 Sep 2013 - 11:50

    Merci bein =)
    Snowbell
    Snowbell
    MasculinAge : 31Messages : 312

    Jeu 10 Oct 2013 - 17:07

    Merci à toi.
    x_Titia
    x_Titia
    FémininAge : 33Messages : 92

    Ven 11 Oct 2013 - 23:03

    Je suis curieuse, je veux voir! ^^
    Merci!
    Nana-Yankee
    Nana-Yankee
    FémininAge : 29Messages : 65

    Dim 13 Oct 2013 - 12:50

    Merci
    Marypop
    Marypop
    FémininAge : 31Messages : 18

    Lun 14 Oct 2013 - 22:39

    Ce code m'intrigue, surtout le rotation x)
    Merci
    Anonymous
    Invité

    Mer 16 Oct 2013 - 10:06

    Je pense que ça va m'être utile !
    Merci (:
    Lolo
    Lolo
    MasculinAge : 33Messages : 17

    Sam 19 Oct 2013 - 11:54

    Merci ! Je vais essayer !
    Whitemoon
    Whitemoon
    FémininAge : 23Messages : 695

    Sam 19 Oct 2013 - 16:16

    Bizarre, l'exemple test ne marche pas chez moi



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 18 Kit_si10
    Noob's
    Noob's
    MasculinAge : 29Messages : 129

    Lun 21 Oct 2013 - 17:44

    Merci :)
    Whitemoon
    Whitemoon
    FémininAge : 23Messages : 695

    Lun 21 Oct 2013 - 18:06

    Ah j'ai trouvé le problème, c'est les images de ton exemple qui ne fonctionnent pas^^ Sinon merci pour les codes ça m'est super utile, surtout le dernier où j'avais vraiment aucune idée pour le trouver !



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 18 Kit_si10
    Linky
    Linky
    FémininAge : 33Messages : 30

    Mar 22 Oct 2013 - 1:33

    merci !
    md1991
    md1991
    FémininAge : 32Messages : 36

    Mar 22 Oct 2013 - 12:51

    merci pour les codes



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 18 Simon_10
    Mangockie
    Mangockie
    FémininAge : 25Messages : 40

    Lun 28 Oct 2013 - 10:59

    S'il te plaît je veux voir :jade2: 
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 18:46