Animation webkit, moz, ie ne fonctionne pas

**ickyknox** · 04/09/2012, 11h50

Bonjour,

sur :
http://icreatorbeta.free.fr/

j'ai dans mon menu des boutons (accueil, blog, contact ....).
En passant la souris dessus, le bouton devient noir INSTENTANÉMENT.

J'aimerai que le bouton devienne noir mais progressivement. Et qu'il redevienne normal en enlevant la souris, progressivement aussi.

Seulement mon code n'a pas l'air de fonctionner.

Je voulais savoir si vous aviez une idée d'où peut venir mon problème ?

Je vous remercie d'avance !

NB : l'animation est appliquée que dans le bouton ACCUEIL, je ferais le reste une fois que le code sera juste

HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <!-- BOUTONS ACCUEIL -->
 
			<nav id="heada"> 
				<ul id="header-menu" >
					<li class="header-menu-choix" >
 
<a href="#" style="-webkit-	transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out;transition: all 0.8s ease-in-out;">Accueil</a></li>
 
					<li class="header-menu-choix"><a href="#">Blog</a></li>
					<li class="header-menu-choix"><a href="#">Contact</a></li>
					<li class="header-menu-choix"><a href="#">Parrainage</a></li>
					<li class="header-menu-choix"><a href="#">Produits</a></li>
					<li class="header-menu-choix"><a href="#">Partenaires</a></li>
				</ul>
			</nav> 
 
  						</div>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
/* ACCUEIL */
 
 
#heada {
	width: 100%;
	float:left;
}
#header-menu {
	margin: 0;
	padding: 1ex;
}
.header-menu-choix {
	display: inline-block;
	margin-top: 10px;
 
}
.header-menu-choix a {
	display: block;
	color: black;
	font-size: 150%;
	padding: 1em;
	font-variant: small-caps;
	text-decoration: none;
	line-height: 10px;
	border-radius: 2ex;
 
	-o-transition: background-color 0.8s; -moz-transition: background-color 0.8s; -webkit-transition: background-color 0.8s; transition: background-color 0.8s;
 
 
	}
