How to mask image with gradient background?

Question

i have images and i want to remove 2 angles of each image. The removed part should be transparent, and this is the part i couldn't fix. Here are 2 images the shows what i want to do:

This is an empty image. The white color is the part i want to show. The Blue part is showing the document background gradient color.

basic image

This is what should i get at the end. The blue part again, is transparent from document gradient color.

what it should look like

Anyone has idea?

score 0 · Answer 1 · answered Sep 11 '12 at 10:52

0

In webkit browsers you can use mask-box-image. Put your image in a div with the image-mask class and then use mask-box-image with a transparent png

.image-mask {
  -webkit-mask-box-image: url(your_mask.png);
}

There is an excellent article on the always brillient CSS Tricks website - http://css-tricks.com/webkit-image-wipes/

It's webkit only though I'm afraid.

answered Sep 11 '12 at 10:52

SpaceBeers

13,617
6
47
61

Note that the gradient is from the DOCUMENT BACKGROUND. so if the position of this image and its mask changed, the gradient will not be fixed. – Alaa Badran Sep 11 '12 at 10:55
1

here is an article that covers more browsers using a svg image http://stackoverflow.com/questions/8414348/is-there-a-moz-mask-css-property-like-webkit-mask-image – Breezer Sep 11 '12 at 10:58
Is there a solution for all browsers? – Alaa Badran Sep 11 '12 at 10:58
@AlaaBadran - Not that I'm aware of. Sorry. – SpaceBeers Sep 11 '12 at 10:59
2

@SpaceBeers You can find further documentation here http://developer.mozilla.org/en-US/docs/CSS/mask – Breezer Sep 11 '12 at 11:03
@AlaaBadran - SVG isn't supported on Android devices btw. – SpaceBeers Sep 11 '12 at 11:04
for android, i have another version of work. Thanks alot @SpaceBeers – Alaa Badran Sep 11 '12 at 11:15

score 0 · Answer 2 · answered Oct 25 '12 at 14:23

Some may not like my non-code answer, but you could do it in the image itself? Please don't hate me for suggesting this, but sometimes code doesn't solve all.

Save the image as a PNG.
Make sure the layer you are working on is not the "background" layer, if you are in Photoshop.
Erase/use the marquis tool to delete the part of the image you want to be transparent. You can blur the edges of the marquis tool to make it "fade."
Depending on your settings in Photoshop or other editing program, the "transparent" section should be a checkered grey and white.
Save the image as a PNG and use it instead of the coded mask.

Granted, this doesn't work if you are dynamically loading images or have some other reason you are relying on code to mask your image, but it should work. Early versions of IE have some issues with PNGs, but I've not encountered it with IE9, IE8 or IE7 in my current project.

How to mask image with gradient background?

2 Answers2