Tips for implementing coupons with CSS

Time:2021-11-4

In the actual web development process, we will always encounter a variety of layouts. A colleague of the company asked me if there is any good way to implement such a layout, which is a very common coupon effect on the activity recharge page, as follows

Tips for implementing coupons with CSS

There’s something like this

Tips for implementing coupons with CSS

Considering various possible scenarios, the following cases are abstracted. Let’s take a look at the implementation

Tips for implementing coupons with CSS

1、 Best implementation

First of all, the best implementation of this kind of layout must beMask mask。 You can take a look at the maskCSS3 mask Amway Report。 Here is a brief introduction

The basic grammar is simple, andbackgroundThe syntax is basically the same

.content{
  -WebKit mask: 'mask picture';
}
/*Complete grammar*/
.content{
  -WebKit mask: 'mask picture' [position] / [size];
}

The mask image here is basically the same as the background, which can bePng pictureSvg picture, orGradient paintingPictures, but also supportMulti picture overlay

The principle of masking is simple,The final effect shows only the opaque part, the transparent part will not be visible, translucent and so on

Tips for implementing coupons with CSS

In fact, in addition to using transparency (alpha) as the mask condition, it can also be determined by brightness. For example, white means hidden and black means visible. But currently only Firefox supports it

Therefore, as long as the above shapes can be drawn, it can be realized.

2、 Concave fillet

Most coupons have an obvious feature, that isConcave fillet。 It’s easy to think of rounded cornersradial-gradient? fileGuid=kDGWvXGxTXG6KrrQ)。 This grammar is a little complicated. It doesn’t matter if you can’t remember it. You can take a look at Mr. Zhang’s article10 demo examples learn CSS3 radial gradient radial gradient

.content{
  -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px); 
}

Tips for implementing coupons with CSS

In this way, a transparent circle with a radius of 20px is drawn, but there is still a lot of room for optimization at the code level.

  1. When implementing a well-defined gradient, the position of the back color only needs to be less than or equal to the position of the front color, such as0
  2. Transparent colors can be usedHexadecimalAbbreviations such as#0000To replaceJust use one color for the opaque part. I like itred, mainly because the word is short
  3. In addition, the gradient is centered by default, so the second center can be removed and the left can be used0To represent

The test found that the mobile terminal does not support hexadecimal, so it is stillIt needs to be in the form of transparent or RGBA

Further simplification is obtained

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0); 
}

Yes, there are several less B traffic ~ you can view online examplesCodepen coupon implementation 1

3、 Coupon effect

The above is the most basic concave fillet effect. Now let’s realize the following layouts, such as two semicircles. According to the above example, can we copy another circle? Change the orientation

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
}

Tips for implementing coupons with CSS

At this time, I found that there was no circle. The reason is actually very simple. As shown below,The two layers of background are superimposed on each other, resulting in the whole background becoming opaqueTherefore, the mask effect is all visible.

Tips for implementing coupons with CSS

There are two solutions:

  1. Stagger the two concave corners. Here, you can modify the size and position, and prohibit tiling
.content{
-webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0);
-webkit-mask-size:   51%; /* Avoid gaps*/
-webkit-mask-position:   0   100%; /* One on the left and one on the right*/
-webkit-mask-repeat: no-repeat;
}

Tips for implementing coupons with CSS

The dynamic demonstration is as follows, so that they will not overlap each other

Tips for implementing coupons with CSS

You can view online instancesCodepen coupon implementation 2

  1. Compositing with masksmask-composite, this may not be familiar. Let me briefly introduce it

Under standard attributesmask-compositeThere are 4 attribute values (supported by Firefox)

/* Keyword values */
mask-composite: add; /*  Overlay (default)*/
mask-composite: subtract; /*  Subtract and exclude the upper area*/
mask-composite: intersect; /*  Intersect, showing only where they overlap*/
mask-composite: exclude; /*  Exclude, display only non coincident places*/

This may be difficult to understand. In fact, you can refer to the shape synthesis operation of some graphics software, such as Photoshop

Tips for implementing coupons with CSS

-webkit-mask-compositeDifferent from the standard values, there are many attribute values. See the following

-webkit-mask-composite: clear; /* Clear, no masks are displayed*/
-webkit-mask-composite: copy; /* Show only the upper mask, not the lower mask*/
-webkit-mask-composite: source-over; 
-webkit-mask-composite: source-in; /* Show only coincident places*/
-webkit-mask-composite: source-out; /* Only the upper mask is displayed, and the overlapping places are not displayed*/
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in; /* Show only coincident places*/
-webkit-mask-composite: destination-out;/* Only the lower mask is displayed, and the overlapping places are not displayed*/
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor; /* Show only non coincident places*/

