Image Transparency

1

Hi all,
I have a question regarding transparent images or shapes.
I’m trying to import customized text (vectorized) into Hype, with a transparent background.

This, I was able to do, using either tif, svg, or png files. (although png is not very good in terms of quality.)

My only issue : I wanted to add a drop shadow to that imported text, but when I apply it in Hype, it adds the shadow to the “rectangle/work plan” around the whole shape ; and it doesn’t apply it all the letters individually.

Is there another format to import actual transparent images?
Or is there another workaround?

Many thanks for the support,
Stephanie

2

add a class of dropShadow to your element and then paste and adjust the settings of this css-style

<style>
.dropShadow{
filter: drop-shadow(rgb(0, 0, 0) 10px 10px 10px) !important;
}
</style>

https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

3

Where should I add this ? In Hype? or another application?

Ideally I wanted to animate the drop shadow... but if I add this style, it will be always be "on".

Thank you for your answer!

4

add it to the head-section.

to use and animate this property within hype -> apply to the betatestinggroup -> https://docs.google.com/forms/d/e/1FAIpQLSc3qKEyMQsS3Ei558o8nOuoVNsSzzq3yr7XTBTyINLqbxgtCw/viewform