Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you add a non-square drop shadow to PNG content with CSS? [duplicate]

Is it possible to do a drop shadow on the content of a PNG?

Not a square, but an object drop shadow that
acts on the non-transparent content of the PNG.

like image 871
Kirk Strobeck Avatar asked Jun 22 '11 14:06

Kirk Strobeck


People also ask

How do you add a shadow to a PNG in CSS?

Syntax: filter: drop-shadow(); Example 1: This example uses filter: drop-shadow() property to add shadow effect on pngimage.


2 Answers

It's definitely possible.

Using filters, sample:

img {      -webkit-filter: drop-shadow(5px 5px 5px #222);     filter:         drop-shadow(5px 5px 5px #222);  } 
like image 148
Slake Avatar answered Sep 27 '22 22:09

Slake


It's not possible to do that in CSS. However, it's quite possible to do it through a canvas, but it will be somewhat inefficient (as it's processed by the client each time) and will be JavaScript dependent. Doing it in the PNG will be easier and will work on more browsers.

If you want more information about it, search the web for things like "html canvas blur" and "html canvas load image". Or better still, use the canvas shadow functionality which can do it all.

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

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

And a bonus:

  • use context.toDataURL if you want to export to PNG (make a web app which you drop PNGs in and it gives you shadows!)
like image 25
Chris Morgan Avatar answered Sep 27 '22 20:09

Chris Morgan