Pouvez-vous ajouter une ombre portée non carrée au contenu PNG avec CSS?

Question

Est-il possible de faire une ombre portée sur le contenu d'un fichier PNG?

Pas un carré , mais un objet ombre portée qui
agit sur le contenu non transparent de la PNG.

Answer 1

C'est définitivement possible: ici

Utilisation de filtres, exemple:

 img { 
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter:         drop-shadow(5px 5px 5px #222); 
}
 

Answer 2

Il n'est pas possible de le faire en CSS. Cependant, il est tout à fait possible de le faire à travers une toile, mais il sera quelque peu inefficace (comme il est traité par le client à chaque fois) et sera JavaScript dépendante. Le faire dans le PNG sera plus facile et permettra de travailler sur plusieurs navigateurs.

Si vous souhaitez plus d'informations à ce sujet, des recherches sur le web pour des choses comme "canvas html flou" et "html toile chargement de l'image". Ou mieux encore, l'utilisation de la toile d'ombre fonctionnalité qui peut tout faire.

Voici un exemple: http://philip.html5.org/demos/canvas/shadows/various.html

• créer le contexte de la toile
• ensemble context.shadow(Color|OffsetX|OffsetY|Blur) comme souhaité
• charge le format PNG à partir de la balise img avec context.drawImage
• ah! l'ombre!

Et un bonus:

• utiliser context.toDataURL si vous souhaitez exporter en PNG (faire une application web qui vous déposer Png et il vous donne des ombres!)

Answer 3

Comment les temps changent. C'est maintenant possible dans certains navigateurs , comme indiqué dans la réponse actuellement acceptée.

---

Il n'est pas possible de faire cela en utilisant CSS:

C'est ce que je suppose que vous demandez.

Answer 4

Hehe drôle de question.

En appliquant box-shadow fera tomber l'ombre autour de la boîte. Mais comme toujours, IE fait son propre chemin. L'utilisation de ce 2 filtres:

/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

sera fait ignorer la transparence de la boîte et laissez tomber l'ombre que sur la non transparence des pixels dans l'image. Mais dans IE uniquement. C'est parce qu'elle génère une lumière qui fera tomber une ombre, une fois qu'il frappe une surface plane (comme dans la vraie vie).

Cas de Test: http://easwee.net/css/dropshadowpng/

Answer 5

J'ai écrit un plugin jQuery pour cela, basé sur la suggestion de Chris Morgan concernant la toile. Vous pouvez le trouver sur GitHub ici: https://github.com/Kukunin/image-shadow