Comment créer cette effet en CSS/HTML ?

Résolu
Utilisateur anonyme -  
avion-f16 Messages postés 19252 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
A voir également:

7 réponses

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
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
Oui mais il n'y a pas l'effet de transition : le changement est direct.
0
Coronier > avion-f16 Messages postés 19252 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
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507 > Coronier
 
Seulement 5 temps, ça fait peux !
Il en faudrai au moins 8 par seconde.
0
Coronier > avion-f16 Messages postés 19252 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
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507 > 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
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
C'est impossible, il faut utiliser du Javascript.
0
Utilisateur anonyme
 
est en javascript on fait comment ? y aurait il un tuto pour cette méthode ?

merci


merci
0
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
bonjour,

voilà un tuto qui donne le principe :

https://openclassrooms.com/fr/courses
0

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

Posez votre question
Bpasto (3w.bpasto.fr)
 
Bonjour pierre2503,
voici deux lien qui pourrai t'aider
https://snook.ca/
pages exemple :https://snook.ca/technical/jquery-bg/
@+
0
Bpasto (3w.bpasto.fr)
 
J'oubliai de dire c'est du java script (jQuery)
0
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
Avec JQuery c'est facilement faisable en faisant une animation personnalisée.
https://jquery.com/
0