Are you still worried about the style of the mall card in such a variety of formats? CSS is not familiar, canvas is difficult, how to do?

How many steps does it take to write a mall card with CSS?

There are three steps:

  1. Open this url (qishaoxuan.github. IO /css_tricks/…)
  2. Find the style you want
  3. Copy and paste

After the test, let’s analyze the CSS card coupons.

Let’s prepare the basics

radial-gradient

background: radial-gradient(shape size at position.start-color. .last-color);
Copy the code
value describe
shape Determine the type of circle:

Ellipse (default): Specifies the radial gradient of the ellipse. Circle: Specifies the radial gradient of the circle
size Define the size of the gradient
position Define the position of the gradient

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

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

linear-gradient

background: linear-gradient(direction.color-stop1.color-stop2,...). ;Copy the code
value describe
direction Specify the direction (or Angle) of the gradient with an Angle value
color-stop1, color-stop2,… Used to specify the start and end colors of the gradient

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

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

background

Background allows multiple images to be set, following background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip]; Use, separate can.

Start assembling the basics

Let me write the simplest one

Simply position the circular position of 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;
}
Copy the code

Further study

Do you remember that background has a repeat attribute? That is to say, we only need to set part of the style and then use repeat. Look at the picture, isn’t it a combination of Linear-gradient and radial-gradient without gradient? Then we can write it with the help of pseudo class.

.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;
}
Copy the code

A bit complicated

It’s easy to see, just draw another circle, but take into account that the colors on both sides are different, so we need to draw four background images, position each circle in each corner 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;
}
Copy the code

Write in the last

When we see a new things, don’t, try to analyze, could he just variants we learned before, just for our knowledge recombination and appropriate modification, when we are done, maybe just discover, this also just so so, but if at the beginning with resistance to refuse, but only a little progress.

Finally, this website welcomes star ~, more welcome issue ~.