Une astuce que j'utilise souvent lorsque j'ai juste besoin d'une "petite" ombre (lire: le contour ne doit pas être super précis) consiste à placer un DIV avec un remplissage radial de 100% - noir à 100% - transparent sous l'image. Le CSS pour le DIV ressemble à quelque chose comme:
.shadow320x320{
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.58) 1%, rgba(0,0,0,0) 43%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.58)), color-stop(1%,rgba(0,0,0,0.58)), color-stop(43%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
Cela créera un `` point '' noir circulaire délavé sur un DIV 320x320. Si vous modifiez la hauteur ou la largeur du DIV, vous obtenez un ovale correspondant. Très agréable à créer, par exemple, des ombres sous des bouteilles ou d'autres formes cylindriques.
Il existe un outil absolument incroyable et super excellent pour créer des dégradés CSS ici:
http://www.colorzilla.com/gradient-editor/
ps: Faites un clic de publicité de courtoisie lorsque vous l'utilisez. (Et, non, je n'y suis pas affilié. Mais les clics de courtoisie devraient devenir un peu une habitude, en particulier pour les outils que vous utilisez souvent ... dites simplement ... puisque nous travaillons tous sur le net ... )
filter
propriété CSS multiplateforme ... Bien que je ne pense pas que des balises HTML SVG soient nécessaires, tout PNG avec canal alpha fera l'affaire