18041 sujets

Questions générales et questions de débutants

Gradient ou dégradés, compatible sous FF et IE

Bonjour

j'ai trouvé ça
http://webdeveloper.earthweb.com/repository/javascripts/2003/07/221381/gradientbackground.html
pour faire un dégradé mais cela ne marche que sur IE
et pas sous FireFox

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Gradient background</title>
</head>

<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ccffcc', startColorstr='#FFFFFF', gradientType='0');">
<p align="center"><b><font size="6">Gradient background.</font></b></p>
<p><body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ccffcc', 
startColorstr='#FFFFFF', gradientType='0');"></body></p>
<p>You may change any parameters like <b>endColorstr, startColorstr </b>and<b> gradientType</b></p>
<p><a href="http://www.shvaika.ic.ck.ua/">Autors site </a></p>
</body>

</html>




existe-t'il une possibilité de trouver un script aussi simple et léger
qui fonctionnerait sur les deux ?


Merci
Modifié par trobador (19 Dec 2006 - 12:44)
Il y a deux manières assez élégantes de le faire. La première consiste a envoyer une requete Ajax vers un script PHP qui te generera à la volée ton dégradé selon les paramètres passés. Je pense même que tu peux mettre l'adresse de ton php comme url d'image. exemple : 


<img src="createGradient.php?topColor=#336699&bottomColor=#FFFFFF&height=20px" />


attention, le PHP doit retourner une image, qui d'ailleurs peut etre récupérée sur le disque si elle a déjà été créee.

Deuxième technique, c'est de faire ton dégradé en CSS avec des Divs.

Tout cela a l'air très lourd, mais pour l'avoir testé je peux te dire que c'est beaucoup plus rapide qu'on l'imagine. Pour l'aglorithme qui crée le dégradé, c'est pas compliqué. Si tu veux faire un dégradé vertical de 20px de haut, comme dans mon exemple, et bien il te suffit de calculer les couleurs intermediaires des 20 etapes. prenon la composante bleue initiale dans #336699, c'est 33. et la composante finale est FF. Transforme ces deux valeurs en decimale pour plus de confort, puis divise la difference (FF-33) par 20, et tu obtiendra le "pas" d'évolution de la couleur sur chaque grade. A faire distinctement sur les 3 composantes RGB et le tour est joué. chez moi ca fait 10 lignes coté serveurs, 1 seule coté clients. et c'est instantanné avec une connection DSL classique.
Modifié par michael.js (19 Dec 2006 - 12:02)
Ouf !

Je te remercie Michael

Je voulais le faire sans images
j'aimerais bien le faire effectivement en CSS

et c'est vrai que cela m'a paru assez lourd

plus de 20 lignes en tout cas
sur cet exemple :
http://www.designdetector.com/demos/css-gradients-demo-1.php


c'est de quelque chose comme ça dont tu me parles ? (sinon je suis désolé si je n'ai pas bien compris !)
...et tu dis que finalement ce n'est pas lourd
je vais essayer alors !

merci
Modifié par trobador (19 Dec 2006 - 12:43)
Bonjour,
trobador a écrit :
plus de 20 lignes en tout cas
sur cet exemple :
http://www.designdetector.com/demos/css-gradients-demo-1.php
En effet, ça fait 18 Ko sur cette page pour l'effet de dégradé... A mon avis, l'utilisation d'une image est parfaitement adpatée à ton besoin. Si tu as besoin que la couleur soit dynamique (ce qui est quand même assez rare), tu peux ruser avec une image png + une couleur de fond, et le filtre en commentaires conditionnels pour IE < 6.
Modifié par Eldebaran (19 Dec 2006 - 13:41)
Oui c'est finalement ce que je vais faire, j'y ai bien réflechit
si seulement c'était dynamique ... je l'aurais autrement
(le truc rien que pour IE, c'était bien ... dommage cela ne marche pas pour FF)

le problème de l'autre solution est qu'elle est paramétrée pour tant de lignes et donc un certains nombre de pixels (c'est pareil pour l'image, c'est vrai ! mais c'est tellement plus simple !) et puis si ce n'était que pour un dégradé ...moi je souhaite faire ça plusieurs fois dans ma page
pour chaque cadre

je pense que je vais mettre un image
très légère

merci de votre aide Smiley smile
Sujet clos
Aller à