I just started using Hype and want to make buttons out of psd docs with transparency. When I want to work with the psd docs in Hype and change hue, saturation or place a drop shadow the effect is placed on the whole canvas, including the transparent sections. Is there a way around this?
You can do this using custom CSS:
Download: dropShadowFilter.hype.zip (23.0 KB)
Add this CSS to your HEAD Html
<style>
.dropShadow {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
</style>
Then add the class dropShadow to your image and you’re all set! Good luck!
Edit: more information and in depth research here: http://thenewcode.com/598/box-shadow-property-vs-drop-shadow-filter-a-complete-comparison
1 Like
Thanks!
This, I think, would be nice to have build into Hype, so you can choose between filter and box shadow.
Thank you for the tip as I was just grumbling about this getting a boxy shadow around a non-boxy png.