Website Graphical Mask

[gumOnShoe]

Anyone who has worked in flash or photoshop should know that a mask is essentially a graphical piece that hides part of an image while showing the rest. You can find plenty of tutorials that explain it on the web. Basically, you have an image. You create a new layer above it. Wherever the new layer (mask layer) is black, the layer below it shows. Whereever the mask is white, everything else dissapears. This is very useful when working with graphics, and web design is all about graphics, so I was hoping there was a way to do this across many browsers.

The only ones that seem to do this are webkit browsers. Or am I wrong. Anyone have any ideas?

Thanks.

[thePalindrome]

You could put one image with transparency on top of another with a difference in z-levels, but I think IE has issues with image transparencies...

[gumOnShoe]

At 9/26/11 04:01 PM, thePalindrome wrote: You could put one image with transparency on top of another with a difference in z-levels, but I think IE has issues with image transparencies...

I figured it out. There's a way to use the new canvas object with javascript to accomplish what I want. It works in chrome & firefox. I don't have opera to test, and I'm upgrading IE (which I never use), if I can, in order to test in that. But frankly, if it doesn't work in IE, I'm not sure how much I care.

http://gumonshoe.net/NewCard/MaskTest.ht ml

Basically, you use a PNG with alpha and set another images alpha values using java script equal to the mask's alpha values.

You can view the JS here:
http://gumonshoe.net/js/canvasMask.js

[kaiser-d]

You can accomplish this in a couple different ways, but the best possible way is to edit the image to the size/cropping you want for static html placement in an image editor. A few other ways would be:

-Use CSS styling to define the dimensions of a div tag, set overflow to hidden, place image inside div in your html.
-Use z index, and stack objects as if they were layers.
-Use a script to align/size image accordingly.
-Break the image into slices and use a table to align the pieces appropriately.

Again, the best cross-browser result will come if you just crop the image to the correct sizing, save as png if you need to have transparency. Photoshop will accomplish this quite nicely. CSS has some very nice alignment options, but if you're unfamiliar with CSS, use a table.