5 ms·

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

63 points by cwan 15y ago

flixic 15y ago
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 15y ago
  The question is more whether your should do that.
  - mark_up 15y ago
    Well yes, that question applies to every design decision ever made. It's pointless to speculate without knowing the context, so why would you ask it?
  - damncabbage 15y ago
    It can be an appropriate effect (and look good). Here's an example: http://www.fox8.tv/ 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.)
EGreg 15y ago
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 http://myownstream.com and http://www.fotomozo.com/gallery?name=out4c2df5372f234.png http://www.fotomozo.com/gallery?name=out4c2df5372f234.png but without the round lens.
- damncabbage 15y ago
  By "zoom", I'm assuming you mean the zoomed-in-on-hover effect on the illustration on http://disqus.com 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/illustration.jpg 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.
  - EGreg 15y ago
    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 15y ago
      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/ http://css3pie.com/ or http://fetchak.com/ie-css3/ http://fetchak.com/ie-css3/
      - EGreg 15y ago
        That's awesome! I wasn't aware of these IE behaviors. Thanks once again for the info. Now the effects can work everywhere!
- amccloud 15y ago
  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/ http://pixelcloud.com/404/
michaelchisari 15y ago
Cool idea, although I wonder if there's a better way to preload the images, so it's more seamless.
- jordanlev 15y ago
  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.
ja2ke 15y ago
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 15y ago
  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 http://caniuse.com/#feat=css-masks
mark_up 15y ago
A better tutorial: http://webdesignerwall.com/tutorials/css3-image-styles http://webdesignerwall.com/tutorials/css3-image-styles
ars 15y ago
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).

63 points by cwan 15y ago

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 15y ago
The question is more whether your should do that.
- mark_up 15y ago
  Well yes, that question applies to every design decision ever made. It's pointless to speculate without knowing the context, so why would you ask it?
- damncabbage 15y ago
  It can be an appropriate effect (and look good). Here's an example: http://www.fox8.tv/ 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.)

EGreg 15y ago

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 http://myownstream.com and http://www.fotomozo.com/gallery?name=out4c2df5372f234.png http://www.fotomozo.com/gallery?name=out4c2df5372f234.png but without the round lens.

damncabbage 15y ago
By "zoom", I'm assuming you mean the zoomed-in-on-hover effect on the illustration on http://disqus.com 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/illustration.jpg 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.
- EGreg 15y ago
  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 15y ago
    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/ http://css3pie.com/ or http://fetchak.com/ie-css3/ http://fetchak.com/ie-css3/
    - EGreg 15y ago
      That's awesome! I wasn't aware of these IE behaviors. Thanks once again for the info. Now the effects can work everywhere!
amccloud 15y ago
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/ http://pixelcloud.com/404/

michaelchisari 15y ago

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

jordanlev 15y ago
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.

ja2ke 15y ago

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 15y ago
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 http://caniuse.com/#feat=css-masks

mark_up 15y ago

A better tutorial: http://webdesignerwall.com/tutorials/css3-image-styles http://webdesignerwall.com/tutorials/css3-image-styles

ars 15y ago

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