Magic conic-gradient cone gradient, conic-gradient

Magic conic-gradient cone gradient, conic-gradient

Thanks to LeaVerou, we can use this wonderful attribute in advance.

conic-gradientWhat is it? Speakingconic-gradient, You have to mention its other two brothers:

• linear-gradient: Linear Gradient
  
• radial-gradient: Radial gradient
  

It should have been learned and used by many people. The new linear gradient and radial gradient in CSS3 have brought great changes to the CSS world.

Whileconic-gradient, Indicating a tapered gradient. Another gradient method brings more possibilities to the CSS world.

The following shows the body. For all the examples in this article, preview them in the Chrome kernel of the high version.

API

Let's look at its simplest API:

{    /* Basic example */     background: conic-gradient(deeppink, yellowgreen);}

Similarities and differences between linear gradient and cone gradient

So what is the difference between the gradient and the other two?

• linear-gradientThe direction of a linear gradient is a straight line, which can be any angle.
• radial-gradientA radial gradient spreads outward from a center point in an elliptical shape.

The direction of the cone gradient is as follows:

Highlights:

You can see the gradient direction and starting point of the cone gradient.The starting point is the image center, and then the gradient is performed clockwise around the center..

Use conic-gradientEnable color dial

I learned from aboveconic-gradientIn the simplest usage, we use it to implement the simplest color dial.

conic-gradientIt is not only a gradient from one color to another, but also a gradient of multiple colors.

As a result, we can list the rainbow in sequence.Red, orange, yellow, green, blue, and purpleSeven colors:

• conic-gradient: (red, orange, yellow, green, teal, blue, purple)

As shown in the preceding figure, the color ranges from the firstredStart, gradientorange, And thenyellow, Until the last setpurple. In addition, each interval is an equals value.

We can addborder-radius: 50%Suppose our CSS is as follows,

{    width: 200px;    height: 200px;    border-radius: 50%;    background: conic-gradient(red, orange, yellow, green, teal, blue, purple);}

See the results:

Wow has a preliminary shape. However, I always feel that it is not natural. In short, it's hard

Hmm? Where is the problem? First, the colors are not rich enough and bright enough. Second, the connection between the start and end is not natural. Let me make some adjustments.

We know that the color representation method,rgb()In addition to color notationhsl()Representation.

hsl()It is defined as Hue-saturation-lightness)

• The color phase (H) is the basic attribute of the color, which is commonly referred to as the color name, such as red and yellow.
• Saturation (S) refers to the purity of the color. The higher the color, the more pure it is. The lower it is, the more gray it is. The value 0-100% is used.
• Brightness (V), brightness (L), 0-100%.

Here, we get a brighter and more complete color by changing the color.

That is, using such a transitionhsl(0%, 100%, 50%)-->hsl(100%, 100%, 50%), Only the color phase is changed in the middle, and 20 transition states are generated. With SCSS, the CSS syntax is as follows:

$colors: ();$totalStops:20;@for $i from 0 through $totalStops{    $colors: append($colors, hsl($i *(360deg/$totalStops), 100%, 50%), comma);}.colors {    width: 200px;    height: 200px;    background: conic-gradient($colors);    border-radius: 50%;}

The result is as follows:

CodePen Demo -- conic-gradinet colors

 

Percent used

Of course, we can more specifically specify the ratio of each segment of the cone gradient, with the percentage, you can easily implement the pie chart.

Suppose we have the following CSS:

{    width: 200px;    height: 200px;    background: conic-gradient(deeppink 0, deeppink 30%, yellowgreen 30%, yellowgreen 70%, teal 70%, teal 100%);    border-radius: 50%;}

, We specify 0 ~ 30%, 30% ~ 70%, 70% ~ The color of the three intervals of 100% isDeeppink (dark red),Yellowgreen)AndTeal (green)To obtain the following pie chart:

Of course, the above is only the first method of percentage writing, and another method can also be implemented:

{    background: conic-gradient(deeppink 0 30%, yellowgreen 0 70%, teal 0 100%);}

Here:

In addition, the color defined first is stacked on the Color defined later.

CodePen Demo -- use proportion in conic-gradient

 

 

Cooperation background-sizeUse

Use percentage to control the interval.background-sizeYou can implement various textures.

First, we implement a base cone gradient image as follows:

{    width: 250px;    height: 250px;    margin: 50px auto;    background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0);}

:

In additionbackground-size: 50px 50px;, That is:

{    width: 250px;    height: 250px;    margin: 50px auto;    background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0);    background-size: 50px 50px;}

Get:

CodePen Demo -- conic-gradient wallpaper

 

 

Repeated cone gradient repaeting-conic-gradient

Like a linear or radial gradient, a cone gradient also has a repeating cone gradient.repaet-conic-gradient.

We assume that the part we want to repeat is 0 ~ A 30 ° clip. Its CSS code isconic-gradient(deeppink 0 15deg, yellowgreen 0 30deg).

Then,repaeting-conic-gradientThe entire area is automatically filled. The CSS code is as follows:

{    width: 200px;    height: 200px;    background: repeating-conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg);    border: 1px solid #000;}

CodePen Demo -- repeating-conic-gradient

 

 

Cone gradient Animation

After learning about the basic usage, let's see what the flowers can play with the cone gradient.

WithSCSSWe can make some very cool background display boards.

Using SCSS, we randomly generate a multi-color tapered gradient pattern:

Suppose our HTML structure is as follows:

<div></div>

The CSS/SCSS code is as follows:

