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.

Le Deal du moment : -15%
(Adhérents) LEGO® Icons 10318 Le Concorde
Voir le deal
169.99 €

    Comment faire un effet au survol (comment fonctionne le hover)

    Aeden
    Aeden
    FémininAge : 34Messages : 59

    Lun 27 Mai 2013 - 10:02

    Rappel du premier message :



    Hello, je viens aujourd'hui vous expliquer les animations au survol.
    Cela vous permettra de créer les votres et non de copier-coller l'animation qui vous plait au cas par cas.
    Pour cela vous aurez besoin de deux choses : un forum, et l'accès à sa partie administration.
    Prêt ?

    Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.



    I : Créer une class :

    La class est un code que l'on peut mettre sur une div, un span ou tout autre balise html comme ceci :
    Code:
    <div class="utopia">    code texte ou image        </div>
    <span class="utopia">    code texte ou image        </span>
    <img class="utopia" src="   url de l'image    "/>
    Ici, j'ai nommé la class "utopia", mais sachez que vous pourrez toujours mettre le nom que vous souhaitez.

    II : La feuille CSS :

    En partie administration à présent, vous avez accès à une feuille CSS. Celle-ci se trouve dans :
    Administration > Affichage > Couleur > Feuille CSS

    Cette feuille css vous sert à créer tous les changements graphiques généraux de votre forum : les templates servant quant à eux à changer la disposition des éléments graphiques. Mais bon, concentrons nous sur cette feuille.
    Ici, vous pouvez marquer ce que vous voulez ! Si c'est la première fois, ne soyez pas timide et pour les plus rodés, faites un peu de place sur cette feuille pour ajouter le code qui va suivre.

    A : comment lier le code auquel j'ai donné un nom sur cette feuille ?
    Sur cette dite feuille, marquez ceci :
    Code:
    .utopia{ }
    .utopia:hover{}

    B : A quoi sert tout ça ?

    ► Le point déjà :
    Le petit point mit juste avant le nom de votre class sert à rappeler que justement, vous parler d'une class. Si on avait parlé d'une id (id="machin"), on aurait mit alors un # avant le nom "utopia" et non un "." .

    ► Le utopia ensuite :
    utopia étant le nom qu'on a donné à notre class, on le marque évidement pour rappeler qu'on parle bien de cette class là.
    !!! Attention : les majuscules comptent : étant donné que nous n'en avions pas mise dans notre post en marquant "
    ", n'en mettez pas ~

    ►Les { et } à présent :
    La première ouvre les infos qu'il y aura dans le codage et la dernière clos tout ça. Vérifiez donc toujours d'avoir bien une { et une } à chaque codage fait sur la feuille css.

    ► la fonction :hover :
    cette fonction indique qu'au survol (:hover) de la class (le point) utopia (balise nommée), il devra s'y passer ce qui est marqué entre les balise { et }.

    Plus concrètement, voici un exemple pour une div :
    Sur votre post, vous aurez donc :
    Code:
    <div class="utopia">Never Utopia</div>

    et sur votre feuille CSS :
    Code:
    .utopia{
      width:200px;
      height: 100px;
      text-align:center;
      background-color:cyan;
      color:black;
      opacity:0.1;
      transition: 1s;
      transform: all;
    }

    .utopia:hover{
      width:170px;
      height:50px;
      background-color:black;
      text-align:50% 50%;
      font-family:impact;
      color:white;
      text-shadow: 0px 0px 5px cyan ;
      opacity:1;
      font-size:24px;
      border-radius:50px;
      box-shadow: 0px 0px 10px darkcyan;
      transition: 1s;
      transform: all;
    }

    Faites un essai en copiant-collant tout cela sur votre forum pour voir ce que cela fait une fois que vous survolerez ce code.
    A noter que vous pouvez utiliser cette astuce dans vos post mais aussi pour le graphisme de la page d'accueil, pour vos liens, vos titres... tout ~


    III : Quelques fonctions :

    Comme vous l'avez constaté, on a utilisé plusieurs fonctionnalité dans la feuille css, dans les balises d'utopia. Ici, je vais vous en expliquer quelques unes.
    notez cependant que si une fonction ne doit pas changer au survol, il est possible tout simplement de ne pas la noter dans le :hover pour qu'elle ne soit pas prise en compte. Dans le :hover pour vous simplifier la vie donc, ne notez QUE ce qui doit changer. (les transitions et le temps de transition sont à remettre si vous voulez une animation allant du :hover vers la div normal (quand votre souris quitte l'animation en gros)).

    width : la taille en px ;
    height : la hauteur en px ;
    background : peut recenser toute les infos ci-dessous ;
    background-color : #couleurpipette ou codecouleur ;
    background-image : url('lien de l'image allant sous le texte');
    background-position: largeur puis hauteur en px ou en % pour positionner l'image de fond;
    background-repeat : répéter --> no-repeat (pas de répétition du background) repeat-x (répéter sur les cotés) repeat-y (répéter en haut et en bas)

    color : couleur du texte;
    text-shadow : ombre du texte;
    box-shadow : ombre du cadre de la div;
    border : bordure du cadre de la div;
    border-radius : bord-haut-gauche(en PX) bord-haut-droite(en PX) bord-bas-gauche(en PX) bord-bas-droite(en PX) ((dans cet ordre et pas dans un autre) OU XXpx (en ce cas les quatres bord auront le même radius).
    transform : détermine ce qui changera du :hover à la balise en état normal; all signifie tout.
    transition : détermine le temps de la transition (animation);
    opacity : détermine la transparence;

    margin : détermine l'espace extérieur entre la div et ce qui est autour;
    padding : détermine l'espace entre les objets inclus dans la div et les bords intérieurs;

    Voilà voilà ^^



    Hiro'
    Hiro'
    MasculinAge : 27Messages : 127

    Mer 28 Aoû 2013 - 18:40

    Hum, hâte de savoir ce que tu nous proposes... Merci pour le partage Wink



    Pas souvent là, mais je vous aime quand même très fort ! Étudiant en prépa littéraire, quand j'en ai marre de pas comprendre ce que je lis, je code pour ne plus comprendre non plus ce que j'écris.
    Didi1991
    Didi1991
    FémininAge : 33Messages : 29

    Jeu 29 Aoû 2013 - 12:56

    J'ai bien envie de le voir ce tuto :p
    Kathee
    Kathee
    FémininAge : 30Messages : 680

    Ven 6 Sep 2013 - 2:01

    Merci j'ai hâte ! ^^





    Forum dérivé ouat
    dans un univers steampunk :heart:
    rhapsody_
    rhapsody_
    FémininAge : 40Messages : 21

    Ven 6 Sep 2013 - 21:07

    merci merci :)



    Comment faire un effet au survol (comment fonctionne le hover) - Page 6 Typo-ban-septembre-2cd0505
    troublemaker
    troublemaker
    FémininAge : 26Messages : 17

    Dim 8 Sep 2013 - 12:35

    Merci beaucoup \o/
    Mitsuomi73
    Mitsuomi73
    MasculinAge : 31Messages : 42

    Sam 14 Sep 2013 - 12:43

    merci :)
    Linky
    Linky
    FémininAge : 33Messages : 30

    Sam 14 Sep 2013 - 16:11

    mercii !
    ClaryF
    ClaryF
    FémininAge : 33Messages : 138

    Sam 14 Sep 2013 - 18:44

    Je suis curieuse, merci o/
    Elena'
    Elena'
    FémininAge : 30Messages : 26

    Sam 14 Sep 2013 - 19:31

    Merci Wink
    Amariem
    Amariem
    FémininAge : 25Messages : 98

    Dim 15 Sep 2013 - 7:08

    J'ai hâte de voir ça ! Merci du partage :3 !



    Comment faire un effet au survol (comment fonctionne le hover) - Page 6 241091dfsdfds
    Daenerys
    Daenerys
    FémininAge : 32Messages : 5

    Mar 17 Sep 2013 - 15:58

    Merci



    Comment faire un effet au survol (comment fonctionne le hover) - Page 6 Within10
    Lie_MADcircus
    Lie_MADcircus
    MasculinAge : 31Messages : 37

    Mer 18 Sep 2013 - 6:07

    Merci.
    Golden`Lies
    Golden`Lies
    FémininAge : 32Messages : 44

    Jeu 19 Sep 2013 - 14:18

    Merci, c'est ce que je recherche depuis des heures :siffle: 
    Motoko
    Motoko
    FémininAge : 25Messages : 39

    Ven 20 Sep 2013 - 21:14

    Thanks. :)
    Kim Jae Yoon
    Kim Jae Yoon
    FémininAge : 33Messages : 128

    Sam 21 Sep 2013 - 21:07

    Merci !
    Sakura-chan
    Sakura-chan
    FémininAge : 26Messages : 180

    Lun 23 Sep 2013 - 15:24

    Merci !
    Pomme-de-terre
    Pomme-de-terre
    FémininAge : 25Messages : 34

    Mar 24 Sep 2013 - 10:49

    je suis curieuse :3
    Jimmy
    Jimmy
    MasculinAge : 28Messages : 166

    Mar 24 Sep 2013 - 18:26

    thanks
    Aile
    Aile
    FémininAge : 36Messages : 134

    Jeu 26 Sep 2013 - 18:44

    Le titre de ce tuto m'intrigue, je vais jeter un coup d'oeil Wink merci



    Comment faire un effet au survol (comment fonctionne le hover) - Page 6 799284Sanstitre1
    BloodyMonster
    BloodyMonster
    MasculinAge : 29Messages : 23

    Sam 28 Sep 2013 - 15:55

    Merci !



    Comment faire un effet au survol (comment fonctionne le hover) - Page 6 291029BloodyMonsterSign12
    Likau
    Likau
    MasculinAge : 29Messages : 353

    Jeu 3 Oct 2013 - 12:26

    Hm... je suis bien curieux de voir ce que ça donne pirat 
    tamanegeek
    tamanegeek
    MasculinAge : 24Messages : 167

    Ven 4 Oct 2013 - 11:18

    Merci
    Bee Chrome
    Bee Chrome
    MasculinAge : 29Messages : 70

    Ven 4 Oct 2013 - 21:08

    Intéressant.



    Comment faire un effet au survol (comment fonctionne le hover) - Page 6 223618SignatureLelouch2
    Lolo
    Lolo
    MasculinAge : 33Messages : 17

    Sam 19 Oct 2013 - 9:56

    Merci d'avance !
    Black Moon
    Black Moon
    FémininAge : 28Messages : 108

    Sam 19 Oct 2013 - 12:01

    Ca m'intéresse bien tout ça, merci.
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 21:11