28172 sujets

CSS et mise en forme, CSS3

[Solution] CSS dégradé

Bonjour à toutes et à tous,

CSS dégradé

Je dispose de Firefox 4.0 et de Notepad++ v5.8.5

J'utilise l'excellent article :
https://developer.mozilla.org/fr/Utilisation_de_d%C3%A9grad%C3%A9s
Je veux obtenir un dégradé linéaire. Dans ma feuille de style, je tape la commande, telle qu'elle se présente dans l'article.

body {
  background: -moz-linear-gradient(top, blue, white);
  }


Je n'obtiens pas de dégradé.
Où est l'erreur?

Avec mes remerciements
Cordialement
Papy
Salut, remplace les couleurs par des codes hexadécimale

genre :

background: -moz-linear-gradient(top, #00F, #FFF);


Sinon si ca ne fonctionne pas, c'est peut-être que tu n'a pas de balise body dans ton document HTML !
Salut,

Testé et ça fonctionne, par contre il y a répétition du dégradé (pas jolie).
Hello,

Je confirme : ça fonctionne aussi sous Firefox 3.6.16.
Rappel: ceci ne concerne que les navigateurs basés sur Gecko!
Merci à vous tous,

Je n'affiche toujours pas le dégradé. Il doit y avoir une erreur dans mon code.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
   <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
		<title>Site degrade</title>
	 <link rel="stylesheet" media="screen" type="text/css" title="style"
 href="css/styles.css">
   </head>
   <body>
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a arcu in justo aliquam cursus a sed risus. Integer semper odio nibh, ut cursus elit. Ut mollis sollicitudin sem, et auctor felis molestie vitae. Quisque varius sapien ipsum. Phasellus eget lacinia lacus. Donec ut vehicula lacus. Nam viverra bibendum sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin condimentum erat, ut tincidunt odio ultricies et. Vestibulum vitae nisl sit amet nulla rhoncus euismod venenatis ac tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec accumsan, lectus at malesuada semper, ante leo pulvinar diam, a adipiscing lacus purus interdum dolor. Nunc risus tellus, sodales at porta in, congue et mauris. Nam interdum est ut felis laoreet quis elementum erat ullamcorper. Suspendisse a felis dui, sit amet venenatis orci. Quisque suscipit blandit augue, a tincidunt nulla dignissim vel. Phasellus ante diam, mollis non porta quis, laoreet sed metus.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a arcu in justo aliquam cursus a sed risus. Integer semper odio nibh, ut cursus elit. Ut mollis sollicitudin sem, et auctor felis molestie vitae. Quisque varius sapien ipsum. Phasellus eget lacinia lacus. Donec ut vehicula lacus. Nam viverra bibendum sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin condimentum erat, ut tincidunt odio ultricies et. Vestibulum vitae nisl sit amet nulla rhoncus euismod venenatis ac tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec accumsan, lectus at malesuada semper, ante leo pulvinar diam, a adipiscing lacus purus interdum dolor. Nunc risus tellus, sodales at porta in, congue et mauris. Nam interdum est ut felis laoreet quis elementum erat ullamcorper. Suspendisse a felis dui, sit amet venenatis orci. Quisque suscipit blandit augue, a tincidunt nulla dignissim vel. Phasellus ante diam, mollis non porta quis, laoreet sed metus.</p>
		</div>
   </body>
</html>
//*********************************




body {
  background: -moz-linear-gradient(top, #00F, #FFF);
  }


Cordialement
Papy
Bonjour,

Pourrait-on connaître le contenu de ta feuille de style css/styles.css?
Sur Windows 7, Firefox 3.6.16, le dégradé fonctionne sans problème.
Merci Iddsoft,

Je suis sous Windows 7.
Tout se passe comme si le lien entre la feuille de styles et le fichier index ne fonctionnait pas.
J'ai placé un titre dans le fichier index. Je n'arrive pas à changer sa couleur à partir de la feuille de styles. D'autre part div.content ne semble pas fonctionner.

Voici ma feuille de styles

@charset "utf-8";
/* CSS Site degrade */

body {
  background: -moz-linear-gradient(top, #00F, #FFF);
  }
h1 {
color: red;
}
div.content {
width:600px; border:solid black 1px; margin: 10px auto; padding:10px;
}

p {color:#FFF;}


Je ne sais plus à quel saint me vouer.

Cordialement
Papy
Es-tu certain de ton chemin vers ce fichier ? (la feuille de style nommée "styles.css" se trouvant dans le dossier nommé "css")
Modifié par lddsoft (01 Apr 2011 - 16:16)
Merci Iddsoft,

Je ne m'explique pas ce qui arrive. Mon petit site, site_dégradé, est corrompu. J'en veux pour preuve que les mêmes codes placés dans un nouveau site, site_bien_dégradé, donnent les résultats attendus.

Dans le dossier site_bien_dégrade, je place le fichier index et un sous-dossier css. Je place le fichier styles.css dans le sous-dossier css.

Fichier index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta content="text/html; charset=ISO-8859-1"
 	http-equiv="content-type">
	 <link rel="stylesheet" type="text/css" href="css/styles.css">
 	<title>site_bien_degrade</title>
            <title>site bien degrade</title>
</head>
<body>
<h1>Site bien dégradé</h1>
</body>
</html>

Fichier styles.css

@charset "utf-8";
/* CSS site_bien_degrade */

body {
background: -moz-linear-gradient(top, blue, white);  /* figure 1 */
/*background: -moz-linear-gradient(left, blue, white);  figure 2    */
/*background: -moz-linear-gradient(left top, blue, white);  figure 3  */
}


Question
Est-il possible de détecter un site corrompu?

Je voulais savoir si les codes de l'article étaient opérationnels; j'ai la réponse, ils le sont.
La question que j'ai posée est donc résolue, à un détail près. 

background: -moz-linear-gradient(top, blue, white);

affiche des barres horizontales, alors qu'on attend une figure continue.

Cordialement
Papy
Modifié par Jean Sympa (01 Apr 2011 - 21:51)
Bonjour,

Voici la réponse à ton souci, avec en prime, une solution cross-browser :


html {height: 100%;}

body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
	background: -moz-linear-gradient(top, blue, white); /* pour Firefox 3.6+ */ 
	background: -webkit-gradient(linear, left top, left bottom, from(blue), to(white)); /* pour webkit */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='blue', endColorstr='white'); /* pour IE */
}

Cordialement
Modifié par lddsoft (02 Apr 2011 - 07:34)
Bonjour à toutes et à tous,

Voici la démarche et la solution

J'ai créé une maquette de site (site_degrade). Je voulais obtenir des dégradés de fond d'image et d'images. J'ai trouvé un article qui me paraissait intéressant: https://developer.mozilla.org/fr/Utilisation_de_d%C3%A9grad%C3%A9s
Mais, je n'ai pas pu afficher les dégradés.
J'ai constaté que ma maquette était corrompu. J'ai créé une nouvelle maquette (site_bien_degrade)

Avec cette nouvelle maquette j'ai affiché les premiers dégradés de l'article, à l'exception du premier. Je ne les ai pas tous testés. Le premier dégradé présentait des répétitions. Iddsoft que je remercie, m'a proposé une solution générale. J'ai extrais deux lignes de sa proposition. Cela permet d'afficher le premier dégradé de l'article, soit :


body {
    background-repeat: no-repeat; 
    background: -moz-linear-gradient(top, blue, white); /* pour Firefox 3.6+ */ 
}

Pour conclure, l'article est bon.

Cordialement
Papy
Modifié par Jean Sympa (04 Apr 2011 - 10:20)
Bonjour,

Une petite précision tout de même. La solution CSS que je t'ai proposée le 2 avril à 7H23 concerne la mise en dégradé du body!
C'est la raison pour laquelle, les lignes
html {height: 100%;}

body {
     height: 100%;
     margin: 0;
...
sont importantes pour propager le dégradé jusqu'au bas de page, sans l'effet "volet".
Les autres lignes permettent d'obtenir le même effet sur d'autres navigateurs (IE entre autres).
Ce qui est dit dans l'article que tu mentionnes ( https://developer.mozilla.org/fr/Utilisation_de_d%C3%A9grad%C3%A9s ) fonctionne très bien tel quel pour un autre élément que le body, et à condition d'être sur un navigateur Gecko.
Cordialement
Modifié par lddsoft (04 Apr 2011 - 11:18)
Sujet clos
Aller à