.header-menu-choix a:hover {
 
 
background: rgb(79,80,86); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(79,80,86,1) 0%, rgba(73,76,79,1) 45%, rgba(10,14,10,1) 60%, rgba(10,8,9,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(79,80,86,1)), color-stop(45%,rgba(73,76,79,1)), color-stop(60%,rgba(10,14,10,1)), color-stop(100%,rgba(10,8,9,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5056', endColorstr='#0a0809',GradientType=0 );  /* IE6-9 */
 
	text-decoration: none;
	color: white;	
	}

<config>Mac OS X / Chrome 21.0.1180.89</config>

**Muchos** · 06/09/2012, 01h41

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Effet sur bouton</title>
	<style type="text/css">
ul {padding: 0;}
li {display: inline;}
a {
        padding: 1em;
        color: black;
        text-decoration: none;
        border-radius: 1ex;
        font-variant: small-caps;
        -webkit-transition: all 0.8s ease-in-out;
        -moz-transition: all 0.8s ease-in-out;
        -o-transition: all 0.8s ease-in-out;
        transition: all 0.8s ease-in-out;
}
a:hover{
        color: white;
        background-color: black;
}
</style>
</head>
<body>
	<ul>
		<li><a href="#">Accueil</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Parrainage</a></li>
		<li><a href="#">Produits</a></li>
		<li><a href="#">Partenaires</a></li>
	</ul>
</body>
</html>

Je voulais savoir si vous aviez une idée d'où peut venir mon problème ?

Vous devez comprendre que c'est votre méthode, le problème. Vous ne comprenez pas ce que vous faites ; on dirait que vous prenez des bouts de code un peu partout.
Codez au plus simple, puis ajoutez petit à petit des blocs de codes que vous avez testés. Dans tous les cas, notez les ajouts pour pouvoir revenir à la dernière version stable à tout moment…

**Torgar** · 06/09/2012, 11h19

Sauf que le dégradé n'est pas repris dans ton exemple Muchos et si on l'enlève du code de ickyknox, la transition fonctionne très bien.

Je vais faire quelques tests et je reviens vers vous.

**ickyknox** · 06/09/2012, 11h21

merci torgar,
j'ai essayé aussi d'ajouter mon dégradé au code de muchos, mais ca bloque.

Dans le css j'ai repris muchos avec mon dégradé.
Sur ce code, j'ai laissé background-color. La transition fonctionne bien , mais la couleur du bouton est entièrement grise (donc j'ai pas mon dégradé).
Si je met background , j'ai bien mon dégradé, mais la transition est soudaine (et non progressive).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
ul {padding: 0;}
li {display: inline;}
 
.header-menu-choix a {
	display: block;
	color: black;
	font-size: 150%;
	padding: 1em;
	font-variant: small-caps;
	text-decoration: none;
	line-height: 10px;
	border-radius: 2ex;
	font-variant: small-caps;
 
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
	}
 
.header-menu-choix a:hover {
 
 
background-color: rgb(79,80,86); /* Old browsers */
background-color: -moz-linear-gradient(top,  rgba(79,80,86,1) 0%, rgba(73,76,79,1) 45%, rgba(10,14,10,1) 60%, rgba(10,8,9,1) 100%); /* FF3.6+ */
background-color: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(79,80,86,1)), color-stop(45%,rgba(73,76,79,1)), color-stop(60%,rgba(10,14,10,1)), color-stop(100%,rgba(10,8,9,1))); /* Chrome,Safari4+ */
background-color: -webkit-linear-gradient(top,  rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* Chrome10+,Safari5.1+ */
background-color: -o-linear-gradient(top,  rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* Opera 11.10+ */
background-color: -ms-linear-gradient(top,  rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* IE10+ */
background-color: linear-gradient(to bottom,  rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5056', endColorstr='#0a0809',GradientType=0 );  /* IE6-9 */
 
	text-decoration: none;
	color: white;	
	}

**Torgar** · 06/09/2012, 12h33

Donc, nous disions...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!doctype html>
<head>
    <title>Ma page de test</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="./main/js/jquery-ui/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="./main/js/jquery-ui/jquery-ui-1.8.16.custom.min.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
ul {
    padding: 0;
}
li {
    float: left;
    color: black;
    margin: 0 20px;
    text-decoration: none;
    border-radius: 1ex;
    font-variant: small-caps;
    background: -moz-linear-gradient(top, rgba(79,80,86,1) 0%, rgba(73,76,79,1) 45%, rgba(10,14,10,1) 60%, rgba(10,8,9,1) 100%) repeat scroll 0 0 transparent;
    list-style-type: none;
}
 
a {
    display: block;
    padding: 1em;
    color: black;
    text-decoration: none;
    font-variant: small-caps;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
    background-color: rgba(255, 255, 255, 1);
}
 
a:hover{
    color: white;
    background-color: transparent;
}
    </style>
 
    <script type='text/javascript'>
 
    </script>
</head>
<body>
    <article>
        <ul>
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Parrainage</a></li>
            <li><a href="#">Produits</a></li>
            <li><a href="#">Partenaires</a></li>
        </ul>
    </article>
    <footer>
 
    </footer>
</body>
</html>

Avec quelques explications :

on applique le dégradé sur les éléments de la liste (<li>) que l'on positionne en float ;
on met la transition sur les liens (<a>) avec une couleur blanche transparente pour masquer le dégradé des <li> ;
on rend le fond des liens transparent au passage de la souris pour ré-afficher le dégradé.

Je n'ai testé que sur Firefox et Chrome dernières versions, ne possédant que ceux-ci.

**ickyknox** · 07/09/2012, 12h42

Merci Torgar !!
c'est super ca marche enfin !
merci de t'être décarcassé pour moi !

là je suis en train de paufiner deux choses genent ; le menu prestation est décalé vers le bas, et les boutons ont un fond blanc au lieu de transparent :

http://icreatorbeta.free.fr/

je crois que c'est a { } car la balise <a> est utilisée dans d'autres div.
Comment puis je faire pour la différencier des autres s'il vous plait?

Animation webkit, moz, ie ne fonctionne pas

Animation en CSS

Vue hybride

Discussions similaires

Partager

Partager