Aller au contenu

Problème gradient background


truitas

Sujets conseillés

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é par truitas
Lien vers le commentaire
Partager sur d’autres sites

Lien vers le commentaire
Partager sur d’autres sites

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/

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...