Précision sur linear-gradient

Bonjour,

Voilà, j'expérimente un menu puisé sur le net dont voici une version simplifiée :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!DOCTYPE html>
<!-- norme html5 -->
<html lang="fr">
	<head>
		<meta http-equiv ="content-type" content="text/html; charset=UTF-8" />
		<title>Menu centré</title>
		<link rel="stylesheet" type="text/css" href="devmenucentre.css" />
	</head>
	<body>
		<ul id="nav"><!--
		--><li><a href="#">Accueil</a></li><!--
		--><li><a href="#">Services</a></li><!--
		--><li><a href="#">À propos</a></li><!--
		--><li><a href="#">Contact</a></li><!--
		--><li><a href="http://www.creativejuiz.fr/blog/tutoriels/creer-menu-horizontal-centre-css-sans-javascript#ex1" target="blank" title="Auteur">Auteur</a></li>
		</ul>
	</body>
</html>

Code:

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
62
 
/* Début du menu */
#nav {
	padding: 0; margin: 0; /* les puces disparaissent */
	/* text-align: center;*/ /* centrer le texte  au milieu de la page, margin semble suffisant !!! */
	/* essai */
		width: 85%;
		margin: auto; /* le margin de la ligne 3 peut-être supprimé */
		border: 1px solid #333;
		border-top-color: #707070;
		background-color: #5E5E5E;
		background: -moz-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
		background: -webkit-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
		background: -ms-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
		background: -o-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
		background: linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
		text-align: center;
		height: 36px;
		-webkit-box-shadow: 0 1px 3px #999;
		-moz-box-shadow: 0 1px 3px #999;
		box-shadow: 0 1px 3px #999;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
}
#nav li {
	display: inline; /* affichage en ligne */
	list-style: none; /* nécessaire pour IE7 */
}
#nav a {
	display:inline-block;
	margin: 0 30px; /* Première valeur pour : top et bottom, deuxième valeur pour : right et left pg 65*/
	/* essai */
		height: 36px;
		margin:0;
		padding: 0 35px;
		line-height: 36px;
		border-left: 1px solid #555;
		border-right: 1px solid #888;
		text-decoration: none;
		color: white;
		text-shadow: -1px -1px 0 #444;
		font-family: Helvetica, Arial, Verdana, sans-serif;
		font-size: 1em;
}
#nav :first-child a {
		border-left: 0; /* supprime le bord de gauche du menu */
    }
#nav :last-child a {
		border-right: 0; /* supprime le bord de droite du menu */
    }
 
#nav a:hover, #nav a:focus {
		background-color: #3E3E3E;
		background: -moz-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
		background: -webkit-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
		background: -ms-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
		background: -o-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
		background: linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
		text-shadow: -1px -1px 0 #000;
    }
/* fin du menu */

Et j'aimerais comprendre totalement les lignes :

Code:

1
2
3
4
5
6
 
background: -moz-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
		background: -webkit-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
		background: -ms-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
		background: -o-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
		background: linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;

Pour lesquelles je trouve des éléments de réponses sur le Web et ici et je voudrais être sûr de comprendre ceci :

Code:

repeat scroll 0 0 transparent;

Pour laquelle, je crois comprendre : répète les couleurs citées ci-avant en appliquant une transparence ! Est-ce bien cela ?

Vous trouverez un apperçu ici. N'hésitez pas à critiquer, c'est le but aussi !
Merci pour votre aide !

Cordialement,

Bonjour,
Code:

1 2 3 4 5 -webkit /* Safari 3.0 */ -moz /* Gecko 1.9.2 (Firefox 3.6) */ -o /* Opera 9.5 */ /*Pas de préfixe :*/ /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
Pour un background en CSS : tu as le choix d'utiliser le raccourci Background, et dans ce cas tu as accès à :

- background-color
- background-image
- background-repeat
- background-attachment
- background-position

Dans ton cas :
Code:

1 2 3 4 5 6 background-color : /*ton linear gradient*/ background-image : /*aucune*/ background-repeat:repeat; background-attachment : scroll; background-position:0 0;
En décomposant ainsi tu peux comprendre rapidement la signification de ton code CSS

Bonjour Jacques,

Si je comprends bien, je peux aussi décomposer le dernier mot de la ligne. Ce qui donnerait :

Code:

background-color:transparent;

Merci pour ta réponse !

Bonjour,

inutile de t'encombrer l'esprit... :

Ultimate CSS Gradient Generator

Et dans le glossaire CSS* :

III-B-5. Fond tout-en-un | background

* C'est bien de le citer et de faire un lien. Encore faut-il lire jusqu'au bout ! ;)