Forum d'entraide PHPFrance

Bonjour,

J'essaye en vain de mettre une ombre comme sur l'image ci-jointe :


Si quelqu'un peut me conseiller. C'est que je ne vois pas comment faire à cause du dégradé vertical.

Merci

C'est possible grâce à la transparence progressive (couche alpha) du format PNG.

Attention : il te faudra tout de même ruser pour que l'effet soit bien rendu avec IE

Merci pour la réponse,

Mais pourrais-tu être un petit peu plus explicite, parce que je n'ai pas bien compris.

Merci

le background de ton body n'étant pas uni (dégradé et rayures),
l'ombre de ton conteneur principal doit en laisser apparaître le motif.

Or, seul le format png permet de gérer ces effets de transparence.

Le hic est que IE (en tout cas, jusqu'à la version 6, je n'ai pas testé la version 7 qui vient de sortir)
ne sait pas afficher correctement la transparence du format PNG.
Tu peux alors utiliser le script pngfix.js pour corriger ce défaut.

Plus d'infos sur http://homepage.ntlworld.com/bobosola

Merci pour le lien,

Mais pourrais-tu aussi m'indiquer comment mettre l'ombre dans mon conteneur principal.
Dois-je lui mettre un padding et en image de fond l'ombre?
Et puis-je mettre une image à droite et une autre à gauche en background d'un même élément?
ou dois-je la dupliquer en repeat-y?

Je n'arrive pas à me représenter la chose...

Si tu peux encore m'aider,

Merci

J'ai mis deux div pour mettre en background mon ombre de gauche et celle de droite.
Mais le problème di fichier.js est qu'il rétabli la transparence sur les images présentes sur la page html alors que les miennes sont dans la css.

Je vais essayer autre chose,

Merci encore

Pour ma part, j'utilise un seul fichier png
que je place en background de mon conteneur principal.

Si mon cadre dans lequel je veux afficher du contenu mesure 900px de large
et si je souhaite ajouter un ombré de 10px de large de chaque côté,
je définis alors mon css ainsi :

#conteneur
  { width:920px; // j'inclus la largeur des ombrés
    background-image:url(fond_avec_ombres.png);
    margin:0 auto 0 auto; // pour le centrer dans le navigateur
  }

#contenu
  { width:900px; // le cadre utile dans lequel j'afficherai le contenu
  }

mais comment affiches-tu la transparence?

parceque j'ai essayé le javascript et il ne gère que les images sur la page, pas celles de la css

Je n'ai plus le truc en tête, mais il y a cette précision que j'avais moi-même négligée
et qui neutralisait l'effet du javascript en affichant d'horribles bordures verdâtres sous IE 6.

Note that you must have height and width attributes specified for each image.
Other attributes (class, alt, title & style) are optional
so far as this routine is concerned, but are respected if specified.

Merci pour ton aide,

Je me suis finalement rabattu sur un contour ombré sur fond uni, plus simple.
J'essaierai une autre fois et je ferai deux conteneurs, un en haut (autour du header) pour le dégradé avec les rayures et un en bas (autour du contenu) pour l'ombre sur fond uni.

Je ne vois que ça...

La difficulté vient de ton design et de l'utilisation de rayures obliques pour le background du body.

Si les rayures étaient horizontales, il te suffirait d'utiliser un GIF pour les ombrés.