Are you confused at once? Don’t panic, you can see that there are several values abovesource-, and a few moredestination-At the beginning,Source stands for new contentThat is, the layer drawn above,Destination represents meta content, which is the layer drawn below(In CSS, the previous layer will overwrite the later layer), the attribute values here are actually borrowed from the concepts in canvas, which can be viewed for detailsCanvasRenderingContext2D.globalComposite

Tips for implementing coupons with CSS

It doesn’t matter if you can’t remember. The actual development can be tested one by one [\ cover your face]. Specific differences can be viewedCodepen – WebKit mask composite attribute value demonstration

Tips for implementing coupons with CSS

After understanding this attribute, the above superposition problem is very simple. SetShow only coincident placesThat’s all

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
  -webkit-mask-composite: source-in | destination-in ; /*chrome*/
  mask-composite: intersect; /*Firefox*/
}

Tips for implementing coupons with CSS

The dynamic demonstration is as follows, so that onlyWhere they overlap

Tips for implementing coupons with CSS

You can view online instancesCodepen coupon implementation 3

Two rounded corners are realized, and four are easy. Just draw four circles. Similarly, mask synthesis can be easily realized

content{
  -webkit-mask: radial-gradient(circle at 0 0, #0000 20px, red 0), radial-gradient(circle at right 0, #0000 20px, red 0), radial-gradient(circle at 0 100%, #0000 20px, red 0), radial-gradient(circle at right 100%, #0000 20px, red 0); /* Put a circle in each of the four corners*/
  -webkit-mask-composite: source-in | destination-in ; /*chrome*/
  mask-composite: intersect; /*Firefox*/
}

Tips for implementing coupons with CSS

You can view online instancesCodepen coupon implementation 4

4、 Coupon tile effect

The above example shows the effect of 2 fillets and 4 fillets, drawing 2 and 4 circles respectively. In fact, this can be achieved by tiling, and only one circle is required. The implementation steps are as follows

  1. Draw a transparent circle in the middle left
.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); 
}

Tips for implementing coupons with CSS

  1. Pan half of yourself to the left
.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px
}
/*It can also be abbreviated as*/
.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0) -20px; 
}

Tips for implementing coupons with CSS

The effect came out. Isn’t it amazing? In fact, it makes use of the defaultRepeat feature, you can understand it with a moving picture

belowThe red border indicates the viewport range, that is, the final effect. Here, for the sake of demonstration, we put out of sightTileTranslucent processing is done, and the movement indicates the process of position change

Tips for implementing coupons with CSS

You can view online instancesCodepen coupon implementation 5

Similarly, four fillets can also be realized in this way

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px -20px;
}
/*It can also be abbreviated as*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px; 
}

Tips for implementing coupons with CSS

The implementation principle is demonstrated as follows

Tips for implementing coupons with CSS

You can view online instancesCodepen coupon implementation 6

The tile size needs to be changed for 6 fillets.

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px -20px;
  -webkit-mask-size: 50%;
}
/*It can also be abbreviated as*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}

Tips for implementing coupons with CSS

The implementation principle is demonstrated as follows

Tips for implementing coupons with CSS

You can view online instancesCodepen coupon implementation 7

If you continue to reduce the size of the background image, you can get the final effect

.content{
  -webkit-mask: radial-gradient(circle at 10px, #0000 10px, red 0); 
  -webkit-mask-position: -10px;
  -webkit-mask-size: 100% 30px;
}
/*It can also be abbreviated as*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -10px / 100% 30px; 
}

Tips for implementing coupons with CSS

The implementation principle is demonstrated as follows. In fact, it is tiled

Tips for implementing coupons with CSS

You can view online instancesCodepen coupon implementation 8

5、 Reverse hollowed out superposition

In some cases, a single layer of gradient may not be able to draw very complex graphics, which requires reverse hollowing technology, which is actually mentioned aboveMask synthesis, use it again here

  1. Take the above implementation first
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}

Tips for implementing coupons with CSS

  1. Make a row of small holes directly on this basis
.content{
  -webkit-mask: radial-gradient( circle at 50%, red 5px, #0000 0) 50% 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract; /*Firefox*/
}

Tips for implementing coupons with CSS

Notice that it’s used here-webkit-mask-composite: destination-outIndicates subtraction, only the lower mask is displayed, and the coincident places are not displayed

