Comment créer cette effet en CSS/HTML ?

Résolu
Utilisateur anonyme -  
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
      Oui mais il n'y a pas l'effet de transition : le changement est direct.
      0
    2. Coronier
      @avion-f16Non, 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
    3. avion-f16
      @CoronierSeulement 5 temps, ça fait peux !
      Il en faudrai au moins 8 par seconde.
      0
    4. Coronier
      @avion-f16Oui, 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
    5. avion-f16
      @CoronierPas 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
    C'est impossible, il faut utiliser du Javascript.
    0
    1. Utilisateur anonyme
      est en javascript on fait comment ? y aurait il un tuto pour cette méthode ?

      merci

      merci
      0
      4. Bpasto (3w.bpasto.fr)
        J'oubliai de dire c'est du java script (jQuery)
        0