AccueilFAQRechercherMembresGroupesS'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.


    Effet Transition - Infobulle, Rotation et Agrandissement

    Partagez
    avatar
    Xplo-Sion
    FémininAge : 23Messages : 266

    le 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 :


    HTML :
    Code:
    <span class="maclasse"> <img src="http://img11.hostingpics.net/pics/752403avatardfaut.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 :


    HTML :
    Code:
    <span class="maclasse"><img src="http://img11.hostingpics.net/pics/752403avatardfaut.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 :
    Ici les infos qui s'afficheront au survol de l'image
    Profil MP


    HTML :
    Code:
    <div class="nu_infobulle"><img src="http://img11.hostingpics.net/pics/752403avatardfaut.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 :

    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="http://img11.hostingpics.net/pics/752403avatardfaut.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



    avatar
    Toshiki
    FémininAge : 21Messages : 54

    le Ven 1 Nov 2013 - 15:36

    Merci =3
    avatar
    Jay-89
    FémininAge : 28Messages : 85

    le Mer 6 Nov 2013 - 23:31

    Merci =)
    avatar
    Tekesuta
    FémininAge : 22Messages : 33

    le Sam 9 Nov 2013 - 9:46

    merci!
    avatar
    hirondelle
    FémininAge : 28Messages : 134

    le Lun 18 Nov 2013 - 20:00

    Merci beaucoup pour l'explication :)
    avatar
    C. Hook
    FémininAge : 20Messages : 45

    le Mar 19 Nov 2013 - 2:29

    merci ^^
    avatar
    Seven
    FémininAge : 24Messages : 135

    le Jeu 21 Nov 2013 - 11:08

    Merci beaucoup !
    avatar
    Bambi's logic
    FémininAge : 21Messages : 25

    le Sam 23 Nov 2013 - 22:01

    Merci bien !
    avatar
    Geen
    FémininAge : 18Messages : 33

    le Sam 30 Nov 2013 - 16:12

    Danke ♥
    avatar
    Joxtop
    FémininAge : 25Messages : 47

    le Ven 27 Déc 2013 - 2:25

    merci Very Happy
    avatar
    Piratress
    FémininAge : 20Messages : 212

    le Ven 27 Déc 2013 - 15:28

    Je cherchais justement ça Very Happy merci^^
    avatar
    Kathee
    FémininAge : 24Messages : 664

    le Jeu 9 Jan 2014 - 14:09

    Merci pour le code, je vais tester ça  Very Happy 





    Nous serions ravis de vous accueillir - Venez donc voir ce petit petit fofo
    avatar
    Chup'
    FémininAge : 25Messages : 13

    le Dim 12 Jan 2014 - 13:01

    merci pour le code =) pour l’agrandissement c'est super !



    -------Crazy Girl-------

    By S.yuuki
    avatar
    MonsterYuki
    FémininAge : 22Messages : 22

    le Dim 12 Jan 2014 - 23:13

    Merci



    avatar
    Noruenu
    FémininAge : 24Messages : 120

    le Mar 14 Jan 2014 - 10:35

      Merci du partage ! :B
    avatar
    yukiyuki
    FémininAge : 22Messages : 85

    le Ven 17 Jan 2014 - 22:16

    Merci beaucoup pour ce partage !
    avatar
    -Mishirame-
    FémininAge : 24Messages : 26

    le Ven 31 Jan 2014 - 2:50

    mci
    Jamy
    FémininAge : 27Messages : 37

    le Lun 3 Fév 2014 - 19:21

    merci ! :)
    avatar
    Naïshy
    FémininAge : 15Messages : 65

    le Dim 9 Fév 2014 - 18:41

    Aaaaw merci *O*
    avatar
    Lyo
    FémininAge : 21Messages : 77

    le Dim 9 Fév 2014 - 20:29

    Merci beaucoup
    avatar
    Liberty Grim
    FémininAge : 19Messages : 127

    le Mer 12 Fév 2014 - 19:48

    Michi :3
    avatar
    Momonga
    FémininAge : 27Messages : 72

    le Mar 18 Fév 2014 - 16:42

    merci o/
    avatar
    Isalia
    FémininAge : 17Messages : 125

    le Mar 4 Mar 2014 - 20:18

    Merci *o*
    avatar
    Petit Harfang
    FémininAge : 16Messages : 79

    le Jeu 13 Mar 2014 - 14:03

    Merci :)
    Lyly
    FémininAge : 26Messages : 18

    le Dim 16 Mar 2014 - 21:09

    Merci :)
    avatar
    Banpaia
    FémininAge : 20Messages : 130

    le Lun 24 Mar 2014 - 19:23

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Mer 18 Oct 2017 - 0:22