Transparency psd docs for buttons

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. :grin: