Applying a "paper cutout" effect to overlapping animated PNGs

Hello! I made an interesting discovery today, by applying a CSS filter to a parent div containing multiple overlapping PNG images, the filter treats the images as if they were one (creating a white border that can still be animated, in this example) - unfortunately though, the effect doesn't work in safari or internet explorer (boo hoo)

https://www.raphroberts.com/trish/dogtest.html
https://www.raphroberts.com/trish/dogtest3.html

In case anyone is interested, here is the code, which sits inside the Head HTML:

   <style type = "text/css">
	
	.borderme{
    -webkit-filter: drop-shadow(5px 5px 0 white) drop-shadow(-5px -5px 0 white) drop-shadow(-5px 5px 0 white) drop-shadow(5px -5px 0 white);
    filter:drop-shadow(5px 5px 0 white) drop-shadow(-5px -5px 0 white) drop-shadow(-5px 5px 0 white) drop-shadow(5px -5px 0 white);
	}
	
	</style>

I'm sharing in the hopes someone might know of a way this can be achieved while still supporting IE and safari?

Thanks all :slight_smile:

Looks really nice!

1 Like

It looks like this is a rendering bug in Safari; this should work. If you uncheck "Use WebKit graphics acceleration" in Hype you'll get different yet still incorrect results: the animation leaves a trail that looks much worse. Interestingly using only a single drop-shadow directive seems to work. I've filed a bug on our end to investigate, there might be workarounds we can do or at least we can file a bug against WebKit.

There's no hope of using this method for IE, as it does not support CSS Filters at all. The first Microsoft browser to do so was Edge 13. You'll have to get clever with another method to achieve the same result (like using similarly shaped elements that are below the all the other layers) :slight_smile:.

1 Like