Comment créer cette effet en CSS/HTML ?
Résolu/Fermé
Utilisateur anonyme
-
24 nov. 2009 à 22:59
avion-f16 Messages postés 19244 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 17 avril 2024 - 29 déc. 2009 à 16:13
avion-f16 Messages postés 19244 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 17 avril 2024 - 29 déc. 2009 à 16:13
A voir également:
- Comment créer cette effet en CSS/HTML ?
- Comment créer un groupe whatsapp - Guide
- Créer un compte gmail - Guide
- Créer un compte google - Guide
- Créer un compte instagram - Guide
- Comment creer un pdf - 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
19244
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
17 avril 2024
4 496
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
19244
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
17 avril 2024
4 496
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.