5

I'm playing with the -webkit-mask-box-image css property.

<div style="
    background-color: red;
    -webkit-mask-box-image: url('images/cards/set1.png');
"></div>

This works great. I end up with a red element in the shape of the mask image.

The only catch is that I need about 25 different images. I could just load up 25 different mask images, but it'd be great if I could load just one image and then use it akin to a CSS sprite where I reposition it or clip it.

But I can't think of a good way to do that with the mask properties. Is it doable?

The one solution I came up with would be to use markup akin to this:

<div style="
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
    position: relative;">
    <div style="
        background-color: red;
        -webkit-mask-box-image: url('images/cards/set1.png');
        position: absolute;
        top: -400px
    "></div>
</div>

Instead of using a background image and positioning it as you would a sprite, I'm using a DIV and positioning that within a parent div that crops it. I think that's an OK option, but was wondering if there was a webkit-centric CSS property already designed for exactly this.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
DA.
  • 39,848
  • 49
  • 150
  • 213
  • Another question I have - what exactly is the difference between `-webkit-mask-image` and `-webkit-mask-box-image`? – easwee Jul 25 '11 at 10:53
  • box image is meant for border masking and has additional features like it can be repeated along the border...http://www.html5rocks.com/en/tutorials/masking/adobe/ – Muhammad Umer Oct 27 '14 at 15:41

1 Answers1

9

I went digging into webkit masks since I got really interested in your question - I'm not sure if I understand correctly the difference between -webkit-mask-image and -webkit-mask-box-image - but the main difference to me is that -webkit-mask-box-image can stretch to fit the container even if the mask image is not the same size.

Since you have a fixed size container I would try using the -webkit-mask-position to move the mask image (note that it works only together with -webkit-mask-image).

Sample: http://jsfiddle.net/easwee/pChvL/68/

Code:

<div class="image mask">
    <img src="image.jpg" />
</div>
<br />
<div class="image mask2">
    <img src="image.jpg" />
</div>


.image {width:200px;height:200px;}
.mask {
    border:1px solid green;
    -webkit-mask-image: url('mask.gif');
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:0 0;
}
.mask2 {
    border:1px solid green;
    -webkit-mask-image: url('mask.gif');
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:0 -200px;
}

Not sure if this will work for you, but atleast I had fun digging in.

easwee
  • 15,757
  • 24
  • 60
  • 83
  • Thanks for the answer! In the end, I had to scrap it all. It turns out mobile safari (at least when embedded via phonegap) has image size limitations. My sprite image was extremely large and wouldn't load until I reduced the size. In the end, we had to go the old slice-n-dice route. – DA. Jul 26 '11 at 13:35
  • @DA - lame how good ideas turn out bad on mobile - happened to me few times too hehe. – easwee Jul 26 '11 at 14:48
  • Very useful, didn't know that diff with -box – Noel Tock Oct 23 '11 at 08:55
  • Another difference I observed is `-webkit-mask-image` is not able to render image in iOS device (Tested on chrome iOS) whereas `-webkit-mask-box-image` works perfactly. – Pardeep Jain Jul 24 '19 at 10:43