11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Est-il possible de créer une couleur de fond dégradée en js ?

Bonjour,

J'aimerais appliquer un fond de couleurs en dégradé sur les titres d'une page.
Comme dans cet exemple: upload/6470-titre.gif

Biensûr, c'est très simplement réalisable en CSS avec une image d'1px de haut mais j'aimerais limiter le nombre d'images.

Je sais qu'il est possible de créer des dégadés de couleurs dans certains langages donc peut-être que js le peut aussi.

J'aimerais donc savoir si c'est possible... et comment (une source pourrait suffir Smiley cligne )

Merci beaucoup
Modifié par Mathieu_vd (18 Aug 2006 - 15:45)
Je ne vais pas vraiment répondre à ta question, car à ma connaissance il n'y a pas de manière simple de créer de dégradé en javascript. Il faut dire que ce langage n'est pas vraiment fait pour ça.
Pour créer des graphiques côté client il existe le langage SVG qui n'est hélas encore pas très bien supporté par les navigateurs. Voici ce que donnerait ton titre en SVG.
<?xml version="1.0" encoding="UTF-8"?>
<svg width='250' height='25'>
	<defs>
		<linearGradient id='degradeRouge'>
			<stop offset='0%' style='stop-color:#dc143c;' />
			<stop offset='100%' style='stop-color:#ff4500;' />
		</linearGradient>
	</defs>
	<rect x='0' y='0' width='250' height='25' style='fill:url(#degradeRouge);'/>
	<text x='25' y='15' style='font-size:13; font-family:Verdana; font-weight:bold; fill:white;'>Immobilier</text>
</svg>

Sinon tu peux générer ton image côté serveur, avec une librairie ad'hoc ImageMagick, GD,...
Modifié par stephane (18 Aug 2006 - 10:40)
Bonjour,

Rapidement:

Beau morceau de SVG. Mais le jour où l'on se mettra à mettre du SVG dans XHTML pour réaliser ce type d'effet visuel sur des titres, la séparation du contenu et de la présentation en prendra un grand vieux coup dans l'aile... Smiley cligne
Laurent Denis a écrit :
la séparation du contenu et de la présentation en prendra un grand vieux coup dans l'aile... Smiley cligne

C'est l'éternel problème des graphiques de présentation qu'il vaut mieux créer côté serveur (quand on ne peut pas les créer une bonne fois pour toute). Cela dit le SVG présente par rapport au simple CSS de nombreuses fonctionnalités (dimensionnement, animation,...).
En utilisant bien le DOM, on peut imaginer un script client qui encapsule tous les titres <hn> dans du SVG (en pratique ça doit être une horreur à tester vu le support actuel du SVG) et garder la séparation entre contenu et présentation.
Oui, d'expérience, c'est une horreur à tester Smiley cligne

Soyons simples, pour revenir au sujet: quel est le problème avec le gif en background CSS ?
Laurent Denis a écrit :
Quel est le problème avec le gif en background CSS ?

Ce n'est pas vraiment un problème.

J'essaye de limiter le nombre d'image pour diminuer le poids de la page et les requêtes au serveur.

Pour moi, la meilleure solution serait de ne pas mettre de dégradé dans le titre. Mais ce sera encore l'occasion pour le graphiste avec qui je bosse de dire que je limite sa créativité Smiley biggrin

D'où mon espoir de pouvoir générer ce dégradé en JS (mais j'y cois pas vraiment)

stephane a écrit :
Sinon tu peux générer ton image côté serveur, avec une librairie ad'hoc ImageMagick, GD,...

Peux-tu m'en dire plus ?
Modifié par Mathieu_vd (18 Aug 2006 - 13:08)
Générer un dégradé côté serveur, c'est:
- générer un gif (^^)
- générer un flash (technique sFir et apparentées)

Il peut y avoir des gains côté maintenance, mais pas côté quantité d'images ou d'objets téléchargés.

Enfin, s'il y a des optimisations à réaliser, les chercher du côté d'images minimales de ce type n'a de sens qu'en dernier ressort, à des fins plutôt cosmétiques. Voire anecdotique Smiley cligne
Mathieu_vd a écrit :

Peux-tu m'en dire plus ?


Juste pour te répondre même si ça sort un peu du sujet de ce forum, tu peux par exemple faire un petit script serveur qui exécute la commande suivante (librairie ImageMagick requise) :

convert -size 50x250 gradient:#dc143c-#ff4500 -rotate "90" degradeRouge.png


Qui te génère un joli rectangle avec un dégradé.
Cela dit, comme le fait remarquer Laurent Denis, c'est vraiment écraser un moustique avec une enclume.
Sujet clos
Aller à