Currently (July 2016), masks are only supported by webkit-based browsers (Chrome, Safari) and must therefore be provided with the appropriate vendor prefix. This provides you with the opportunity to mask an HTML element with any shape, i.e. the element can only be seen within the shape. The shape acts as a “punch” for “cutting out” the element. This principle is roughly comparable to the cut masks used in Photoshop:
In the case of image masks, the mask can take the shape of any external image (pixel or vector graphic) or a CSS color ramp (gradient). However, in the case of a pixel graphic or gradient, the image must feature transparent areas so that, in practice, PNG format is the only format option for images. The color does not come into this at all.
The benefit of using pixel graphics or gradients in this case is that they can also feature soft transitions from opaque to transparent. The benefit of SVG graphics is the lossless scalability they offer.
Image masks incorporate very similar properties to those of background images:
Properties can — except for -webkit-mask-size — also be combined in the “collective property”
-webkit-mask . Try it for yourself.
The exercise files can be found in the support material
The image will be masked immediately by the external SVG graphic sun.svg. The mask graphic is displayed in its original size and tiled — just like background images.
The mask will now no longer be tiled (no-repeat), will be positioned at the top in the middle (center top), and be automatically scaled to the element’s size (contain).
Create a new HTML and a new CSS file. Insert the image dante_meets_beatrice.jpg (or another image of your choice) in the HTML file, and assign it the class .my_image. Define (only using CSS) a mask that covers the image so that it is faded out in the bottom section.
The clipping function operates in a completely different way. You can only use this to mask background images. The property for this is appropriately called background-clip.
Normally you can “only” use the background-clip property to determine the expansion area of background images. It allows the following values:
This operates in all the latest browsers without any vendor prefix (Chrome 4.0, Safari 3.0, Firefox 4.0, IE 9.0, Opera 10.5).
However, webkit browsers add the following value to this property:
This allows you to mask background images using the text contained in the element.
The element featuring the text_mask class in the file masks.html only contains the text “Commedia”:
In the file masks.css this text is given a bold typeface with an 8rem font size. The element also contains the background image wood.jpg.
Now assign the following properties to the selector:
The background picture is now only visible within the text.
To get this effect to work, we had, however, to make the actual text invisible (transparent). This would also work with the property
but it would result in the text not being visible in non-Webkit browsers that do not support text clipping. Therefore, in this case we use instead the proprietary -webkit-text-fill-color property.
As you can see, this allows you even to assign a shadow filter to masked elements.