Ombre portée un peu spéciale

Salut,

J'ai fait une recherche sur ce forum avec les mots-clef "ombre portée" et je suis tombé sur un paquet de posts. Mais je n'ai pas trouvé d'info utile pour le cas de figure suivant :

http://www.location-fort-mahon-plage.fr/activite.html : les photos de cette page ont une ombre affectant les 4 cotés de l'image et non juste le coté droit et le coté inférieur. Je trouve cet effet super joli et j'aimerais bien l'appliquer a mon site (ou les images sont de taille variable).

Je sens que c'est pas vraiment possible mais juste au cas ou, je demande votre avis ! Si c'est pas possible en CSS je suis aussi ouvert a une solution JS, l'essentiel etant d'accomplir EXACTEMENT la meme chose que sur cette page.

Salut à toi.
Il te suffit d'utiliser la propriété css box-shadow en lisant bien la doc. Tu met pour les offset x et y 0, avec un valeur de quelques pixels ça devrait faire l'affaire.
Pour IE, utilise le filtre shadow (ou peut être dropShadow)

Hello,

Le lien vers le tuto d'Alsa, plus complet.

Niquel! Merci a vous deux. (ce tuto est juste ce qu'il me fallait)

Bonsoir,

Les effets d'ombre portée sur le site que tu nous montres sont très simples à réaliser. En fait il sagit d'une image d'arrière plan qui est mise dans la balise image ; balise image qui est ensuite affectée d'un padding : Exemple :

img.cadre {
   background: url("images/cadre.png") no-repeat;
   padding: 20px;
}
/* bien sur, l'image d'arrière plan est plus grande que l'image de 20px tout le tour */

Du moment que toutes les images ont la même taille et la même orientation… ça roule. (C'est ainsi que c'est fait sur le site de Fort Mahon) Sinon, il faut prévoir plusieurs classes et plusieurs images adaptées aux différents cas de figure.
Modifié par Aureance (24 Feb 2010 - 02:38)