CODEWITHSUNDEEP
htmlwebkitcss
Brennan McEachran
Brennan McEachran

Reputation: 519

Can -webkit-mask work on an element (eg. div)

Trying to use some CSS on a div and mask it to a particular shape. The concept is to create a div, mask that div into a shape (say a silhouette of a person) and apply some background css gradients to the div. Essentially getting a gradient silhouette of a person, where I can easily change the colours by changing the css colors.

I've been attempting -webkit-mask (as seen here: masking an image) but can't seem to get it work on a div/span/whatever

Anyone done anything similar? B

Upvotes: 2

Views: 7130

Answers (3)

Jonatan Littke
Jonatan Littke

Reputation: 5663

Yes.

<style>
  #image {
    mask: url(#mask);
    -webkit-mask: url(mask.svg) top left / cover;
    -o-mask: url(mask.svg) top left / cover;
    -ms-mask: url(mask.svg) top left / cover;
  }
</style>

http://www.html5rocks.com/en/tutorials/masking/adobe/

Upvotes: -1

Michael Mullany
Michael Mullany

Reputation: 31715

This is the only known example of -webkit-mask documentation for CSS masks, and it contains syntax mistakes. The official Safari documentation contains a dumbed down version of this. According to the blog post, complex webkit masks (using SVG images) can work on any box content.

Masks are also part of SVG 1.1, but I have no information on whether they actually have been implemented correctly (or at all).

Upvotes: 1

Hussein
Hussein

Reputation: 42818

For cross browser compatibility, you need to create your mask as a transparent image in the shape you like. See my link below. I create a triangular mask in photoshop and applied it to an image.

Check working example at http://jsfiddle.net/39VG9/1/

Upvotes: 3

Related Questions