
PNG Masking: How to Dynamically Shape Any Image on Your Website - cwan
http://wegraphics.net/blog/articles/png-masking-how-to-dynamically-shape-any-image-on-your-website/
======
ja2ke
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)

~~~
alanh
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>

------
EGreg
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.

~~~
damncabbage
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...](http://mediacdn.disqus.com/1318540955/img/marketing/homepage/illustration.jpg)

* 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.

~~~
EGreg
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

~~~
damncabbage
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/>

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

------
flixic
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.

~~~
dmerfield
The question is more whether your _should_ do that.

~~~
damncabbage
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.)

------
ars
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).

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

~~~
jordanlev
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.