Tips for implementing coupons with CSS

You can view online instancesCodepen coupon implementation 9

You can also put it on both sides and change itpositionThat’s it

.content{
  -webkit-mask: radial-gradient( circle at 5px, red 5px, #0000 0) -5px 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract; /*Firefox*/
}

Tips for implementing coupons with CSS

You can view online instancesCodepen coupon implementation 10

6、 Border mask

Some students thinkRadial gradient is too complex to write. Can you use pictures instead? In fact, it is also feasible. The border mask here refers tomask-border, it is still in the W3C draft, but there is an alternative attribute-webkit-mask-box-image

Tips for implementing coupons with CSS

Grammar and conceptsborder-imageVery similar, aboutborder-imageRefer to this articleCorrect usage of border image, here we mainly learn about the usage and effect

.content{
  -WebKit mask box image: 'mask picture' [< top > < right > < bottom > < left > < x-repeat > < y-repeat >]
}

For example, there is a picture like this

Tips for implementing coupons with CSS

Svg code is so long that many tools can be exported. In fact, you can’t directly find design students(The. PNG format can also be used

<svg xmlns="http://www.w3.org/2000/svg" width="60.031" height="60.031" viewBox="0 0 60.031 60.031"><path d="M40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0V20.127h.065A20.066 20.066 0 0 0 20.131.061v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064V40A20.063 20.063 0 0 0 40 60.027z" fill-rule="evenodd"/></svg>

You need to escape here. You can use Mr. Zhang’s helpSvg online merge tool

.content{
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.031' height='60.031' viewBox='0 0 60.031 60.031'%3E%3Cpath d='M40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0V20.127h.065A20.066 20.066 0 0 0 20.131.061v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064V40A20.063 20.063 0 0 0 40 60.027z' fill-rule='evenodd'/%3E%3C/svg%3E") 20;
  /*Here, 20 indicates that a fixed area of 20 pixels is reserved around, and the rest is tiled or stretched*/
}

Then such a shape is realized, which is also adaptive

Tips for implementing coupons with CSS

You can view online instancesCodepen – WebKit mask box iamge implementation 1

Another example is a picture like this

Tips for implementing coupons with CSS

.content{
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.031' height='60.031' viewBox='0 0 60.031 60.031'%3E%3Cpath d='M55.186 30.158a4.965 4.965 0 0 0 4.841 4.959V40A20.063 20.063 0 0 0 40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0v-4.888c.054 0 .1.016.158.016a4.973 4.973 0 1 0 0-9.945c-.054 0-.1.014-.158.015v-5.074h.065A20.066 20.066 0 0 0 20.131.058v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064v5.07a4.965 4.965 0 0 0-4.841 4.966z' fill-rule='evenodd'/%3E%3C/svg%3E") 20;
}

You can get such a shape that the semicircles on both sides are stretched

Tips for implementing coupons with CSS

At this time, you only need to set the tiling mode-webkit-mask-box-image-repeat ,This andborder-image-repeatIs the same concept, with the following four values

-webkit-mask-box-image-repeat: stretch; /* Stretch (default), no tiling*/
-webkit-mask-box-image-repeat: repeat; /* Repeat*/
-webkit-mask-box-image-repeat: round; /* Repeat, stretch as appropriate when you cannot tile an integer number of times*/
-webkit-mask-box-image-repeat:   space; /* Repeat, when it cannot be tiled an integer number of times, it will be filled with blank gaps*/

The differences of several tiling methods are as follows

Tips for implementing coupons with CSS

Here we can useroundperhapsrepeat

.content{
  -webkit-mask-box-image: url("...") 20;
  -webkit-mask-box-image-repeat: round;
}

Tips for implementing coupons with CSS

You can view online instancesCodepen – WebKit mask box iamge implementation 2

7、 Summary and description

The above has introduced a total of 12 cases of drawing coupons, which should solve most of these layout problems. Here is a summary of the following points

  1. CSS maskIt must be the most perfect implementation of this kind of layout
  2. needCSS radial-gradientSkills of drawing graphics
  3. As far as possiblerepeatTo repeat the same element
  4. It needs to be used flexibly when multiple shapes are superimposedmask-composite
  5. Pictures can also be used instead of CSS gradients, which need to be usedmask-border

As for compatibility, there is no big problem regardless of ie. at present, the last mask border is only compatible with the chrome kernel, and the mobile terminal can be used safely

Thank you for reading and hope to inspire future work.