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.

-34%
Le deal à ne pas rater :
-34% LG OLED55B3 – TV OLED 4K 55″ 2023 – 100Hz HDR 10+, ...
919 € 1399 €
Voir le deal
Le Deal du moment : -50%
-50% sur les sacs à dos pour ordinateur ...
Voir le deal
19.99 €

    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 13 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 13 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 13 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 13 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 13 121926034f5e3fbba2a48
    Shiney
    Shiney
    FémininAge : 26Messages : 26

    Mer 5 Déc 2012 - 11:03

    Merci
    Mondo Gecko
    Mondo Gecko
    MasculinAge : 39Messages : 51

    Mer 5 Déc 2012 - 12:26

    Merci





    Effet Transition - Infobulle, Rotation et Agrandissement - Page 13 607046geek
    Ekko
    Ekko
    FémininAge : 26Messages : 5

    Mer 5 Déc 2012 - 13:53

    Merci ♥
    Chucky'
    Chucky'
    MasculinAge : 26Messages : 80

    Mer 5 Déc 2012 - 18:06

    merci



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 13 1370524847-cooltext1062715975
    Cyllan
    Cyllan
    FémininAge : 33Messages : 166

    Mer 5 Déc 2012 - 19:17

    Mici (:



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 13 1388311800-signa-anesthesiee
    The_Scream
    The_Scream
    FémininAge : 29Messages : 43

    Mer 5 Déc 2012 - 23:12

    Merci !



    ~That's the hell said no ~

    Effet Transition - Infobulle, Rotation et Agrandissement - Page 13 Dragoncopie
    Clownyfunny
    Clownyfunny
    MasculinAge : 29Messages : 6

    Dim 9 Déc 2012 - 15:46

    Merci pour le code ^^
    chardonoire.....CMF
    chardonoire.....CMF
    MasculinAge : 58Messages : 22

    Dim 9 Déc 2012 - 21:39

    Merci beaucoup



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 13 M34fv311
    Maï-li
    Maï-li
    FémininAge : 32Messages : 30

    Mar 11 Déc 2012 - 14:42

    niah
    Iriel
    Iriel
    MasculinAge : 31Messages : 26

    Mer 12 Déc 2012 - 13:19

    Merci !
    WhiteRaaven
    WhiteRaaven
    FémininAge : 27Messages : 39

    Sam 15 Déc 2012 - 16:32

    Oh, merci beaucoup !
    Eichiro
    Eichiro
    MasculinAge : 31Messages : 47

    Lun 17 Déc 2012 - 20:59

    Merci
    Shaknoss
    Shaknoss
    MasculinAge : 33Messages : 90

    Ven 21 Déc 2012 - 20:54

    Merci d'avance : Je veux lire ça ! =D
    Lilwik
    Lilwik
    FémininAge : 24Messages : 10

    Sam 22 Déc 2012 - 10:06

    Merci ! :)
    Pandora*
    Pandora*
    FémininAge : 25Messages : 33

    Ven 28 Déc 2012 - 14:28

    Merci beaucoup !
    Karmixi
    Karmixi
    FémininAge : 28Messages : 61

    Dim 30 Déc 2012 - 18:42

    Merci :o
    Rhéa
    Rhéa
    FémininAge : 28Messages : 57

    Dim 30 Déc 2012 - 21:15

    Merci beaucoup ! Ton tutoriel va bien m'aider :')
    Lou 77
    Lou 77
    FémininAge : 26Messages : 13

    Mar 1 Jan 2013 - 1:07

    Merci c'est cool ça o/
    Laminois Kira
    Laminois Kira
    MasculinAge : 31Messages : 64

    Jeu 3 Jan 2013 - 20:37

    merci ^^



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 13 1302251056523759110905572


    Lena
    Lena
    FémininAge : 33Messages : 100

    Jeu 3 Jan 2013 - 21:48

    Merci, c'est justement ce que je recherchais =D



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 13 Lena13

    Merci a Kazuya pour son kit =)
    Gipsyking
    Gipsyking
    FémininAge : 29Messages : 1

    Ven 11 Jan 2013 - 22:13

    intéressant en effet
    Khouro13
    Khouro13
    FémininAge : 25Messages : 208

    Dim 13 Jan 2013 - 1:20

    Merci !



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 13 322292sweetaddictionShinku145
    Sephy
    Sephy
    FémininAge : 30Messages : 139

    Lun 14 Jan 2013 - 1:36

    Merci beaucoup pour ce tuto!
    Shakespeare
    Shakespeare
    FémininAge : 34Messages : 110

    Jeu 17 Jan 2013 - 13:35

    intéressant comme effet ♥
    Ryoma
    Ryoma
    MasculinAge : 36Messages : 420

    Jeu 17 Jan 2013 - 13:50

    Merci.
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 17:05