Image Transparency


(Stephanie) #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


Problem with image drop shadow
(Hans-Gerd Claßen) #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


(Stephanie) #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!


(Hans-Gerd Claßen) #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