Choose if and which masks to use depends on creativity and the concept of creativity.
Three options for creating masks
The ability to make creativity partially transparent is useful for creatives that overlap a publisher’s page or when different elements are animated within the creative. There are three different ways to achieve a masking effect with CSS
To crop an element, you can proceed with its nesting to allow it to be cropped inside a div to which it was applied overflow: hidden. This method works with all browsers but is limited to the forms you can get with a div (and border-radius applied).
Clip-path
Clip-path is a CSS property used to define Clipping path service, which are the best choice for sharp (vector) edges. Clipping paths depend on an SVG shape and offer more flexibility in terms of geometry. A limitation to keep in mind is that the property clip-path is not compatible with any version of Internet Explorer.
Manually defining clipping paths is challenging if you are not an expert; however, there are many free online visual tools, including Clippy, which allows for simple and complex forms.
Basic clipping path
The property mask allows obtaining the masking through the transparency or the brightness of an original image. WebKit browsers are the only ones that support image masking. Further information on the property mask
For updates on clip-path e browser compatibility mask. The property overflow: hidden is fully supported by all browsers.
Choice of the optimal approach based on the campaign
When deciding which option to use, keep in mind that support for cropping in CSS is limited in Internet Explorer and Safari:
Safari does not support SVG paths, but only handles the forms included in the CSS declaration (including circles and polygons)
For better browser compatibility, use overflow: hidden to crop content on the edges of the main element. The downside is that the form of the mask is limited to rectangles and ellipses (using border-radius). The good news is that other important clip-path properties are preserved:
You can crop arbitrary DOM content, including text, images, SVG, and canvas.
The mask can be animated, at least in the range of forms provided for a div.
Mouse events arising from the invisible area are suppressed. If you don’t see part of an element, you can’t even interact with it unintentionally.
Creating common masking effects with simple shapes
While overflow: hidden limiting yourself to simple forms of masking, animating the mask’s properties allows you to get some useful effects:
Animate the width of the image from 0 to the maximum to create a revelation effect. Example
Use box-shadow to create a mask with soft edges. Example
Set a wide edge radius and core width and height to create a circular revelation effect centered on the contents. Example
Move/rotate the mask to create a spotlight effect.
Combination of masks to create complex shapes
Intersection. Create an intersection by nesting the mask containers. For example, it crosses a rectangle and a circle to create an increasing semicircular mask. Example
Merge: Google Web Designer supports a data type called “group”. Groups allow you to create separate masks that cover identical contents, considering the appearance of a single mask with multiple parts (although in reality, each mask has AN freelance DOM). Example
Animation of main and secondary elements in opposite directions
When you animate a div, all the secondary elements come to life with him. Therefore, if you wish to create the illusion of an animated mask, animate the secondary elements in the opposite direction to make them appear static. Example
Overlay of partially transparent images
Add to the contents an image that matches the background in the opaque area or is transparent. This way you get arbitrary Image clipping, but you can’t overlay the masks (since each mask covers the entire opaque area instead of being displayed only in the visible area) and you can’t animate the mask shape (except translation/rotation and resizing ). Example
Using a canvas element
If all your content is included in an element <canvas>, your flexibility in adding clipping effects increases. However, the canvas is a black box and a complicated runtime is required to support multimedia content.
Comments are closed.