PNG Masking: How to Dynamically Shape Any Image on Your Website | Hacker News Reader

PNG Masking: How to Dynamically Shape Any Image on Your Website

wegraphics.net

63 pointscwan15 comments

This isn't really a mask in the more commonly perceived digital graphics sense, in it's not actually creating transparent negative space around your image. The "masked" area is still a solid color, in this case white.

It would be more appropriate, and less flashy, to call this PNG matting, because it's far more analogous to cutting a matte (overlaying a paper stock frame over your artwork to shape it's borders) than it is to an actual mask (using an overlaid shape to actually define a new transparent alpha channel for your image)

Yep.

Webkit's actual masking is considerably more flexible. For instance, you can use one image as a mask, then color it (by setting the background color) to whatever you want… then varying the opacity… and it doesn't only work on solid backgrounds. (This is PERFECT for close buttons on your notifications, if you use e.g. green for success and red for failure, and now you don’t need to fire up an image editor when you tweak the color palette or add another class of notification.)

Of course, it’s quite limited in cross-browser applicability. http://caniuse.com/#feat=css-masks

If you were wondering, this is one of the techniques involved in making the awesome zoom at DISQUS.com (disclaimer: I didn't make it, just investigated it through Chrome Developer Tools :)

Can anyone reply here and elaborate on how exactly that "zoom" effect was made, because it's awesome, and DISQUS is the only place I've seen it. I have made a similar effect at http://myownstream.com and http://www.fotomozo.com/gallery?name=out4c2df5372f234.png but without the round lens.

By "zoom", I'm assuming you mean the zoomed-in-on-hover effect on the illustration on http://disqus.com. (I was a little confused as to what you meant until I went looking.)

To answer the question: it's done by having a 120px square div that:

* Has the full "zoomed" image as the background: http://mediacdn.disqus.com/1318540955/img/marketing/homepage...

* Has a thick white border, 120px border-radius and a box-shadow applied.

* Is absolutely positioned, with its top and left being controlled by javascript.

Thanks! I assume that the border-radius is what causes the image to appear round like that. Do you think it works in all the major browsers which support rounded corners? FF, IE8+, and WebKit?

Also I think there is one more factor * The background position is probably being controlled by javascript as well

Oh! Sorry, forgot that one.

border-radius will work on Firefox and Webkit (but you'd best include the -moz and -webkit versions as well, for older versions that don't pay attention to the plain attribute).

It's a bit tougher with IE. IE7 and IE8 don't support border-radius, but support can be faked with something like http://css3pie.com/ or http://fetchak.com/ie-css3/

That's awesome! I wasn't aware of these IE behaviors. Thanks once again for the info. Now the effects can work everywhere!

I'm pretty sure @ckj did that. I've sent him a link to your question. He also used the same technique for our 404 page on Pixelcloud. http://pixelcloud.com/404/

Oh man, that guy is good. Chris Jennings. I wonder if he would do consulting work for another company? How did he work for pixelcloud and disqus? I would really like to reach out to him about possibly designing stuff for Qbix.com if he's interested.

I've been using a similar technique to smoothly change color of a logo:

- There was an element with background-image being a PNG with solid-colored background and transparent cut-out of a logo.

- background-color CSS property was animated with CSS transitions and jQuery fallback.

The question is more whether your should do that.

It can be an appropriate effect (and look good). Here's an example: http://www.fox8.tv/

(Click the carousel, and watch the FOX8 logo up top-left. In this case it's just a clear window to the large background beneath it, but it's the same idea.)

It's not frequently used, but if all you need is a square, the css

  clip: rect(t,r,b,l);

works well. I've used it to create a sort of "expand/contract" effect. But you can use it for masking as well (true masking, the background behind it shines through).

Cool idea, although I wonder if there's a better way to preload the images, so it's more seamless.

I imagine you can just use the same preloading techniques as always -- create an image sprite of both background images and set different top/left coordinates in the style, or load images into non-displayable elements or unused variables in javascript.

Reply on news.ycombinator.com