un fond dégradé en css

un fond dégradé en css Noter :

#1 zirone

Groupe : Hubmaster
Messages : 149
Inscrit(e) : 13-août 05
Genre:Homme
Localisation:Paris, France

Posté 24 août 2005 - 17:02

Bonjour.

J'ai cherché sur google, je n'ai rien trouvé.
Sauriez-vous comment il faut si prendre pour avoir un fond en dégradé entièrement régit en css?

par exemple: http://www.tv.com/

le fond part du noir a un bleu noir.

Merci beaucoup. :wub:

Ce message a été modifié par zirone - 24 août 2005 - 17:03.

Mon site Internet sur la série télévisée Battlestar Galactica. Mon forum séries télévisées.

Haut

#2 Dudu

Groupe : Admin
Messages : 3 797
Inscrit(e) : 09-avril 05

Posté 24 août 2005 - 17:47

Tu fais comme le site que tu lies:

tu crées une image de 1px de large sur un bon millier et demi de pixels de haut. Cette image sera un degradé
tu la définis en image de fond dans ta CSS

Haut

#3 Athmos

Groupe : Membre
Messages : 92
Inscrit(e) : 18-janvier 05

Posté 25 août 2005 - 13:04

J'ajoute une petite astuce.

Dans l'exemple du site de TV que tu propose, tu créé effectivement un gif (d'un pixel de large sur une hauteur de 1000px ou plus selon la hauteur que ta page maxi aura).

Du noir au bleu. Et en couleur de fond, tu mets le même bleu que celui qui est en bas de ton dégradé. Comme ça, si tu as une page vraiment grande, ou si une personne regarde ton site en très haute résolution, le fond restera joli à voir même s'il n'y a plus de dégradé.

oO° ATHMOS °Oo
Webmunster
moulé à la louche !

Haut

#4 klelugi

Groupe : Hubmaster
Messages : 322
Inscrit(e) : 20-mars 05
Genre:Homme
Localisation:Paris Plage

Posté 25 août 2005 - 15:03

Salut Zirone,

Dans l'exemple que tu donnes il faut effectivement faire comme Dudu et Athmos t'ont dis.

Une image 1 px en dégradé sur une bonne hauteur puis quand même préservé une couleur de fond de la même couleur que le bas de ton dégradé au cas ou certains visiteurs auraient des réso d'écran immense (du moins supérieure à la hauteur de ton image de fond.

A cela j'ajouterai que pour donner le même effet que sur le site exemple, il serait bon de "fixer" le fond, ainsi quelque soit la hauteur de ta page tu aura toujours le même dégradé.
Procéde ainsi dans ton CSS :

background: #couleur-de-fond url(background-de-1-px.jpg) repeat-x fixed top left;

Ca devrait faire l'affaire

massage, huiles essentielles, Credit en ligne

Haut

#5 zirone

Groupe : Hubmaster
Messages : 149
Inscrit(e) : 13-août 05
Genre:Homme
Localisation:Paris, France

Posté 25 août 2005 - 20:09

merci à tous! :blush:

Mon site Internet sur la série télévisée Battlestar Galactica. Mon forum séries télévisées.

Haut

#6 Xavier

Groupe : Membre
Messages : 377
Inscrit(e) : 05-juillet 04

Posté 26 août 2005 - 10:01

Un dernier truc : ne pas oublier de définir comme couleur de fond la couleur du dernier pixel de l'image...

En effet, ceux qui ont une haute résolution verront la couleur de fond en-dessous de l'image dégradée. Si elle n'est pas la même, ça donne une vilaine coupure

(je précise parce que ça se voit assez souvent...)

Extensions en français pour Mozilla

Haut

#7 gafa

Groupe : Membre
Messages : 2
Inscrit(e) : 27-octobre 05

Posté 27 octobre 2005 - 21:15

bonsoir,
ce fil de discussion n'est plus très bavard mais pour un dégradé de fond de page vous pouvez faire :
<body style="
width:100%;
height:100%;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=black,en
ColorStr=#401700);">

Attention cette formule n'est compatible apriori qu'avec IE, pour aller plus loin:
http://msdn.microsoft.com/library/default....rs/gradient.asp

A+

Haut

#8 Dudu

Groupe : Admin
Messages : 3 797
Inscrit(e) : 09-avril 05

Posté 27 octobre 2005 - 21:21

gafa, le jeudi 27 octobre 2005, 22h15, dit :

Attention cette formule n'est compatible apriori qu'avec IE<{POST_SNAPBACK}>

Normal car ~~cette horreur~~ ce truc pardon, est complètement propriétaire Microsoft.

À quoi peut bien nous servir un sombre machin invalide qui marche uniquement avec le pire navigateur du marché ? :unsure:

Merci quand même pour l'intention, et bienvenue sur le Hub.

PS: c'est très normal, tes sauts de ligne au beau milieu de tes attributs ? Au delà d'un aspect de compatibilité avec tous les navigateurs (qui sauf ton respect ne semble pas être ton fort), ce n'est pas extrêmement bon pour la bande passante par exemple.. j'espère que tu ne le fais pas pour toutes les balises de toutes tes pages :wacko: