Pouvez-vous ajouter une ombre à goutte non carrée au contenu PNG avec CSS? [dupliquer]

il n'est pas possible de faire cela dans CSS. Cependant, il est tout à fait possible de le faire à l'aide d'une toile, mais il sera quelque peu inefficace (car il est traité par le client à chaque fois) et dépendra de JavaScript. Le faire dans la PNG sera plus facile et fonctionnera sur plus de navigateurs.

si vous voulez plus d'information à ce sujet, rechercher des choses comme" HTML canvas blur "et"html canvas load image". Ou mieux encore, utilisez la fonctionnalité canvas shadow qui peut de faire tout ça.

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

• créer un contexte à partir de toile
• set context.shadow(Color|OffsetX|OffsetY|Blur) selon les besoins
• charger PNG à partir de l'étiquette img avec context.drawImage
• ah! l'ombre!

et un bonus:

• utiliser context.toDataURL si vous voulez exporter vers PNG (faire une application web que vous déposez PNGs et il vous donne des ombres!)

Comment les temps changent. Il est maintenant possible dans certains navigateurs , comme le montre la réponse actuellement acceptée.

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

C'est ce que je suppose que vous demandez.

Jusqu'à ce qu'il soit disponible pour CSS, vous pouvez essayer mon approche.

mon exemple utilise cette image:

parce qu'il a un fond transparent et il n'est pas carré (pour le box-shadow de CSS pour entrer en action). Ce n'est pas très chic, mais sert ce petit et simple tutoriel amende.

la prochaine étape que j'ai prise était de créer une autre image, basée sur celle ci-dessus, pour la placer sous original.

Step1. Ajouter flou:

Step2. Suppression de la lumière et du contraste:

donc j'ai l'original et l'ombre.

ensuite je vais l'afficher comme si c'était une ombre:

Style:

.common {width: 100px;height: 100px;background-size: 100% 100%; position:absolute;}

.divOriginal {background-image: url(../img/original.png);top:2em;left:2em;z-index:10;}

.divShadow {background-image: url(../img/shadow.png);top: 3em;left: 2.5em;z-index:8;}

Faire de la magie:

Ajouter un div attribute class="divOriginal common " et un autre avec class="divShadow common" .

le résultat doit être:

santé!

Adi

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

uF createjs l'échantillon peut être trouvé à JSFiddle

shadowTarget.shadow = shadow;

stage.addChild(shadowTarget);

shadowTarget.x = 500 / 2;
shadowTarget.y = 450 / 2;

shadowTarget.regX = shadowTarget.image.width/2;
shadowTarget.regY = shadowTarget.image.height/2;