Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1087 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Images ombrées et accessibilité

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Images ombrées et accessibilité

n°405073
axey
http://www.00f.net
Posté le 22-05-2003 à 21:29:22  profilanswer
 

Vala, je dois faire un site en suivant une charte graphique très précise et très casse-couilles (le site à été dessiné sous Photoshop, faut le refaire en xhtml) .
 
Il y a une image de fond générale, et par dessus plein de cochonneries dont des boutons. Ces boutons sont des images. Fastoche, un background-image pour le body, et pour les boutons :
 
<a href="..."><img src="bouton.png" alt="rubrique" /></a>
 
Le problème c'est que sous ces boutons il y a des *ombres* à moitié transparentes sur le fond.
 
Et justement, je sais pas du tout où caser ces ombres.
 
Si on inclut le fond dans l'image du bouton, ça passe. Mais c'est crade (et ça nécessite un calage au pixel près) et sans feuille de style ou avec une feuille de style pour l'impression (sans fond), le rendu est évidemment immonde.
 
Le canal alpha des PNG ça pourrait etre pas mal... mais IE n'en ferait rien.
 
Comment vous feriez pour ajouter cette ombre de façon clean ? (des calques décalés avec des z-index différents ?)

mood
Publicité
Posté le 22-05-2003 à 21:29:22  profilanswer
 

n°405098
gm_superst​ar
Appelez-moi Super
Posté le 22-05-2003 à 21:58:38  profilanswer
 

axey a écrit :

Si on inclut le fond dans l'image du bouton, ça passe. Mais c'est crade (et ça nécessite un calage au pixel près) et sans feuille de style ou avec une feuille de style pour l'impression (sans fond), le rendu est évidemment immonde.


Bah au pire tu masques les boutons à l'impression. Avec un "alt" bien renseigné ça ne pose pas de problèmes.
Et si tu affiches sans style, vu que ce sera de toute façon moche, on s'en fiche un peu non ?

axey a écrit :

Le canal alpha des PNG ça pourrait etre pas mal... mais IE n'en ferait rien.


Bah au pire, IE supporte le PNG avec une propriété CSS spécifique (filter) [:spamafote]

axey a écrit :

Comment vous feriez pour ajouter cette ombre de façon clean ? (des calques décalés avec des z-index différents ?)


Ben les calques c'est un peu le même problème si on intègre le fond il faut les placer au pixel près sinon faut supporter le PNG. Il n'y a pas tellement d'autres alternatives que ces 2 solutions.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°405191
gizmo
Posté le 22-05-2003 à 23:08:37  profilanswer
 

je vais sans doute dire une connerie, mais mettre dans un div un coutour des boutons comme background, mêlé avec la propriété transparent et intégrer dans cela les béritable boutons, ca pourrait pas le faire?

n°405209
gm_superst​ar
Appelez-moi Super
Posté le 22-05-2003 à 23:26:46  profilanswer
 

À mon avis ça va pas changer grand chose au fond du problème. Le contour des boutons soit ils sont en PNG transparents et il faut régler le problème avec IE soit ils ont l'image du fond intégré et il faut les positionner...
 
Ou alors j'ai pas compris ce que tu voulais faire exactement :??:


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°405215
antp
Super Administrateur
Champion des excuses bidons
Posté le 22-05-2003 à 23:29:01  profilanswer
 

http://webfx.eae.net/dhtml/pngbeha [...] avior.html
 
le "truc" pour que le PNG transparent marche ± dans IE :D


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
n°405222
gizmo
Posté le 22-05-2003 à 23:35:19  profilanswer
 

gm_superstar a écrit :

À mon avis ça va pas changer grand chose au fond du problème. Le contour des boutons soit ils sont en PNG transparents et il faut régler le problème avec IE soit ils ont l'image du fond intégré et il faut les positionner...
 
Ou alors j'ai pas compris ce que tu voulais faire exactement :??:


 
non, justement, je n'utilise pas de transparence png, mais la transparence du div. Il lui suffit donc de faire un png avec dégradé de gris pour imiter la transparence et une couleur vraiment transparente pour tout ce qui est en trop. Et ca, c'est géré.

n°405230
THE REAL S​MILEY
The Real Résistance!
Posté le 22-05-2003 à 23:41:07  profilanswer
 

