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.

-21%
Le deal à ne pas rater :
LEGO® Icons 10329 Les Plantes Miniatures, Collection Botanique
39.59 € 49.99 €
Voir le deal

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

    Aeden
    Aeden
    FémininAge : 34Messages : 59

    Lun 27 Mai 2013 - 12: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à ^^



    Lyo
    Lyo
    FémininAge : 28Messages : 104

    Mar 23 Juin 2015 - 16:31

    Merci !
    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Ven 26 Juin 2015 - 20:47

    Merci.
    Ailla
    Ailla
    FémininAge : 25Messages : 32

    Mar 30 Juin 2015 - 12:59

    merci !
    kasual57
    kasual57
    MasculinAge : 32Messages : 2

    Mer 1 Juil 2015 - 13:31

    merci
    Libellule
    Libellule
    FémininAge : 25Messages : 7

    Jeu 2 Juil 2015 - 0:17

    Ça m'intéresse, merci. Wink
    Liam212
    Liam212
    MasculinAge : 23Messages : 47

    Jeu 2 Juil 2015 - 17:36

    *.*

    Je veux tellement savoir comment faire :o



    les animations - Comment faire un effet au survol (comment fonctionne le hover) - Page 16 11027963
    Kenway Kioshi
    Kenway Kioshi
    MasculinAge : 28Messages : 64

    Jeu 9 Juil 2015 - 0:57

    Merci !
    Youp
    Youp
    FémininAge : 29Messages : 579

    Jeu 9 Juil 2015 - 2:24

    Je suis curieuse ... Merci du partage ^^



    les animations - Comment faire un effet au survol (comment fonctionne le hover) - Page 16 262632clip20160315at092522
    potion
    potion
    FémininAge : 37Messages : 33

    Sam 11 Juil 2015 - 9:39

    envie de voir
    Smikyou
    Smikyou
    FémininAge : 30Messages : 85

    Sam 11 Juil 2015 - 11:00

    ty
    SethGuex
    SethGuex
    MasculinAge : 24Messages : 7

    Dim 12 Juil 2015 - 1:40

    Alyth a écrit:J'ai bien envie de voir ce tuto. Merci ! :)
    Lamire
    Lamire
    FémininAge : 30Messages : 96

    Lun 13 Juil 2015 - 2:24

    Merci~
    Harleen Quinzel
    Harleen Quinzel
    FémininAge : 28Messages : 65

    Mer 15 Juil 2015 - 0:03

    Merciiiii !
    Ly'
    Ly'
    FémininAge : 26Messages : 5

    Mer 15 Juil 2015 - 19:42

    Merci :3
    Fyraliel
    Fyraliel
    FémininAge : 33Messages : 1424

    Jeu 16 Juil 2015 - 7:42

    ça m'intéresse pas mal ^^
    Merci pour ce tuto :)



    les animations - Comment faire un effet au survol (comment fonctionne le hover) - Page 16 F86e7518c1
    POmmeDeTerre
    POmmeDeTerre
    FémininAge : 24Messages : 31

    Ven 24 Juil 2015 - 15:02

    Merci beaucoup !!
    .cranberry
    .cranberry
    FémininAge : 31Messages : 50

    Sam 25 Juil 2015 - 15:04

    J'adorerai voir le tuto Embarassed
    nuhtminh
    nuhtminh
    MasculinAge : 31Messages : 8

    Lun 3 Aoû 2015 - 9:51

    Je pense que c'est une chose que je cherchais, merci! :)
    Hellow
    Hellow
    MasculinAge : 29Messages : 33

    Lun 3 Aoû 2015 - 19:08

    Merci ! :3
    Nao'
    Nao'
    FémininAge : 33Messages : 31

    Mer 5 Aoû 2015 - 14:38

    Ca a l'air bien sympa~ Merci !



    les animations - Comment faire un effet au survol (comment fonctionne le hover) - Page 16 Tumblrloo23qdg321qhh19q les animations - Comment faire un effet au survol (comment fonctionne le hover) - Page 16 Tumblrloo25b5e5v1qhh19q les animations - Comment faire un effet au survol (comment fonctionne le hover) - Page 16 Tumblrloo24vnqzm1qhh19q les animations - Comment faire un effet au survol (comment fonctionne le hover) - Page 16 Tumblrloo23kzrit1qhh19q les animations - Comment faire un effet au survol (comment fonctionne le hover) - Page 16 Tumblrloo2471rxv1qhh19q les animations - Comment faire un effet au survol (comment fonctionne le hover) - Page 16 Cupcake
    Zorume
    Zorume
    FémininAge : 27Messages : 84

    Jeu 6 Aoû 2015 - 19:24

    Merci =D
    Wanted
    Wanted
    FémininAge : 29Messages : 113

    Ven 7 Aoû 2015 - 7:44

    Merci pour le partage ! :toto:
    Tortouya
    Tortouya
    FémininAge : 29Messages : 9

    Dim 9 Aoû 2015 - 23:58

    Bonjour !

    J'aimerais bien voir ce tuto' qui m'a l'air passionnant.

    Merci beaucoup (:
    Shinichi
    Shinichi
    MasculinAge : 29Messages : 35

    Lun 10 Aoû 2015 - 11:29

    Merci bien =)
    Damned
    Damned
    FémininAge : 22Messages : 109

    Ven 14 Aoû 2015 - 22:47

    Merci!
    Contenu sponsorisé


      La date/heure actuelle est Mer 15 Mai 2024 - 21:22