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.

-23%
Le deal à ne pas rater :
EVGA SuperNOVA 650 G6 – Alimentation PC 100% modulaire 650W, 80+ ...
77.91 € 100.91 €
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 7 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 7 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 7 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 7 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 7 121926034f5e3fbba2a48
    Minow
    Minow
    FémininAge : 23Messages : 14

    Lun 2 Juil 2012 - 13:07

    Intéressant =) I want to see that Very Happy
    Ptite-Ly
    Ptite-Ly
    FémininAge : 28Messages : 859

    Mar 3 Juil 2012 - 9:25

    Woah, j'adore, c'est super gentil à toi de nous partager ça ♥
    Nayero
    Nayero
    MasculinAge : 28Messages : 39

    Mer 4 Juil 2012 - 22:38

    Merci



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 7 Nayero10
    Anonymous
    Invité

    Jeu 5 Juil 2012 - 8:29

    Merci pour ce code Very Happy
    Kispz.
    Kispz.
    FémininAge : 26Messages : 27

    Jeu 5 Juil 2012 - 13:45

    Merci du partage :love:



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 7 Roxetrouky8Effet Transition - Infobulle, Rotation et Agrandissement - Page 7 Roxetrouky5
    Effet Transition - Infobulle, Rotation et Agrandissement - Page 7 Roxetrouky9Effet Transition - Infobulle, Rotation et Agrandissement - Page 7 Roxetrouky4

    Lola Aino
    Lola Aino
    FémininAge : 32Messages : 54

    Jeu 5 Juil 2012 - 15:30

    Mercii ^^
    Reiõ
    Reiõ
    MasculinAge : 30Messages : 206

    Jeu 5 Juil 2012 - 17:10

    Merci :)
    Summeryoid
    Summeryoid
    FémininAge : 29Messages : 32

    Sam 7 Juil 2012 - 12:11

    Ohhh Merchi *w*



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 7 539853pin
    Delilah_
    Delilah_
    FémininAge : 27Messages : 4

    Sam 7 Juil 2012 - 16:22

    L'effet est hyper classe merci beaucoup :toto:
    OriginalNatsu
    OriginalNatsu
    FémininAge : 28Messages : 25

    Sam 7 Juil 2012 - 21:30

    Merci pour ce Tut' o/



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 7 514589CupOfTea
    Shatters
    Shatters
    FémininAge : 30Messages : 57

    Dim 8 Juil 2012 - 12:25

    effet magnifique, merci beaucoup



    J'ai appelé les bourreaux pour, en périssant, mordre la crosse de leurs fusils. J'ai appelé les fléaux, pour m'étouffer avec le sable, avec le sang. Le malheur a été mon dieu. Je me suis allongé dans la boue. Je me suis séché à l'air du crime. Et j'ai joué de bons tours à la folie. (Rimbaud)
    la poulpe
    la poulpe
    FémininAge : 31Messages : 21

    Dim 8 Juil 2012 - 14:12

    Oh génial ! je cherchais comment faire ça depuis des mois Very Happy merci *-*
    Amelia sullivan
    Amelia sullivan
    FémininAge : 30Messages : 380

    Lun 9 Juil 2012 - 1:26

    Wow j'aime t'es exemple je dois essayer
    Amelia sullivan
    Amelia sullivan
    FémininAge : 30Messages : 380

    Lun 9 Juil 2012 - 1:35

    Bon alors voilà je viens d'essayer, mais l'effet ne fonctionne pas.
    Chocolakato
    Chocolakato
    FémininAge : 33Messages : 837

    Lun 9 Juil 2012 - 14:01

    Oh, c'est super mignon Very Happy
    Merci !



    Tali
    Tali
    FémininAge : 30Messages : 26

    Lun 9 Juil 2012 - 15:24

    Merci :):)
    Be Shup's
    Be Shup's
    FémininAge : 25Messages : 33

    Lun 9 Juil 2012 - 20:06

    Merciiii *-*



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 7 Beshup17
    Makhroe
    Makhroe
    MasculinAge : 34Messages : 143

    Mar 10 Juil 2012 - 10:52

    Merci beaucoup pour ces aides !
    Candy †
    Candy †
    FémininAge : 27Messages : 43

    Mar 10 Juil 2012 - 12:44

    Merci (:
    Immortal
    Immortal
    FémininAge : 37Messages : 631

    Mar 10 Juil 2012 - 15:40

    Han je suis curieuse de voir ça **




    Besoin d'avis pour un futur forum multi-univers.
    Promis je suis ouverte aux critiques comme aux solutions
    :love:
    CLICK
    Katie-Lexie
    Katie-Lexie
    FémininAge : 34Messages : 6

    Mer 11 Juil 2012 - 10:35

    Merci pour ces effets!
    Okoia
    Okoia
    FémininAge : 30Messages : 30

    Mer 11 Juil 2012 - 15:38

    Merci ^^
    didoum
    didoum
    MasculinAge : 38Messages : 92

    Mer 11 Juil 2012 - 18:10

    Merci pour ce tuto. J'espère que ça va régler mon problème. :p



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 7 882883sign
    chipie23
    chipie23
    FémininAge : 31Messages : 21

    Jeu 12 Juil 2012 - 20:55

    Merci :)
    JEWELS*
    JEWELS*
    FémininAge : 31Messages : 24

    Ven 13 Juil 2012 - 10:51

    J'aime beaucoup, c'est vraiment original ! Merci pour ce partage Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 1:45