Problème gradient background

truitas · 1 Août 2011

bonjour à tous,

j'ai in problème d'affichage de ma couleur de background en dégradé:

Sous firefox et chrome au lieu d'avoir un dégradé de haut en bas j ai une succession de lignes dégradées.

Sous IE 9 cela ne fonctionne pas.

Avez vous une solution? merci


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<style type="text/css">
body{	
background: #a1dbff; /* Old browsers */
background: -moz-linear-gradient(top, #a1dbff 0%, #cbebff 53%, #f0f9ff 100%);/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a1dbff), color-stop(53%,#cbebff), color-stop(100%,#f0f9ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1dbff', endColorstr='#f0f9ff',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* W3C */

    }
</style>

</body>
</html>

Modifié 1 Août 2011 par truitas

**captain_torche** · 1 Août 2011

C'est tout simplement parce que tu n'as rien dans ta page, et que ton body ne fait par conséquent que quelques pixels de haut.

Il faut l'agrandir en lui disant de prendre toute la hauteur, par exemple :

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

truitas · 1 Août 2011

merci beaucoup,

on ne sais jamais si ca peut servir quelques liens vers des générateurs css permettant de travailler les gradient, shadow, les box etc:

http://css3please.com/"

http://www.impressivewebs.com/css3-click-chart/"

http://westciv.com/tools/"

http://www.display-inline.fr/projects/css-gradient/"

http://gradients.glrzad.com/"

http://www.colorzilla.com/gradient-editor/"

http://www.css3files.com/gradient/"

Tomyweb · 4 Août 2011

Bonjour

tu peux t'inspirer sur Gradients glrzad, il y a le code detaille

truitas · 5 Août 2011

Bonjour

tu peux t'inspirer sur Gradients glrzad, il y a le code detaille

bonjour et merci tomyweb,

le site que tu recommandes et que j'avais mis en lien ne propose pas la compatibilité pour les différentes versions des navigateurs.

J'ai utilisé:http://www.colorzilla.com/gradient-editor/

En plus de css-please mis dans le post précédent 2 sites excellents:

http://www.css3files.com/

Générateur de box très complet:

http://css3.mikeplate.com/

Connexion

Problème gradient background

Sujets conseillés

truitas

captain_torche

truitas

Tomyweb

truitas

Veuillez vous connecter pour commenter

Parcourir

Activité