Write a shopping mall card coupon using CSS in three steps

Today is 618, and all major shopping malls are holding promotional activities. Today we will use CSS to make a shopping mall card coupon, as follows:

Are you still worried about the various formats of shopping mall vouchers like the ones above? I am not familiar with CSS and canvas is too difficult. What should I do?

How many steps are needed to write a shopping mall voucher using CSS?

There are three steps in total:

• Open this URL (enter https://qishaoxuan.github.io/css_tricks/hollowOut/ in the browser)
• Find the style you need
• Copy and Paste

After handing it over to the test, let's analyze the CSS card.

Let's prepare the basics

radial-gradient:

background: radial-gradient(shape size at position, start-color, ..., last-color);

In this way, we can easily write a centered circular background image

.center-circle {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 50px 50px, transparent 10px, #00adb5 0);
  }

linear-gradient

background: linear-gradient(direction, color-stop1, color-stop2, ...);

We don't need to know the specific gradient process, just write a simple one, write one that uses the gradient properties without gradient background image:

.linear-gradient {
    width: 100px;
    height: 100px;
    background: linear-gradient(to right, #00adb5, #00adb5);
  }

background

You can set multiple images for background , following background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip]; use them , separate them.

Start putting together the basics

Write the simplest

Just position the circle in the center circle example above on the left.

.left-circle{
  width: 100px;
  height: 100px;
  position: relative;
  background: radial-gradient(circle at 0 50px, transparent 10px, #00adb5 0) top left/100px 100% no-repeat;
}

Further Learning

Do you remember background has a repeat attribute? That is to say, we only need to set a part of the style and then use repeat . Look at the picture. Isn't this a combination of linear-gradient and radial-gradient without gradient? With the help of pseudo-class, we can write it out.

.hollow-circles {
  width: 300px;
  height: 100px;
  position: relative;
  background: #00adb5;
  margin-bottom: 10px;
}
.hollow-circles::after {
  content: '';
  position: absolute;
  height: 5px;
  width:100%;
  left: 0;
  bottom: -5px;
  background-image: linear-gradient(to right, #00adb5 5px, transparent 5px, transparent),
  radial-gradient(10px circle at 10px 5px, transparent 5px, #00adb5 5px);
  background-size: 15px 5px;
}

A bit more complicated

It seems very simple, isn't it just drawing another circle of the previous one? However, we have to take into account that the colors on both sides are different, so we need to draw four background images, position each circle in the corners of the square, and then combine them together.

.two-circles {
  width: 300px;
  height: 100px;
  background: radial-gradient(circle at right top, transparent 10px, #00adb5 0) top left / 60px 51% no-repeat,
    radial-gradient(circle at right bottom, transparent 10px, #00adb5 0) bottom left /60px 51% no-repeat,
    radial-gradient(circle at left top, transparent 10px, #eeeeee 0) top right /240px 51% no-repeat,
    radial-gradient(circle at left bottom, transparent 10px, #eeeeee 0) bottom right /240px 51% no-repeat;
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.