Mettre une ombre sur un dégradé vertical

22 oct. 2006, 23:02

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

23 oct. 2006, 00:07

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

23 oct. 2006, 00:17

Merci pour la réponse,

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

Merci

23 oct. 2006, 10:23

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

23 oct. 2006, 16:03

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

23 oct. 2006, 16:50

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

23 oct. 2006, 17:04

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
  }

23 oct. 2006, 17:20

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

23 oct. 2006, 17:34

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.

23 oct. 2006, 21:40

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...

23 oct. 2006, 21:50

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.

Mettre une ombre sur un dégradé vertical

Qui est en ligne