Comment créer cette effet en CSS/HTML ?

Résolu
Utilisateur anonyme -  
avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

j'aimerais savoir comment coder et créer ce style de boutons comme sur ce site ( en haut en vert)

https://ui-studio.fr/

voila, quand on passe la souris sur le boutons, un dégradé vert arrive doucement, puis s'en va si l'on enleve la souris

comment créer ceci ?

d'avance merci
Configuration: Mac OS X
Safari 531.9

7 réponses

  1. Coronier
     
    Salut,

    Tu peux aussi le faire en HTML/CSS

    que tu mettes une image de fond sur l'onglet:

    CSS:
    onglet
    {
    background-image: url("ton image d'onglet.png")
    }

    et un hover avec une image GIF dynamique qui crée un dégradé (ou l'effet que tu veux, par exemple un remplissage progressif)

    CSS:
    onglet:hover
    {
    background-image: url("ton image d'onglet.gif")
    }
    1
    1. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
       
      Oui mais il n'y a pas l'effet de transition : le changement est direct.
      0
      1. Coronier > avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention  
         
        Non, tu fais une GIF animée.

        Par exemple:
        - image 1 normale: bleue
        - image 2 temps0 : 100% bleu
        temps 1 : 20%vert 80% bleu
        t2: 40-60
        t3:60-40
        .... t5: 100%vert, pas de répétition.

        Avec le GIMP c'est facile à faire, tu fais des calques sur une image que tu superposes, puis tu exportes en .GIF
        0
      2. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511 > Coronier
         
        Seulement 5 temps, ça fait peux !
        Il en faudrai au moins 8 par seconde.
        0
      3. Coronier > avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention  
         
        Oui, j'avais la flemme de tout marquer :)
        Plus il y en a, mieux c'est. Disons que c'est utile quand tu ne veux pas mettre de Flash mais que tu veux des effets proches. Pour les onglets monochrome, javascript reste suffisant.
        0
      4. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511 > Coronier
         
        Pas besoin de Flash pour ce genre d'effet : Javascript suffit !
        Flash n'est a utilisé que lorsque c'est impossible à faire en Javascript (pour des intros notamment).
        Par contre, les .gif n'ont pas une aussi bonne qualité que les .png : 256 couleurs si je ne me trompe pas → pour un bouton contenant un dégradé, ça ne le fait pas d'trop.
        0
  2. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    C'est impossible, il faut utiliser du Javascript.
    0
  3. Utilisateur anonyme
     
    est en javascript on fait comment ? y aurait il un tuto pour cette méthode ?

    merci

    merci
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  7. Bpasto (3w.bpasto.fr)
     
    J'oubliai de dire c'est du java script (jQuery)
    0
  8. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    Avec JQuery c'est facilement faisable en faisant une animation personnalisée.
    https://jquery.com/
    0