Comment créer cette effet en CSS/HTML ?
Résolu/Fermé
Utilisateur anonyme
-
24 nov. 2009 à 22:59
avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 - 29 déc. 2009 à 16:13
avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 - 29 déc. 2009 à 16:13
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
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:
- Comment créer cette effet en CSS/HTML ?
- Comment créer un groupe whatsapp - Guide
- Créer un compte google - Guide
- Comment créer un compte gmail - Guide
- Créer un compte instagram sur google - Guide
- Créer un lien pour partager des photos - Guide
7 réponses
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")
}
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")
}
avion-f16
Messages postés
19252
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 février 2025
4 505
24 nov. 2009 à 23:07
24 nov. 2009 à 23:07
C'est impossible, il faut utiliser du Javascript.
Utilisateur anonyme
25 nov. 2009 à 06:28
25 nov. 2009 à 06:28
est en javascript on fait comment ? y aurait il un tuto pour cette méthode ?
merci
merci
merci
merci
Atropa
Messages postés
1940
Date d'inscription
mercredi 25 juin 2008
Statut
Membre
Dernière intervention
11 mai 2014
274
25 nov. 2009 à 06:55
25 nov. 2009 à 06:55
bonjour,
voilà un tuto qui donne le principe :
https://openclassrooms.com/fr/courses
voilà un tuto qui donne le principe :
https://openclassrooms.com/fr/courses
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bonjour pierre2503,
voici deux lien qui pourrai t'aider
https://snook.ca/
pages exemple :https://snook.ca/technical/jquery-bg/
@+
voici deux lien qui pourrai t'aider
https://snook.ca/
pages exemple :https://snook.ca/technical/jquery-bg/
@+
avion-f16
Messages postés
19252
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 février 2025
4 505
29 déc. 2009 à 16:13
29 déc. 2009 à 16:13
Avec JQuery c'est facilement faisable en faisant une animation personnalisée.
https://jquery.com/
https://jquery.com/
25 nov. 2009 à 13:31
25 nov. 2009 à 15:28
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
25 nov. 2009 à 16:00
Il en faudrai au moins 8 par seconde.
25 nov. 2009 à 16:21
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.
25 nov. 2009 à 18:56
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.