As of this writing, browser support for CSS3 masking is as follows: Masking crops the element’s content to an image’s boundary, and then applies an alpha channel determined by the image content.
Clipping crops the rendering of an element and its children to a binary mask defined either through an inlined SVG, or a “basic shape” consisting of a circle, and ellipse, or a polygon. We started by exploring CSS3 masking, which comes in two forms: clipping (clip-path) and masking (image-mask). This technique, however, is really the opposite of masking - instead of rendering only within the mask region, it paints over everything that is not in the mask region. Unfortunately, we discovered that even in simple cases, overflow-based masking produced blurring and flickering artifacts on some browsers.įinally, it’s worth noting that in simple cases, masking-like effects can be achieved simply by overlaying an image with transparent regions, which is already possible in Google Web Designer. Moreover, on browsers that support CSS3 masking, the mask’s shape could essentially be arbitrary, although animation would still be limited to the element’s transform. Despite this limitation, overflow-based masking would still be useful for basic effects like wipes and reveals. This exhibits all masking behaviors, although the mask’s shape is equivalent to the element’s border, which effectively limits masks to rectangles, circles, ellipses, and capsules.
However, CSS3 masking is not yet available on all major browsers.Īnother way to implement masking, which is already supported by all major browsers, is to represent a mask as an element styled with overflow: hidden. Smooth mask animation is only possible if the mask is a CSS basic-shape, but otherwise all masking behaviors, such as those listed in the section above, are supported. We initially experimented with CSS3 masking. We don’t require perfection, however an approximate solution can still be useful in practice. There is no way to achieve all of the above properties on any particular browser, much less every browser we support (i.e., Chrome, Firefox, Safari, and IE 10+). Events originating outside the mask are blocked, and otherwise they pass through to the maskee without modification. If two independent masks overlap, the output of one is rendered atop the other, with no other interference. Placing one mask inside another is equivalent to intersecting the two masks. The mask can be translated, rotated, and scaled it can be morphed into new shapes and in the most general case, the mask can be a video. It may be as simple as a circle, or it may be multiple disconnected regions with complicated geometry. The maskee may include text, images, animation, SVG, canvases, videos, custom elements, and even other masks. A complete masking solution would meet the following criteria: For example, a circular mask may be used to create a spotlight effect, by only revealing content within the "light". We recognize that this is a disappointing result, so we’re using this space to explain (and show!) what we tried, and why we think masking is not yet ready for production.Ī mask defines a region of the plane where content (the maskee) is rendered outside of this region, the content is invisible. We investigated different approaches to implementing masking in HTML5, and we concluded that the limitations of existing browsers make effective masking infeasible at this time. Masking routinely tops the list of requested features in Google Web Designer. Investigating Masking in Google Web Designer
0 kommentar(er)
