Dégradé dans un tableau...

Dégradé dans un tableau... - HTML/CSS - Programmation

Marsh Posté le 27-03-2007 à 23:40:03    

voila, je cherche à obtenir ce résultat dans un tableau quelconque :
 
http://img250.imageshack.us/img250/8016/tableaulw4.jpg
 
à partir de cette texture :
 
http://img374.imageshack.us/img374/3484/texturero9.jpg
 
j'imagine qu'il y a possibilité avec une feuille de style css mais après...
 
des idées ?

Reply

Marsh Posté le 27-03-2007 à 23:40:03   

Reply

Marsh Posté le 28-03-2007 à 11:43:11    

Hello,
 
D'abord il faut que ta texture intègre le dégradé, car je ne pense pas que ça soit possible directement en CSS.
 
Ensuite, tu encadres ton tableau d'un div, auquel tu appliques le style :
 
background : #000 url(texture.jpg) left top repeat-y;


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 28-03-2007 à 12:10:14    

le dégradé est possible via les trucs made in M$ qui exploitent DirectX (filter:shadow() il me semble) mais ça ne marchera que sous IE

Reply

Marsh Posté le 28-03-2007 à 12:36:50    

à banir ton idée ;)
 
cgo2 t'as donné la bonne solution :)

Reply

Marsh Posté le 28-03-2007 à 12:40:38    

Nederlands a écrit :

à banir ton idée ;)
 
cgo2 t'as donné la bonne solution :)


pas d'accord, car si le cadre a une taille dynamique, c'est impossible à faire.
 
l'idée de rufo est bonne dans la mesure où :
1/ le code à la sauce microsoft ne sera reconnu que par IE, donc aucune régression pour les autres navigateurs
2/ en CSS 2 ou 3 je sais plus, il y a des instructions qui permettent de faire pareil pour FF et Opéra
3/ FF et Opéra ont aussi des fonctions similaires "proprio"
4/ le portage des fonctions proprio Microsoft sont à l'étude par le W3C pour être intégrée dans le standard CSS, moyenant évidement modification de la syntaxe

Reply

Marsh Posté le 28-03-2007 à 12:43:20    

http://lists.w3.org/Archives/Publi [...] /0132.html
 
