How to achieve gap effect on the card and coupon layout with gradient background?

Cleverly use CSS Mask to create a gradient background card voucher gap effect

In design, adding notch effects to card coupons, especially gaps in gradient backgrounds, is often a challenge. This article will introduce in detail how to use the mask attribute of CSS to easily achieve this effect.

Design puzzle: Card coupon gap under gradient background

If the background of the card coupon is solid, you can easily achieve the gap by directly masking it with a solid color. But the gradient background is not the case, and a simple mask will destroy the gradient effect. Therefore, there is a need for a method to accurately "dig out" the gap while retaining the gradient.

Solution: CSS Mask Properties

The CSS mask attribute is the key to solving this problem. It allows us to "block" elements using images or gradients, thus creating a variety of complex matte effects that are perfect for notch designs in gradient backgrounds.

The following code snippet demonstrates how to create a circular gap using a radial gradient:

 .card {
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, transparent 0); /* Safari and Chrome */
  mask: radial-gradient(circle at 20px 20px, #0000 20px, transparent 0); /* Firefox */
}

This code creates a circular mask through a radial gradient. #0000 means opaque black (occlusion area), transparent means transparent (notch area). 20px 20px specifies the center position, 20px controls the notch radius. In terms of browser compatibility, -webkit-mask has been added to support Safari and Chrome.

Effect preview

After applying the above code, a circular gap will appear in the upper left corner of the coupon, while the gradient background will remain intact.

Auxiliary tools

In addition to manually writing CSS code, some online design tools can also assist in card coupon design and gap generation. For example, some "coupon designers" or "graphic editors" may provide more intuitive notch creation capabilities.

Summarize

Using the CSS mask attribute, we can efficiently add gaps in various shapes to the gradient background card coupons to improve the design effect. This method is simple and easy to use and can maintain the overall appearance of the card coupon.

The above is the detailed content of How to achieve gap effect on the card and coupon layout with gradient background?. For more information, please follow other related articles on the PHP Chinese website!