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


    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
    Onigiri2a
    FémininAge : 27Messages : 46

    le Ven 20 Avr 2012 - 10:23

    :hum: Ce code à l'air pas mal du tout, je prends pour en voir un peu plus ! :)
    Merci beaucoup ! ham3



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

    le Ven 20 Avr 2012 - 10:29

    Derien :) Si ça peut servir :)



    avatar
    Kakuu
    MasculinAge : 21Messages : 30

    le Ven 20 Avr 2012 - 12:12

    Se code à l'air interressant :)

    Mercii



    avatar
    Screen
    FémininAge : 25Messages : 92

    le Ven 20 Avr 2012 - 12:58

    Intéressant, en effet o: !
    avatar
    Xplo-Sion
    FémininAge : 23Messages : 266

    le Ven 20 Avr 2012 - 17:10

    De rien :) Si vous avez un quelconque soucis, je suis la :)



    avatar
    âme
    FémininAge : 52Messages : 154

    le Ven 20 Avr 2012 - 18:05

    Bonjour Xplo-sion, merci :)

    edit 18:30.

    Je viens de placer le codage "effet infobulle sur transition"
    et les liens n'apparaissent pas (profil et mp)
    Bien entendu, j'y ai placé mes liens profil et mp hein :))

    Résultat, votre image est bien là mais reste immobile, l'infobulle s'ouvre bien avec mon titre "Votre Fondatrice" à la place de "Votre joli titre" mais pas de rotation d'image et pas de lien...
    Voici ce que ça donne sur le portail d'essais. http://tests-themes.sosforum.net/

    Un grand merci pour votre aide.



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    avatar
    Shuu-Shuu
    FémininAge : 21Messages : 196

    le Ven 20 Avr 2012 - 18:40

    Merci beaucoup pour ce partage ;D
    avatar
    Xplo-Sion
    FémininAge : 23Messages : 266

    le Ven 20 Avr 2012 - 18:55

    Âme, pourrais je voir tes codes, enfin avec ce que tu as modifier afin que je puisse voir moi même et que je te règle tout ça Very Happy J'ai déjà mon idée pourquoi ça ne marche pas.

    Merci Very Happy





    avatar
    Midnigth
    MasculinAge : 21Messages : 61

    le Sam 21 Avr 2012 - 14:42

    çà à l'air intéressant, merci :)
    avatar
    Lou'
    FémininAge : 27Messages : 99

    le Sam 21 Avr 2012 - 15:04

    C'est super beau *___*
    Je prends pour essayer Very Happy
    Merci pour le partage ^^
    avatar
    Bleufi
    FémininAge : 22Messages : 311

    le Sam 21 Avr 2012 - 15:17

    Waaoouh ! J'adore ces petits (grands même !) effets ! Merci beaucoup ;D



    avatar
    Corkyie
    FémininAge : 19Messages : 75

    le Sam 21 Avr 2012 - 17:52

    Veux voir(;

    Ça a l'air vraiment bien, merci de partager ça avec nous !
    avatar
    âme
    FémininAge : 52Messages : 154

    le Sam 21 Avr 2012 - 23:23

    @Xplo-Sion a écrit:Âme, pourrais je voir tes codes, enfin avec ce que tu as modifier afin que je puisse voir moi même et que je te règle tout ça Very Happy J'ai déjà mon idée pourquoi ça ne marche pas.

    Merci Very Happy



    Bonsoir Xplo-sion,

    Oui bien sûr :))

    HTML :
    Code:
     <div class="transition-NU">
      <img width="50" height="50" src="http://www.pixyup.com/uploads/241836314f6e061f60ef8.png" alt="" />
      <div class="NU_transition">   
              <h3>Votre Fondatrice</h3>
              <span>
                Ici les infos qui s'afficheront au survol de l’icône <br />
                <a href="http://color-avenue.forumactif.com/u1">Profil</a><a href="http://color-avenue.forumactif.com/privmsg?folder=inbox">MP urgent uniquement.</a>
              </span>
      </div>
     </div>

    CCS :
    Code:
    /* BLOC CONTENANT L'INFOBULLE - L’ICÔNE */
    .transition-NU{
    position: relative;
    width: 50px;
    float: left;
    margin: 10px;
    padding: 0;
    }
    /* INFOBULLE */
    .NU_transition{
    background: #FFFFFF;
    border: 0px solid #60c8c6;
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
    left:80px;
    top: 0;
    z-index: 999;
    padding: 0;
    text-align: center;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour navigateur webkit */
    -moz-transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour navigateur mozilla */
    -o-transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour navigateur opera */
    transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour les navigateurs récents */
    }
    /* INFOBULLE AU SURVOL */
    .transition-NU:hover .NU_transition{
    height: 70px;
    width: 100px;
    padding: 5px;
    border-width: 1px;
    }
    /* IMAGE (icône) */
    .transition-NU img {
    position: relative;
    z-index: 990;
    left: 0;
    bottom: 0;
    -webkit-transition: all 1s linear 0s;/* pour navigateur webkit */
    -moz-transition: all 1s linear 0s; /* pour navigateur mozilla */
    -o-transition: all 1s linear 0s;/* pour navigateur opera */
    transition: all 1s linear 0s; /* pour les navigateurs récents */
    }
    /* IMAGE (icône) AU SURVOL */
    .transition-NU:hover img {
    -webkit-transition: rotate(-360deg);/* pour navigateur webkit */
    -moz-transform: rotate(-360deg); /* pour navigateur mozilla */
    -o-transform: rotate(-360deg);/* pour navigateur opera */
    transform: rotate(-360deg); /* pour les navigateurs récents */
    }

    Merci à toi et bonne soirée Wink




    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    avatar
    Sugare*
    FémininAge : 18Messages : 13

    le Dim 22 Avr 2012 - 18:53

    Merci pour les codes. o/



    « Si je devais choisir entre t'aimer ou respirer, j'utiliserai mon dernier souffle pour te dire " Je t'aime " »
    avatar
    Vorn
    MasculinAge : 20Messages : 2342

    le Dim 22 Avr 2012 - 22:36

    Merci :)



    avatar
    Nero Brigh
    MasculinAge : 33Messages : 85

    le Dim 22 Avr 2012 - 23:11

    merci!
    avatar
    Xplo-Sion
    FémininAge : 23Messages : 266

    le Dim 22 Avr 2012 - 23:28

    âme, voila le code Very Happy



    Puis, je vous en prie, c'est un plaisir de vous aidez :)



    avatar
    âme
    FémininAge : 52Messages : 154

    le Dim 22 Avr 2012 - 23:33

    Ohhhh merci merci merci !!!
    C'est parfait, ça fonctionne :love:

    Bonne soirée Xplo-sion :))

    EDIT.
    Juste une petite question.
    Si je souhaite placer 3 ou 4 fois ce codage afin de placer mes Admin's chacun dans leur infobulle, le fait de multiplier le codage dans le ccs ne fera rien buguer ?


    Dernière édition par âme le Dim 22 Avr 2012 - 23:37, édité 1 fois



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    avatar
    Xplo-Sion
    FémininAge : 23Messages : 266

    le Dim 22 Avr 2012 - 23:37

    Ah j'ai oublier de t'expliquer .

    Il suffisait d'augmenter la taille de l'infobulle, et j'avais oubliée un détail dans le CSS.

    Je t'en prie, c'est un plaisir de t'aider :)

    Bonne soirée,

    Xplo-sion~~



    avatar
    âme
    FémininAge : 52Messages : 154

    le Dim 22 Avr 2012 - 23:38

    Je venais d'éditer mon message pour une question :))
    Merci beaucoup, vraiment !



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    avatar
    Xplo-Sion
    FémininAge : 23Messages : 266

    le Dim 22 Avr 2012 - 23:42

    Logiquement, non. Sinon, il suffirait de changer le CSS et la class qui définie l'infobulle.



    avatar
    âme
    FémininAge : 52Messages : 154

    le Dim 22 Avr 2012 - 23:51

    Alors si ça ne gêne en rien, c'est parfait !
    Encore merci Xplo-Sion et désolée pour ce dérangement avec toutes mes questions :))
    Bonne soirée et bonne semaine Wink



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    avatar
    Lamia
    FémininAge : 21Messages : 124

    le Lun 23 Avr 2012 - 11:11

    Merci les codes ont l'air vraiment bien.
    avatar
    trial_by_fire
    FémininAge : 27Messages : 2

    le Lun 23 Avr 2012 - 11:22

    mercii ^^
    Contenu sponsorisé


      La date/heure actuelle est Lun 24 Juil 2017 - 16:30