(par contre, je retrouve pas l'article exact)
 
mais notamment, mozilla utilise des choses similaires :
 
-moz-opacity
 
et de mémoire, c'est cette syntaxe qu'il est "prévu" de réutiliser, car plus générique.


Message édité par MagicBuzz le 28-03-2007 à 12:49:54
Reply

Marsh Posté le 29-03-2007 à 14:30:55    

MagicBuzz a écrit :

pas d'accord, car si le cadre a une taille dynamique, c'est impossible à faire.


 
Heing ? Ca veut dire quoi ça ? :heink: Evidemment que le "cadre" a une taille dynamique, et c'est pour ça que le background se repete verticalement (et horizontalement aussi, pourquoi pas).
 

MagicBuzz a écrit :

l'idée de rufo est bonne dans la mesure où :
1/ le code à la sauce microsoft ne sera reconnu que par IE, donc aucune régression pour les autres navigateurs
2/ en CSS 2 ou 3 je sais plus, il y a des instructions qui permettent de faire pareil pour FF et Opéra
3/ FF et Opéra ont aussi des fonctions similaires "proprio"
4/ le portage des fonctions proprio Microsoft sont à l'étude par le W3C pour être intégrée dans le standard CSS, moyenant évidement modification de la syntaxe


 
Euh ça c'est n'importe quoi, l'utilisation de fonctions proprios n'est jamais une bonne chose   :o  


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 29-03-2007 à 14:37:59    

cgo2 a écrit :

Heing ? Ca veut dire quoi ça ? :heink: Evidemment que le "cadre" a une taille dynamique, et c'est pour ça que le background se repete verticalement (et horizontalement aussi, pourquoi pas).


ben achète-toi des yeux alors.
 
http://img250.imageshack.us/img250/8016/tableaulw4.jpg
 
t'as pas l'impression que l'effet d'ombre n'est pas homogène ?
à partir de là, tu vas avoir l'air malin avec ton background-repeat...

Message cité 1 fois
Message édité par MagicBuzz le 29-03-2007 à 14:39:28
Reply

Marsh Posté le 29-03-2007 à 15:09:17    

MagicBuzz a écrit :

ben achète-toi des yeux alors.
t'as pas l'impression que l'effet d'ombre n'est pas homogène ?
à partir de là, tu vas avoir l'air malin avec ton background-repeat...


 
Euh non, j'ai pas l'impression. Moi je vois un dégradé de la droite (noir) vers la gauche (transparent = le motif) parfaitement horizontal, donc pas de contre-indication à une repetition verticale du background.


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 29-03-2007 à 16:57:46    

je pense qu'il parle sur la largeur. Si la largeur est plus grande, on va pas avoir un dégradé qui va aller de la gauche vers la droite : il va s'arrêter à la largeur de la texture...

Reply

Marsh Posté le 29-03-2007 à 16:57:46   

Reply

Marsh Posté le 29-03-2007 à 16:58:05    

oui, mais si le cadre grossi non pas verticalement, mais sur la droite ?
 
et là, par chance, le dégradé semble de droite à gauche, mais il pourrait très bien être de haut en bas ou de biais.
 
en tout cas, pour moi, miser sur une image figée n'est pas jouable.
il faut mieux utiliser l'image originale dans la CSS, et ajouter des filtres proprio pour les navigateurs qui les supportent afin d'améliorer le rendu, plutôt que de prendre le risque que ce soit moche sur tout les navigateurs. en tout cas, c'est mon point de vue.

Reply

Marsh Posté le 29-03-2007 à 19:21:43    

MagicBuzz a écrit :

pas d'accord, car si le cadre a une taille dynamique, c'est impossible à faire.
 
l'idée de rufo est bonne dans la mesure où :
1/ le code à la sauce microsoft ne sera reconnu que par IE, donc aucune régression pour les autres navigateurs
2/ en CSS 2 ou 3 je sais plus, il y a des instructions qui permettent de faire pareil pour FF et Opéra
3/ FF et Opéra ont aussi des fonctions similaires "proprio"
4/ le portage des fonctions proprio Microsoft sont à l'étude par le W3C pour être intégrée dans le standard CSS, moyenant évidement modification de la syntaxe


 
 
 
 :lol:  :lol:  :lol:  :lol:  
 
Sur le marché, y'a pas que IE, Opera et FF hein ;)
 
 
Certes, ils représentent la majorité des navigateurs, mais puisque tu as l'air de faire primer le CSS, c'est que tu doit faire primer l'accessibilité. Et l'accessibilité englobe dans ses termes le fait qu'un site doit être visible à partir de n'importe quel Browser.
 
A revoir donc ta technique.

Reply

Marsh Posté le 30-03-2007 à 09:25:39    

oh les mous du bulbes ca va pas bien ?
 
l'image originale, sans filtre, est parfaitement utilisable.
si ensuite, même si seulement 1% des navigateurs comprend le filtre, je ne vois pas en quoi il est gênant d'offrir pour 99% des usagers une page lisible et fonctionnelle, et pour le 1% supplémentaire, une version plus élaborée. Ca veut dire que 100% des utilisateurs ont un affichage correct, dont 1% ont un affichage amélioré. Dans les fait, si IE, FF et Opéra sont correctement gérés, cela implique 99% des navigateur graphique qui auront un affichage optimum.
 
votre solution de merde avec une image originale contenant déjà le filtre, ça implique que 100% des utilisateurs auront un affichage dégradé.
 
alors faudrait peut-être pas venir me parler d'accessibilité hein...
 
je tiens quand même à rappeler que c'est cette approche qu'on préconise pour l'utilisation du JS : il ne doit pas être indispensable au fonctionnement de la page, mais rien n'empêche de l'utiliser. c'est un truc "en plus", point barre.


Message édité par MagicBuzz le 30-03-2007 à 09:28:22
Reply

Marsh Posté le 30-03-2007 à 22:00:55    

MagicBuzz a écrit :

oui, mais si le cadre grossi non pas verticalement, mais sur la droite ?


 
Et bien tu ajoutes #000 en couleur de background (en plus de l'image), pour que ça continue sur du noir.
 

MagicBuzz a écrit :

et là, par chance, le dégradé semble de droite à gauche, mais il pourrait très bien être de haut en bas ou de biais.


 
Et c'est justement pour éviter ça que les graphistes et webdesigners ont (en général) un minimum de connaissances sur ce qui est faisable en html/css et ce qui ne l'est pas (ou sinon un intégrateur web les guide). Et je suis sûr que c'est pour ça que l'auteur de ce topic a fait son dégradé comme ça, et pas autrement.
 

MagicBuzz a écrit :

en tout cas, pour moi, miser sur une image figée n'est pas jouable.
il faut mieux utiliser l'image originale dans la CSS, et ajouter des filtres proprio pour les navigateurs qui les supportent afin d'améliorer le rendu, plutôt que de prendre le risque que ce soit moche sur tout les navigateurs. en tout cas, c'est mon point de vue.


 
Il n'est pas question de "miser" ni faire des suppositions "et si c'était comme ci, et si c'était comme ça". Ta solution marche sans doute (jamais testée), mais étant donné sa lourdeur (hack css pour les différents naivgateurs, applications de filtres de calcul au moment du rendu de la page, etc.) elle ne devrait être utilisée qu'en cas d'absolue nécessité. Là ce n'est pas le cas, c'est tout.


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 31-03-2007 à 16:13:17    

+1 ;)
 
 
Les hacks, c'est à utiliser quand on a pas d'autres alternatives ! Ici ce n'est pas le cas =)

