Is it possible to add a drop shadow on a vector image that fits the borders?


#1

Hi! I’m trying to apply a shadow on a vector image to animate it after, but I would like that the shadow fits the borders of my title, is there a way to do it? My image is actually in PNG with a transparent background.

Here is the link to view my image :


(Michael Johann) #2

It’s not possible in Hype, but you can still do it using CSS:

<style>
.shadowfilter {
	-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
	filter: url(shadow.svg#drop-shadow);
}
</style>


Improving shadow customizer
#3

Oh thanks a lot, I’m really pleased to know this new trick. But would it be possible to animate it, like make it bigger and bigger, add blurred and make it disappear afterward?!


#4

Maybe you could duplicate it and then apply the filters in Hype (note they are not supported fully)

And animate the copy.

btw, the filters I’ve applied are Brightness->0%, Contrast->0.0 and Blur->6.4px

Of course you can adjust to whatever you need


#5

Super, great idea! Thanks a lot!!


#6

I’ve copy and paste your code in the intern HTML code of my element but I don’t see the drop-shadow under my title even if I previews in Hype, Chrome or Firefox


(Michael Johann) #7

Make sure you entered the proper class name in the Identity inspector.


#8

I have never thought of it and never applied a CSS class to Hype, now I know How and I’m very happy, thanks a lot!