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