antp a écrit :

http://webfx.eae.net/dhtml/pngbeha [...] avior.html
 
le "truc" pour que le PNG transparent marche ± dans IE :D


marche pas sous IE 5.0 :/

n°405233
youdontcar​e
Posté le 22-05-2003 à 23:45:47  profilanswer
 

À la place de ton <img src='pagesuivanteavecdropshadow.gif'>, tu fais un <div class='boutondropshadowpagesuivante'>Page suivante</div>
 
puis dans la classe boutondropshadowpagesuivante  
* en web,  
-div positionné au pixel près, avec une taille fixe (taille de l'image)
-puis en background, l'image, alignée en haut à gauche, qui ne se répète pas
-texte à taille zéro
 
* en impression,
rien.
 
La meilleure solution reste de tuer tes graphistes ou de leur dire que le design n'est pas de la décoration.

n°405236
gm_superst​ar
Appelez-moi Super
Posté le 22-05-2003 à 23:48:50  profilanswer
 

gizmo a écrit :

non, justement, je n'utilise pas de transparence png, mais la transparence du div. Il lui suffit donc de faire un png avec dégradé de gris pour imiter la transparence et une couleur vraiment transparente pour tout ce qui est en trop. Et ca, c'est géré.


Tu veux dire les propiétés opacity et -moz-opacity ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°405237
gm_superst​ar
Appelez-moi Super
Posté le 22-05-2003 à 23:49:45  profilanswer
 

youdontcare a écrit :

À la place de ton <img src='pagesuivanteavecdropshadow.gif'>, tu fais un <div class='boutondropshadowpagesuivante'>Page suivante</div>
 
puis dans la classe boutondropshadowpagesuivante  
* en web,  
-div positionné au pixel près, avec une taille fixe (taille de l'image)
-puis en background, l'image, alignée en haut à gauche, qui ne se répète pas
-texte à taille zéro
 
* en impression,
rien.


Oui ça revient à faire du positionnement. Autant positionner le bouton directement alors.

youdontcare a écrit :

La meilleure solution reste de tuer tes graphistes ou de leur dire que le design n'est pas de la décoration.


On est d'accord :D


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
mood
Publicité
Posté le 22-05-2003 à 23:49:45  profilanswer
 

n°405241
youdontcar​e
Posté le 22-05-2003 à 23:53:02  profilanswer
 

gm_superstar a écrit :

Oui ça revient à faire du positionnement. Autant positionner le bouton directement alors.

Pas forcément, faire un <div> et le décorer te permet de garder le même html pour les navigateurs css / les navs sans css / l'impression, et d'avoir un bon rendu sur les trois.
 

gm_superstar a écrit :

On est d'accord :D

Formons une milice ! :D

n°405243
antp
Super Administrateur
Champion des excuses bidons
Posté le 22-05-2003 à 23:53:50  profilanswer
 

THE REAL SMILEY a écrit :


marche pas sous IE 5.0 :/


 
bah oui mais bon selon Microsoft ça sera supporté en natif dans IE 4 ou 5 :D ... ils ont pri un peu de retard sur le planning


Message édité par antp le 22-05-2003 à 23:54:30

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
n°405248
THE REAL S​MILEY
The Real Résistance!
Posté le 23-05-2003 à 00:01:21  profilanswer
 

antp a écrit :


 
bah oui mais bon selon Microsoft ça sera supporté en natif dans IE 4 ou 5 :D ... ils ont pri un peu de retard sur le planning


:lol: ... bon comme j'ai pas envie de passer sous IE6 qui met 3 plombes à afficher les popups, il va falloir que j'utilise un peu plus Mozilla pour profiter de toutes ces belles choses ainsi que les CSS (Compliant of courses LUI :D )


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Images ombrées et accessibilité

 

Sujets relatifs
[HTML] (Comment dire au navigateur de) Télécharger les images en cacheMeilleur script pour galerie de photos/images
protection des "images"Pourquoi mes images ne s'affichent pas
Probleme avec l affichage des imagesGérer en cm la taille de mes images sur l'écran client
Gérer en cm la taille de mes images sur l'écran client [relancé]images miniatures
avec les imagesComment afficher mes images 3 par 3??
Plus de sujets relatifs à : Images ombrées et accessibilité


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR