Creating a transparency mask for html

Question

Has anyone come across an effective way to mimic Webkit's

-webkit-mask-box-image: url(filename.png)

functionality?

I'm trying to use non-square animated elements, and would prefer not having to do the masking on server-side.

I'm set on supporting at least Gecko and Webkit, but if I can manage Opera and IE, that would be a bonus.

Answered a similar question here: http://stackoverflow.com/questions/5887527/is-there-a-gecko-equivalent-to-webkit-mask-or-a-fancy-way-of-degrading-for-geck — Tom Penzer, Mar 10 '12 at 21:09

score 0 · Accepted Answer · answered Sep 08 '10 at 10:28

0

After Googling a lot, seems there is no way to do this with anything other than webkit at the moment. Just pre-mask your images in Photoshop for now :)

answered Sep 08 '10 at 10:28

Kyle

65,599
28
144
152

1

That was pretty much the conclusion I had come to - pre-masking in photoshop is not an option as it's a user-submitted image, which leaves masking in imagemagick or similar. Thankfully the shape I want to mask out is just simple geometry, so I've opted to use canvas and the clip() command. – salmonmoose Sep 09 '10 at 03:04
Eh, that's a better idea then :) – Kyle Sep 09 '10 at 06:59

score 0 · Answer 2 · answered Sep 08 '10 at 10:34

Put a div containing transparent images with higher z-index absolutely positioned over the top of the animations?

Just a thought, might be completely useless for what you need.

<div class="animation">
</div>
<div class="mas">
</div>

.animation{height: 200px; width: 200px; position: absolute; top: 0; left: 0;}
.mask{height: 200px; width: 200px; position: absolute; top: 0; left: 0; z-index: 10; background: transparent url('mask.png') 0 0 no-repeat;}

Creating a transparency mask for html

2 Answers2