@function randomNum($max, $min: 0, $u: 1) {@return ($min + random($max)) * $u;}@function randomConicGradient() {    $n: random(30) + 10;$list: ();    @for $i from 0 to $n {$list: $list, rgb(randomNum(255), randomNum(255), randomNum(255));}@return conic-gradient($list, nth($list, 1));}div {    width: 100vw;    height: 100vh;    background: randomConicGradient();}

Briefly explain the above SCSS code,

• randomNum()Used to generate random numbers,randomNum(255)Equivalent to generating 1 ~ A Random Number of 255;
• randomConicGradient()Used to generate the entireconic-gradient()Parameters, that is, the color of each interval;
• vwAndvhIs a relatively new CSS unit. For a page, its window height is Gbit/s, and its width is VW.

OK, refresh the page and get the following:

The slot is cool, and the bling is shining! It is a random color, so every Refresh has a new experience !!

Before you finish, add a rotation animation and a pedal to it. The rotation is probably like this:

Due to the limited size of the GIF image, you can't feel the sci-fi vertigo in full screen mode when you only watch the GIF image. We recommend that you stamp the wall split to see it:

CodePen Demo -- conic-gradient Animation

 

Brain hole time

I am not satisfied with this. Think of the previousmix-blend-modeAttribute.

Want to knowmix-blend-modeThis attribute can be stamped to see: Incredible mixed color mode mix-blend-mode

If multiple cone gradient layers are superimposed and usedmix-blend-modeWhat will happen? A terrible idea...

Finally, this very sci-fi effect was achieved:

Two semi-transparent taper gradient s are used for reverse rotation, and are used at the underlying layer.mix-blend-mode: overlayAdds a white-black radial gradient layer. Let's take a look at the code and effects:

CodePen Demo -- conic-gradient Animation

 

 

Use in projects conic-gradient

The above example is cool and cool, but it is not practical in the project. Can a tapered gradient be used in the business? The answer is yes.

Take a look at the figure below. The background color of sesame credit scores is gradient. JS is not used, and CSS is used only.conic-gradientHow to draw it out.

Assume that our structure is as follows:

<div class="bg">    <div class="point"></div></div>

CSS:

.bg {    position: relative;    margin: 50px auto;    width: 400px;    height: 400px;    border-radius: 50%;    background: conic-gradient(#f1462c 0%, #fc5d2c 12.4%, #fff 12.5%, #fff 12.5%, #fc5d2c 12.5%, #fba73e 24.9%, #fff 24.9%, #fff 25%, #fba73e 25%, #e0fa4e 37.4%, #fff 37.4%, #fff 37.5%, #e0fa4e 37.5%, #12dd7e 49.9%, #fff 49.9%, #fff 50%, #12dd7e 50%, #0a6e3f 62.4%, #fff 62.4%, #fff 62.5%);    transform: rotate(-112.5deg);    transform-origin: 50% 50%;}.bg::before {    content: "";    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    width: 370px;    height: 370px;    border-radius: 50%;    background: #fff;}.bg::after {    content: "";    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    width: 320px;    height: 320px;    border-radius: 50%;    background:         radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%),        conic-gradient(#f1462c 0 12.5%, #fba73e 0 25%, #e0fa4e 0 37.5%, #12dd7e 0 50%, #0a6e3f 0 62.5%, #fff 0 100%);        }.point {    position: absolute;    width: 30px;    height: 30px;    transform: translate(-50%, -50%);    left: 50%;    top: 50%;    background: radial-gradient(#467dc6 0%, #a4c6f3 100%);    border-radius: 50%;    z-index: 999;}.point::before {    content: "";    position: absolute;    width: 5px;    height: 350px;    left: 50%;    top: 50%;    transform: translate(-50%, -50%) rotate(0);    border-radius: 100% 100% 5% 5%;    background: linear-gradient(        180deg,        #9bc7f6 0,        #467dc6 50%,        transparent 50%,        transparent 100%    );    animation: rotate 3s cubic-bezier(.93, 1.32, .89, 1.15) infinite;}@keyframes rotate {50% {transform: translate(-50%, -50%) rotate(150deg);}100% {transform: translate(-50%, -50%) rotate(150deg);}}　

To highlightconic-gradientThe practicality of the two is simply combined into one and simulated. Let's take a look at the results.conic-gradientStill useful:

CodePen Demo -- use conic-gradient to implement dial credit scores

 

 

Cone gradient conic-gradientPolyfill gasket Library

The readers are eager to try this magical attribute.

However, by convention, such "high-tech" is usually not compatible.conic-gradientWhat about compatibility?

The official descriptions of CSS are as follows:

• Module in the correction phase)

The module in the correction phase is not stable in the Improvement phase. Their syntaxes usually need to be reviewed in detail, and there may be significant changes, and they are not guaranteed to be compatible with previous ones. The alternative syntax is usually tested and implemented.

Fortunately, I also mentioned at the beginning of this article. Thanks to LeaVerou, we can use this wonderful attribute in advance.

LeaVerou provides a gaskboard library. You can use it happily by adding this gaskboard library according to the above syntax.

You need to add the following JavaScript code. The shemap library will generate the corresponding taper gradient pattern according to the CSS syntax and convert it to BASE64 code:

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><script src="//leaverou.github.io/conic-gradient/conic-gradient.js"></script>

Because the role of the gasket library is to convert our CSS syntax into BASE64 code replacementbackground-image: url()So you do not need to add these two libraries after going online.

References

CSS conic-gradient () polyfill

Last

A series of CSS articles are summarized in my Github.

Now, this article is over. I hope it will help you :)

If you have any questions or suggestions, you can have a lot of discussions, original articles, and only a few articles. If there are any mistakes in this article, please let us know.