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, AGRANDISSEMENT ]

    Partagez
    Xplo-Sion
    FémininAge : 22Messages : 266

    le Ven 20 Avr 2012 - 4:28




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

    Il vous faudra laisser un petit mot pour voir les codes.

    EXEMPLE



    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



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



    Xplo-Sion
    FémininAge : 22Messages : 266

    le Ven 20 Avr 2012 - 10:29

    Derien :) Si ça peut servir :)



    Kakuu
    MasculinAge : 20Messages : 30

    le Ven 20 Avr 2012 - 12:12

    Se code à l'air interressant :)

    Mercii



    Screen
    FémininAge : 24Messages : 92

    le Ven 20 Avr 2012 - 12:58

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

    le Ven 20 Avr 2012 - 17:10

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



    âme
    FémininAge : 51Messages : 150

    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.
    Shuu-Shuu
    FémininAge : 20Messages : 196

    le Ven 20 Avr 2012 - 18:40

    Merci beaucoup pour ce partage ;D
    Xplo-Sion
    FémininAge : 22Messages : 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





    Midnigth
    MasculinAge : 21Messages : 61

    le Sam 21 Avr 2012 - 14:42

    çà à l'air intéressant, merci :)
    Lou'
    FémininAge : 26Messages : 98

    le Sam 21 Avr 2012 - 15:04

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

    le Sam 21 Avr 2012 - 15:17

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



    Corkyie
    FémininAge : 19Messages : 61

    le Sam 21 Avr 2012 - 17:52

    Veux voir(;

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

    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.
    Sugare*
    FémininAge : 17Messages : 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 " »
    Vorn
    MasculinAge : 20Messages : 2342

    le Dim 22 Avr 2012 - 22:36

    Merci :)



    Nero Brigh
    MasculinAge : 32Messages : 85

    le Dim 22 Avr 2012 - 23:11

    merci!
    Xplo-Sion
    FémininAge : 22Messages : 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 :)



    âme
    FémininAge : 51Messages : 150

    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.
    Xplo-Sion
    FémininAge : 22Messages : 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~~



    âme
    FémininAge : 51Messages : 150

    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.
    Xplo-Sion
    FémininAge : 22Messages : 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.



    âme
    FémininAge : 51Messages : 150

    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.
    Lamia
    FémininAge : 21Messages : 121

    le Lun 23 Avr 2012 - 11:11

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

    le Lun 23 Avr 2012 - 11:22

    mercii ^^
    Contenu sponsorisé

    Aujourd'hui à 22:48


      La date/heure actuelle est Mar 6 Déc 2016 - 22:48