Précision sur linear-gradient

**friendofweb** · 12/10/2015, 15h54

Bonjour,

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

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
 
<!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 css :

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
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 css :

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

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 css :

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

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,

**Jacques Beauregard** · 12/10/2015, 16h43

Bonjour,

Code :

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

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 :

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

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