Habillage gauche et droite d'une image

Bonjour,
Mon problème est le suivant:
Je souhaite placer 1 élément (ombre) de chaque côté des images du site en utilisant un fichier png.



Je souhaiterais que ces images soient intégrées par l’intermédiaire d'une classe très simple type
<img class="shadow"> et non pas en utilisant des imbrications de div. Est-ce possible ?
Si oui, et au regard de mes immenses lacunes css, quelqu'un pourrait-il me donner des pistes de réflexions ?
D'avance merci!
Modifié par dasteralo (06 Jun 2013 - 15:06)

Bonjour,

Et les ombrages en CSS ?
Les ombrages en CSS3
Ombres avancées avec CSS3 et box-shadow

Bonjour 6l20. Merci de ta réponse.

Effectivement, les ombres avancées sont une bonne piste mais je ne suis pas sur de pouvoir retrouver exactement le même rendu que ce dont j'ai besoin. je pourrai utiliser l'effet "lateral shadows" mais les ombres que je souhaite intégrer ont une forme très particulière et je ne vois pas trop comment faire sans passer par l'insertion d'une image png.

salut,
avec les ombres css tu pourrais normalement arriver à beaucoup de choses. Enfin bon... Si tu utilises deux images distinctes tu pourrais passer par les pseudo éléments :before et :after et les position absolues.

ça a l'air nickel ça effectivement!!
Je vais tenter de suite.
Est-ce compatible tout navigateurs ? je viens de lire ceci:
"Unfortunately, most browsers do not support using :after or :before on img tags."

Sinon vous pensez qu'en utilisant les ombres css je pourrai arriver exactement à ce rendu également ?:

Modifié par dasteralo (06 Jun 2013 - 16:40)

Finalement j'ai peut-être trouver une solution avec un mix de vos 2 réponses
Quelque chose comme ça:

        /* Perspective */

        .perspective:before {
            left:80px;
            bottom:5px;
            width:50%;
            height:35%;
            max-width:200px;
            max-height:50px;
            -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
               -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
                    box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
            -webkit-transform:skew(50deg);
               -moz-transform:skew(50deg);
                -ms-transform:skew(50deg);
                 -o-transform:skew(50deg);
                    transform:skew(50deg);
            -webkit-transform-origin:0 100%;
               -moz-transform-origin:0 100%;
                -ms-transform-origin:0 100%;
                 -o-transform-origin:0 100%;
                    transform-origin:0 100%;
        }

        .perspective:after {
            display:none;
        }

Comme un(e) grand(e)... (je suppose que comme un grand si non ça aurait été dasterala ?? )
Je ne sais pas trop à quoi ça devrait ressembler mais ça pourrait très vaguement être ça. Encore une fois tes ombes sont bizarres
Modifié par Zelalsan (06 Jun 2013 - 18:03)

Merci gc-nomade pour ta réponse. Je n'ai pas compris grand chose, voir rien du tout mais je vais sérieusement étudier la question.

Zelalsan a écrit :
Encore une fois tes ombes sont bizarres

Je suis plutôt d'accord. Un délire de graphiste

@dasteralo , recherche comment appliquer des gradients en CSS (via background-image).
Quand tu as compris et sait en faire, il te suffit de les superposer.
En te servant de leur orientation et des valeurs de background, tu peut produire des textures.
Recherche "lea verou pattern" pour des exemples.
Modifié par gc-nomade (08 Jun 2013 - 13:35)