Appliquer une bordure en image sur une balise

Bonjour,

Je souhaite incorporer des effets d'ombres sur un bloc (peu importe la balise, en l'occurrence <div>).

La propriété border ne m'apporte pas ce que je veux, puisque j'ai besoin d'un léger dégradé, d'autant que les coins du tableau sont arrondis.

JE cherche donc une bonne méthode pour implémenter cela. Pour le moment, en appliquant la propriété border-image, j'ai réussi à caler l'ombre sur 3 bords après bricolage, mais jamais le 4ème.



Le problème restant de toute façon entier puisque ie7 semble réticent à l'interpréter.
Si quelqu'un a une idée, je suis preneur, je sèche complètement.

Merci d'avance !

Bonjour,

Deux solutions s'offrent à toi : Soit tu utilises les propriétés CSS3 text-shadow ou box-shadow soit tu utilises des images.

Merci pour les liens, notamment le second qui explique bien.

Pour l'option css3, je pense que tant qu' IE ne l'intègre pas, je ne peux pas l'utiliser. Mon public l'utilise environ à hauteur de 50%, et je ne peux pas délaisser ces braves gens. Cependant, la fonctionnalité est tout à fait adaptée pour les autres...

J'avais envisagé la méthode gracieuse du tableau, mais je me suis retrouvé confronté à un problème :
Mon 'contenu' peut être amené à s'étendre sur toute la longueur, hors, si j'ai bien compris cette méthode entraine nécessairement la perte de n pixels à droite et à gauche (ou n correspond au rayon de mon arrondi).

Mon vrai problème est l'aspect dynamique... Mon habillage doit pouvoir marcher pour des hauteurs et largeurs assez variables, et avec fond de couleur variable.
(En fait je me rend compte que le dit 'cahier des charges gratiné' correspond tout à fait ...)

Je peux peut être palier ce problème ?


[Edit]
Bon, je pense qu'il n'existe pas de bonne solution pour ce problème, par conséquent, je vais me débrouiller avec de la bidouille, je pense que l'on peut clore le sujet.
Modifié par raiden313 (27 May 2010 - 22:01)

Pardon pour le double post, mais j'ai finalement trouvé une solution à ce problème.

Dans mon cas cela marche bien puisque j'ai besoin d'un header et d'un footer à mon tableau.
(J'utiliserais dans mon exemple un 'radius' de bordure de 20px >> Une imagede 20px * 20px pour les arrondis, et la bordure en elle même (le dégradé) mesure 3px).
Il faut en fait appliquer la méthode standard dans ce genre de cas :

POUR LE HEADER
- une image de bordure en coin haut gauche
- une image en repeat-x au millieu
- une image e en coin haut droit

POUR LE FOOTER
même chose !

POUR LE BODY
C'est là que ça se complique dans mon cas puisque je ne veux pas de bordure alors que la solution habituelle pour ce problème impose une bordure de 20px à droite.
Au niveau html, on se trouve dans table > tbody

Solution :
- On applique un colspan="3" pour recouvrir toute la largeur.
- On applique au tbody tr : background-image : url(mon_image) repeat-y right ;
- On applique au tbody td : background-image : url(mon_image) repeat-y left ;
- On dispose alors déjà de bordure correctement positionnée, il ne reste qu'à définir un padding left et right sur le tbody td de la largeur du dégradé (3px ici) ou plus si vous souhaitez espacer votre contenu.
IE 7 semble réticent au padding-right (je n'ai pas encore réfléchis à la cause, mais je le ferais.)
C'est pour cela qu'il faut définir un margin-right de la taille souhaitée, toujours sur le tbody td.
:)

Vous l'aurez sans doute compris, il s'agit en fait simplement de superposer deux balises, disposant chacune de son background, et occupant toute la largeur de notre <table> initial.

Je sais que les puristes crieront au scandale quant à l'utilisation des tableaux, je leur suggère la solution avec des divs, qui marchera aussi bien .

(Dans mon cas, l'utilisation des tableaux est justifiée, et je n'ai pas le temps pour le moment d'expliquer avec des div.)

J'espère que cela pourra aider des gens, je n'ai pas été très exhaustif, n'hésitez pas à demander un coup de pouce

PS : I'il est possible de paser le sujet en résolu, je ne trouve pas l'option...