Utilisé un canvas en Background d'un div ou d'un Td

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Mav54fr

Utilisé un canvas en Background d'un div ou d'un Td

Message par Mav54fr »

Salutation a tous,

Je travail sur le webdesign d'une application fullweb, qui jusqu'a maintenant etait supporté que sur IE.
Dans l'optique de devenir compatible Firefox et autre Navigateur (safari par ex), je suis entrain de remanier tout mon code.

Mais je me trouve devant un probleme de rendu, les "skinner" de l'application utilisent regulierement des degradés grace a la techno proprio d'IE:
Filter gradient.
Comme tout le monde le sait il est impossible de faire du degradé avec les css a l'heure actuelle. Donc sous firefox le seul moyen est d'utilisé une image gif avec un degré de transparence plus ou moins important selon le type de degradé voulus.
Neanmoins cette methode ne me convient pas, mes utilisateurs doivent pouvoir choisir une couleur de debut et une couleur de fin pour le degradé.

C'est alors qu'il m'est venu l'idée d'utilisé une techno type SVG, VML ou Canvas. Malheureusement, le vml n'est pas gerer par Firefox, SVG est trop lourd a mettre en place (modif cote serveur si j'ai bien compris + creation de +svg et utilisation de embeded), donc il me reste plus que canvas.
Mais avec le peu de doc que j'ai trouvé sur Canvas, j'ai bien pu deciné un joli rectange avec un degradé, mais je n'ai jamais reussi a l'integrer dans un TD ou un Div et placer par exemple un lien Texte de dedans.

Alors mes questions sont :
Pensez vous que c'est possible ?
Connaissez vous un bon site avec une doc sur Canvas, ou encore de tutorials.

Merci d'avance.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
chBok
Iguane
Messages : 991
Inscription : 17 oct. 2003, 19:17

Message par chBok »

Pour l'instant, il existe un tutoriel canvas sur MDC. Regarde déjà s'il répond à tes attentes.
Mav54fr

Message par Mav54fr »

Oui merci je suis deja en train de faire joujou avec mais c'est relativement limité comme tutorial.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
mav54fr

Message par mav54fr »

Ahah j'ai peut etre trouvé mon bonheur ;
http://www.agustinfernandez.com.ar/proyectos/canvas/
J'ai pris contact avec l'auteur, histoire de voir si il peut me guider.
Je vous tiens au courant, mais cela est tres prometteur.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
GregK84
Lézard à collerette
Messages : 360
Inscription : 15 oct. 2004, 15:24

Message par GregK84 »

Je ne me suis pas attardé sur le sujet, mais si je ne me trompe pas canvas ne fonctionne pas sous ie !

si la taille est fixe, pourquoi ne realise tu pas tes degradés en png24 et les placés avec des css ?

voir pourquoi pas ... directement créer les images avec GD en php ?

enfin ce n'est qu'une idee comme ca :d

a bientot

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.12) Gecko/20050919 Firefox/1.0.7
Firefox,
Time for the hunted to be the hunter.

Config : WinXp, FF 1.0, TB 1.0, SB 0.2.
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message par Benoit »

GregK84 a écrit :Je ne me suis pas attardé sur le sujet, mais si je ne me trompe pas canvas ne fonctionne pas sous ie !
http://excanvas.sourceforge.net/

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0
♫ Li tens s'en veit, je n'ai riens fais ;
Li tens revient, je ne fais riens. ♪
Mav54fr

Message par Mav54fr »

Parceque sous IE il y a les filter gradient, une techno msdn.

Pourquoi je n'utilise pas de png, parceque la taille de la zone a remplir est inconnus, parceque l'utilisateur peut a tout moment changer le gradient.

Pourquoi pas le php, parceque je ne suis pas dans un site php.
C'est un site Asp/html qui est generer par un moteur en objet com.
Je suis dans une application professionnelle, et non pas dans un site lambda :)
(c'est pas pour ca que je concidere les sites perso comme de la beeep, mais il n'y a pas les meme imperatif).

Pour ceux qui sont interessé, voici la solution avec des canvas, qui fonctionne en theorie sous firefox (1.1 min) Opera (7 min je crois) et Safari.
Regarder et pleurer comme c'est trop beau ;)
http://www.agustinfernandez.com.ar/proy ... Gradients/

Merci à agustin Fernandez, qui m'a pondu ca cette nuit, comme quoi y'a des bons dans tout les pays, felicitation a lui.
Car mine de rien il vient de repondre a l'attende de millier de webmaster qui n'arrivait pas a faire de degradé dans firefox en dehors de la methode barbar des gif avec transparence progressive.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.0; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 4 invités