Reply

Marsh Posté le 02-04-2007 à 11:03:19    

cgo2 a écrit :

Et bien tu ajoutes #000 en couleur de background (en plus de l'image), pour que ça continue sur du noir.


=> Et c'est super moche.
 

cgo2 a écrit :

Et c'est justement pour éviter ça que les graphistes et webdesigners ont (en général) un minimum de connaissances sur ce qui est faisable en html/css et ce qui ne l'est pas (ou sinon un intégrateur web les guide). Et je suis sûr que c'est pour ça que l'auteur de ce topic a fait son dégradé comme ça, et pas autrement.


=> Le designer n'a pas à ce soucier des limitations de la technologie utilisée, du moins pas pour des considérations graphiques aussi basiques. C'est à cause de ce raisonnement que tous les sites se ressemblent de plus en plus : moches et sans aucune imagination : des polios qui savent pas coder qui montent des pages ultra simples et qui disent "ah non pas possible" dès qu'on leur demande de faire autrechose qu'un menu à gauche et une barre de pub en haut, le tout figé dans une résolution qui passe sur 2% des écrans navigateurs et illisible pour un mal voyant. Super... Ton bacground de merde, tu fais quoi si tu joues avec CTRL + Molette ? Hein ?
 

cgo2 a écrit :

Il n'est pas question de "miser" ni faire des suppositions "et si c'était comme ci, et si c'était comme ça". Ta solution marche sans doute (jamais testée), mais étant donné sa lourdeur (hack css pour les différents naivgateurs, applications de filtres de calcul au moment du rendu de la page, etc.) elle ne devrait être utilisée qu'en cas d'absolue nécessité. Là ce n'est pas le cas, c'est tout.


=> Rien ne doit être nécessaire en CSS. Ta page doit être visualisable correctement avec un navigateur qui ne supporte pas le CSS, ou mal. Si c'est pas la cas, alors retourne apprendre le HTML.


Message édité par MagicBuzz le 02-04-2007 à 11:05:16
Reply

Marsh Posté le 02-04-2007 à 15:11:04    

Tant d'agressivité pour si peu... Attention si tu continues tu vas atteindre le point Godwin !  ;)  
 
Si tu joues avec Ctrl + Molette, la partie noire s'étirera, tout simplement. Et cette solution est tout à fait visualisable sans CSS (dans ce cas, le background n'apparait pas).
 
Quant à la qualité graphique des sites internet, ça c'est une autre histoire...  :sarcastic:  


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 02-04-2007 à 15:21:15    

Ce que je veux dire, c'est qu'il y en a marre du nivellement par le bas, sous prétexte de compatibilité avec les normes.
 
Le CSS permet, et c'est défini dans la norme, l'utilisation de préfixes propriétaires. A partir de là, la partie "standard" se doit impérativement de faire un rendu "correct", mais rien n'empêche de l'améliorer avec des éléments non standard.
 
Faut arrêter un peu avec les "ouais, mais y'a 0,000000000000000001 % des gens (c'est à dire le hamster de Godwin) qui n'utilisent pas un navigateur compatible patati patata". Oui, y'a toujours quelqu'un qui fera pas comme tout le monde. Ca n'empêche pas de faire en sorte qu'il ne soit pas avec un affichage trop dégradé, tout en permettant au reste de la terre de bénéficier d'un rendu au poil. Bientôt, sous prétexte qu'un admin unix sur un terminal 80 colonnes au fond d'une sale réseau ne peux pas voir autrechose que du Courrier 10px en 2 couleurs, on va se mettre à faire des sites monochrome. Faut pas pousser. Les standards sont là pour suivre la demande, pas l'inverse.

Reply

Marsh Posté le 02-04-2007 à 15:30:21    

Je suis complètement d'accord avec cette analyse ! Mais quand la solution qui permet un peu plus de compatibilité a le même rendu que la solution bleeding edge (dans des conditions données, comme c'est le cas ici), pourquoi vouloir à tout prix la descendre ? Ce qui est vieux n'est pas forcement mauvais, et je ne vois aucun nivellement par le bas ici.
 
Pour en finir avec ce troll, je t'invite à poster le code css qui te permet d'obtenir le même effet, afin que chacun puisse utiliser la solution qu'il préfère.


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 04-04-2007 à 22:07:21    

Autre solution qui fonctionne universellement :
 
créer une table de 256 colonnes dont chacune d'elle contient un niveau de gris.
 
 
--->[]

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed