Gradients, a new feature of CSS3, also have great potential.

A list,

Gradient is a new image type in CSS3, used instead of images, which has the following benefits:

  • Accelerate page loading speed, reduce bandwidth occupation;
  • Be more flexible.

2. Linear gradient

The use of gradients is quite common, for example in the navigation bar:

    background-image: linear-gradient(90deg.#0af.#0085ff)
Copy the code

Obviously, it looks much better than a solid color background.

Of course, there are times when we don’t need transition effects:

    background-image: linear-gradient(90deg.blue 100px.#FFF 100px.#FFF 200px.red 200px);
Copy the code

For linear gradients, in addition to linear-gradient, there is repeating-Linear-gradient:

    $c1: #fff;
    $c2: #DF5646;
    $c3: #1C78A4;
    background-image: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 40px, $c1 40px, $c1 50px, $c3 50px, $c3 80px);
Copy the code

So gradients are not that simple.

I’m sure some of you are asking, what else can you do? First of all, a gradient is an image, so what other CSS attributes are used with images?

    $color: #122556;
    background-image: linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%),
                      linear-gradient(-45deg, $color 25%, transparent 25%, transparent 75%, $color 75%);
    background-size: 30px 30px;
Copy the code

With this example, the idea of using gradients is more open. But there’s one caveat:

  • When you declare multiple gradients, the one declared first is closer to the user. (here we need to consider the problem of covering, generally adopt transparent);

Also, gradients can be animated

@mixin menuaction($color) { background: linear-gradient($color 100%, transparent 100%) no-repeat center bottom / 100% 10%; &:hover { background-size: 100% 100%; color: #fff; }}Copy the code

Radial gradient

The techniques used for radial radial gradients are basically the same as for linear gradients, so find out for yourself.

Four,

What will it end up with? Haha, all kinds of coupons these days, let’s use our knowledge of gradients to create a coupon:

	width: 300px;
    height: 120px;
    background: radial-gradient(transparent 0, transparent 5px.rgb5 (247245201)px) no-repeat.radial-gradient(transparent 0, transparent 5px.rgb5 (247245201)px) no-repeat.radial-gradient(transparent 0, transparent 5px.rgb5 (247245201)px) no-repeat.radial-gradient(transparent 0, transparent 5px.rgb5 (247245201)px) no-repeat.radial-gradient(transparent 0, transparent 5px.rgb5 (247245201)px) no-repeat.radial-gradient(transparent 0, transparent 5px.rgb5 (247245201)px) no-repeat.radial-gradient(#fff 0, #fff 10px.rgb10 (247245201)px) no-repeat.radial-gradient(#fff 0, #fff 10px.rgb10 (247245201)px) no-repeat.linear-gradient(90deg.transparent 10px.rgb10 (247245201)px);
    background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 60px 60px, 60px 60px100%, 100%;background-position: -10px 0,-10px 20px.-10px 40px.-10px 60px.-10px 80px.-10px 100px, 60px -30px, 60px 90px.left center;
Copy the code

Now is not a myriad of thoughts, that also don’t hurry up code.

If you like this article, please pay attention to my subscription number. I love typing code and check out more content.