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
    Dreamzz
    FémininAge : 23Messages : 30

    le Lun 28 Mai 2012 - 0:00

    Wah, le résultat est vachement classe!
    Merci du partage *p*



    Juliette, oh!
    KanyeWest
    MasculinAge : 26Messages : 137

    le Lun 28 Mai 2012 - 12:00

    Merci beaucoup
    avatar
    Zarwins
    FémininAge : 21Messages : 152

    le Mer 30 Mai 2012 - 6:01

    Ohhh Oui =D
    merciii



    avatar
    Stanislava
    FémininAge : 22Messages : 102

    le Ven 1 Juin 2012 - 17:23

    Merci :3



    avatar
    Hisoka
    MasculinAge : 30Messages : 224

    le Sam 2 Juin 2012 - 23:16

    Merci



    avatar
    Mymz
    FémininAge : 25Messages : 24

    le Dim 3 Juin 2012 - 21:14

    L'effet est SUBLIME ! Merci !



    :friends:
    avatar
    AQW
    FémininAge : 23Messages : 223

    le Lun 4 Juin 2012 - 15:44

    Merci !



    Blblbl. ♥
    avatar
    Yumi-chan
    FémininAge : 24Messages : 67

    le Lun 4 Juin 2012 - 21:30

    Trop génial ! =)
    Merci beaucoup !
    avatar
    Tchi
    FémininAge : 24Messages : 40

    le Lun 4 Juin 2012 - 23:33

    Merci pour ce code, il a l'air intéressant (o(
    avatar
    Invité

    le Mar 5 Juin 2012 - 1:48

    Merci beaucoup de partager. =)
    avatar
    People Are Strange
    FémininAge : 30Messages : 29

    le Mar 5 Juin 2012 - 21:19

    merci ! *-*
    avatar
    exotic
    FémininAge : 26Messages : 5

    le Mer 6 Juin 2012 - 10:30

    Merci Very Happy
    avatar
    Kabrina Lestrange
    FémininAge : 29Messages : 71

    le Mer 6 Juin 2012 - 18:35

    Hm intéressant! Je voudrais en savoir plus! Razz
    avatar
    Win
    Age : 25Messages : 114

    le Jeu 7 Juin 2012 - 12:08

    J'adore! merci



    avatar
    Tamashi
    MasculinAge : 22Messages : 57

    le Ven 8 Juin 2012 - 4:42

    merci :)
    avatar
    oceansoul
    FémininAge : 27Messages : 22

    le Ven 8 Juin 2012 - 13:23

    C'est un super code
    Merci :love:
    avatar
    Kreazen
    FémininAge : 20Messages : 46

    le Sam 9 Juin 2012 - 12:43

    merci



    Arrow
    avatar
    Shirabi
    MasculinAge : 21Messages : 47

    le Sam 9 Juin 2012 - 17:53

    Merci!
    avatar
    Cissy
    FémininAge : 25Messages : 63

    le Dim 10 Juin 2012 - 0:22

    Merciii !
    En ligne
    avatar
    Rozenbrez
    FémininAge : 26Messages : 1349

    le Dim 10 Juin 2012 - 15:23

    Merci pour les code ils sont bien utile et surtout je trouve ça pas commun ^^





    Merci au lutin anonyme de cette année. <3

    avatar
    Lacryma
    FémininAge : 25Messages : 72

    le Dim 10 Juin 2012 - 19:44

    Merci ^^


    Dernière édition par Lacryma le Lun 11 Juin 2012 - 12:03, édité 1 fois
    avatar
    Jeanne
    FémininAge : 20Messages : 95

    le Dim 10 Juin 2012 - 21:00

    Haaaaaaaaaaaaaaaaan merciiiiiiiiiiiiiiiiiiiii, je cherche à faire ça depuis super longtemps !
    Tu sais que je t'adore ♥ Je te garde une place sur ma PA.



    avatar
    Leean
    FémininAge : 24Messages : 19

    le Lun 11 Juin 2012 - 20:11

    Je cherche comment faire ça depuis si longtemps T__T
    Merci : D
    avatar
    Depp
    FémininAge : 26Messages : 298

    le Mar 12 Juin 2012 - 17:44

    Je sens que cela va m'être utile Very Happy Merci



    avatar
    Elricka
    MasculinAge : 26Messages : 77

    le Mar 12 Juin 2012 - 20:45

    Merci/Thanks/Arigato
    Contenu sponsorisé


      La date/heure actuelle est Jeu 19 Oct 2017 - 18:33