Can you add non-square shadow to PNG content using CSS?

Question

Can I make a shadow on PNG content?

Not a square , but the object obscures the shadow, which affects the opaque PNG content.

Answer 1

It is definitely possible.

Using filters :

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

Answer 2

This cannot be done in CSS. However, it is possible to do this through the canvas, but it will be somewhat inefficient (since it is processed by the client each time) and will be JavaScript dependent. Doing this in PNG will be easier and will work on more browsers.

If you need more information about this, find things like "html canvas blur" and "html canvas load image" on the Internet. Or better yet, use the shadow shadow functionality that can do all this.

Here is an example: http://philip.html5.org/demos/canvas/shadows/various.html

• create context from canvas
• set context.shadow(Color|OffsetX|OffsetY|Blur) as desired
• download PNG from context.drawImage img tag
• Oh! the shadows!

And a bonus:

• use context.toDataURL if you want to export to PNG (create a web application into which you paste PNG and it gives you shadows!)

Answer 3

How times are changing. Now it is possible in some browsers , as shown in the currently accepted answer.

---

This cannot be done using CSS:

What I suppose you are asking. Strike>

Answer 4

Until it is available for CSS, you can try my approach.

In my example, this image is used:

because it has a transparent background and is not square (so that the CSS shadow appears in action). This is not very bizarre, but serves as a short and simple tutorial.

The next step I took was to create another image based on the above to place it under the original.

Step 1. Add blur:

Step2. Light and contrast removed:

So, I have the original and the shadow.

Next I will show it as if it were a shadow:

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;} 

Do the magic:

Add one div and set attribute class="divOriginal common " and the other - class="divShadow common" .

The result should be:

Hurrah!

Adi

Answer 5

I wrote a jQuery plugin for this, based on Chris Morgan's proposal for a canvas. You can find it on GitHub here: https://github.com/Kukunin/image-shadow

Answer 6

Use createjs sample can be found at 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;