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.

-50%
Le deal à ne pas rater :
-50% Baskets Nike Dunk Low
64.99 € 129.99 €
Voir le deal
-34%
Le deal à ne pas rater :
-34% LG OLED55B3 – TV OLED 4K 55″ 2023 – 100Hz HDR 10+, ...
919 € 1399 €
Voir le deal

    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 14 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 14 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 14 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 14 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 14 121926034f5e3fbba2a48
    Ryoma
    Ryoma
    MasculinAge : 36Messages : 420

    Jeu 17 Jan 2013 - 14:22

    Personnellement, en copiant tel quel les codes pour un premier essai, la transition ne fonctionne pas.
    Zeloo
    Zeloo
    FémininAge : 27Messages : 65

    Sam 19 Jan 2013 - 0:07

    merci pour ces codes ^^



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 14 0110
    John Parker
    John Parker
    MasculinAge : 41Messages : 58

    Lun 21 Jan 2013 - 16:43

    Merci pour ses codes !



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 14 Ange_s10
    katia06
    katia06
    FémininAge : 54Messages : 203

    Mar 29 Jan 2013 - 10:00

    merci pour ce super effet
    biz



    Anonymous
    Invité

    Jeu 31 Jan 2013 - 13:55

    Merci du partage *o*
    lapinou-doux
    lapinou-doux
    FémininAge : 23Messages : 56

    Mer 6 Fév 2013 - 14:05

    Merci :)
    DoDo94
    DoDo94
    MasculinAge : 30Messages : 104

    Ven 8 Fév 2013 - 4:45

    Merci !



    [center]Effet Transition - Infobulle, Rotation et Agrandissement - Page 14 Signthebreaker
    <~::Kit by Moi::~>
    CREA
    CREA
    FémininAge : 36Messages : 109

    Dim 10 Fév 2013 - 10:44

    Oh je cherchais ce code justement, merci ! =)



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 14 100308074234260265591115
    Hel
    Hel
    FémininAge : 32Messages : 14

    Lun 11 Fév 2013 - 12:44

    Merci!
    bianca ~♥~
    bianca ~♥~
    FémininAge : 55Messages : 111

    Lun 11 Fév 2013 - 17:20

    Merci :)



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 14 Coco_c11
    avatar
    Angel Tiger
    MasculinAge : 23Messages : 76

    Mer 13 Fév 2013 - 17:09

    Merci
    Asunie
    Asunie
    FémininAge : 32Messages : 68

    Jeu 14 Fév 2013 - 16:16

    Merci ! :)
    lapinou-doux
    lapinou-doux
    FémininAge : 23Messages : 56

    Ven 15 Fév 2013 - 0:32

    Merci Very Happy
    Plume'
    Plume'
    FémininAge : 25Messages : 166

    Sam 16 Fév 2013 - 14:38

    Merci beaucoup !
    Dothy
    Dothy
    FémininAge : 30Messages : 5

    Dim 17 Fév 2013 - 0:05

    Un très grand merci pour le partage des codes :)
    Pamplemousse
    Pamplemousse
    FémininAge : 33Messages : 31

    Lun 18 Fév 2013 - 16:16

    Thanks :love:



    Effet Transition - Infobulle, Rotation et Agrandissement - Page 14 849596fdt5
    Wilster
    Wilster
    FémininAge : 29Messages : 31

    Mer 20 Fév 2013 - 13:49

    Pour voir ces codes qui peuvent toujours être utile, merci ^^
    la-loca
    la-loca
    FémininAge : 31Messages : 86

    Dim 24 Fév 2013 - 20:08

    Merciiiii
    Amissia
    Amissia
    FémininAge : 24Messages : 20

    Lun 25 Fév 2013 - 17:37

    Merci :3
    Mavori
    Mavori
    MasculinAge : 25Messages : 28

    Lun 25 Fév 2013 - 17:42

      Merci beaucoup pour ce tutoriel ! ♥
    ShuiLong
    ShuiLong
    FémininAge : 30Messages : 17

    Mar 26 Fév 2013 - 16:55

    Exactement ce que je cherchais, merci ham1
    Anonymous
    Invité

    Jeu 28 Fév 2013 - 19:31

    Merci ! =)
    Romàne.
    Romàne.
    FémininAge : 27Messages : 13

    Ven 1 Mar 2013 - 16:41

    Merci pour ce tuto! :3
    Sarah W.
    Sarah W.
    FémininAge : 25Messages : 35

    Lun 4 Mar 2013 - 19:48

    Merci <3
    World of Darkness
    World of Darkness
    FémininAge : 35Messages : 7

    Mar 5 Mar 2013 - 12:54

    Ca a l'air intéressant *o*
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 13:12