ads via CarbonGet 10 Free Images From Adobe Stock. Start Now.ads via Carbon

ads via Carbon从Adobe Stock获得10张免费图片。现在开始。广告通过Carbon

In the design world, masking is a popular technique to achieve unique design effects. As a designer, I’ve used it many times, but my usage of it on the web is rare. I think that the reason that kept me from not using a CSS mask is the browser support, they are partially supported in blink browsers (Chrome and Edge) and fully supported in Safari and Firefox.


The great news is that CSS masking will be part of Interop 2023, which means we should expect cross-browser support (Yay!!).

最大的好消息是,CSS屏蔽将是Interop 2023的一部分,这意味着我们应该期待跨浏览器支持(耶!!)。

In this article, I will go through what CSS masking is, how it works, and a few use cases and examples for it.


Let’s dive in.


Table of contents


What is masking?


In simple words, masking works in a way that hides part of an element without erasing it.


Consider the following figure:


We have an image, and we have a mask. In design apps like Photoshop, we can insert the image inside the grey shape, and it will result in a masked image.


The way that works is that it hides some parts of the image without erasing it (They are still there, but hidden).


This is the core concept of masking, which is to use a shape to show and hide parts of an element. We can take that further and explore even further and more unique ways to mask content.


For example, we can create a gradient mask like the following one.


In a gradient, there are filled and transparent pixels. The filled ones are where the element’s part will be visible, and the transparent one is where the hidden parts are.



首页 - Wiki
Copyright © 2011-2024 iteam. Current version is 2.130.0. UTC+08:00, 2024-07-20 20:54
浙ICP备14020137号-1 $访客地图$