Actual combat | magical conic gradient

| Introduction CSS Future standard cone gradient , Introduce its various uses , Use it to complete incredible wonderful graphics .

thank LeaVerou A great god , Let's use this wonderful property ahead of time .

conic-gradient What is it ？ Speaking of conic-gradient , I have to mention its other two brothers ：

• linear-gradient : Linear gradient

• radial-gradient : Radial Gradient

It is said that these two should be understood and used by many people .CSS3 New linear gradients and radial gradients for CSS The world has changed a lot .

and conic-gradient , Represents a conical gradient , Another kind of gradient , to CSS The world brings more possibilities .

Enter the text below , All the examples in this article , Please download it in a later version Chrome Preview under the kernel .

API

Look at its simplest API：

And the similarities and differences between linear gradient and conical gradient

So what's the difference between it and the other two gradients ？

• linear-gradient The direction of a linear gradient is a straight line , It can be any angle
• radial-gradient Radial gradients spread out from the center of a circle in the shape of an ellipse

And in terms of direction , The direction of the taper is like this ：

Focus on ：

As you can see from the diagram , The direction and starting point of the taper . The starting point is the center of the graph , Then the gradient effect is achieved around the center in a clockwise direction .

Use conic-gradient Realize the color dial

I know from the above conic-gradient The simplest use , We use it to implement the simplest color dial .

conic-gradient It's not just a gradient from one color to another , Like the other two gradients , Can achieve multi-color transition gradient .

thus , Think of the rainbow , We can list them in turn Red orange yellow green blue violet Seven colors ：

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

It says , In the process of taper , Color from the first set red Start , Gradient to orange , Until then yellow , Until the last set purple . And every interval is equally divided .

Let's add border-radius: 50% , Suppose our CSS as follows :

Look at the effect ：

wow, It's got a preliminary shape . however , I always feel that there is no nature . All in all , I feel sick all over

Um. ？ What's the problem ？ First, the color is not rich enough, not bright enough , Second, the connection between the beginning and the end is not natural enough . Let me adjust it a little bit .

We know , The way to express color , except rgb() Beyond color representation , also hsl() notation .

hsl() It's defined as hue - saturation - Lightness （Hue-saturation-lightness）

• Hue （H） It's the basic property of color , It's the name of the color , Like red 、 Yellow, etc .
• saturation （S） It refers to the purity of color , The higher the color, the purer , If it's low, it's gray , take 0-100% The numerical .
• Lightness （V）, brightness （L）, take 0-100%.

here , We get a brighter and more complete color system by changing the hue .

That is to adopt such a transition hsl(0%, 100%, 50%) —> hsl(100%, 100%, 50%), Only the hue changes in the middle , Generate 20 It's a transitional state . With the help of SCSS ,CSS The grammar is as follows :

The result is as follows , This time it worked very well ：

CodePen Demo — conic-gradinet colors（https://codepen.io/Chokcoco/pen/LLLWEy）

Use with percentage

Of course , We can specify the scale of each segment of the cone gradient more specifically , Percent fit , It's easy to implement pie chart .

Suppose we have the following CSS：

Upper figure , We have designated 0~30%,30%~70%,70%~100% The colors of the three intervals are deeppink( Crimson ),yellowgreen( Yellow and green ) as well as teal( green ) , You can get the following pie chart ：

Of course , It's just the first way to write percentage , There is another way to write it ：

It means ：

1. 0-30% Use the interval of deeppink
2. 0-70% Use the interval of yellowgreen
3. 0-100% Use the interval of teal

and , The colors defined first are superimposed on the colors defined later .

CodePen Demo — use proportion in conic-gradient（

https://codepen.io/Chokcoco/pen/awwGQy）

coordination background-size Use

The percentage is used to control the interval , And then use it together background-size All kinds of mapping can be realized .

We first implement a basic conic gradient graph as follows ：

design sketch ：

Plus background-size: 50px 50px;, That is to say ：

obtain ：

CodePen Demo — conic-gradient wallpaper（https://codepen.io/Chokcoco/pen/dRRKqB）

Repeat the taper gradient repaeting-conic-gradient

Like linear and radial gradients , Conic gradients are also repeated conic gradients repaet-conic-gradient Of .

Let's assume that the fragment we want to repeat is 0~30° A segment of , its CSS The code is conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg) .

that , Used repaeting-conic-gradient after , Automatically fills the entire area ,CSS The code is as follows ：

CodePen Demo — repeating-conic-gradient(https://codepen.io/Chokcoco/pen/ZyyMBG)

Taper animation

I'm done with some basic usage , Let's see what kind of flowers you can play with with taper gradients .

With the help of SCSS A powerful , We can make some very cool background panels .

Use SCSS , We randomly generate a multi-color cone gradient pattern ：

Suppose our HTML The structure is as follows ：

CSS/SCSS The code is as follows ：

Explain briefly the above SCSS Code ,

• randomNum() Used to generate random numbers ,randomNum(255) It's equivalent to random generation 1~255 The random number ;
• randomConicGradient() Used to generate the entire conic-gradient() Parameters in , That's the color of each section ;
• vw and vh It's relatively new CSS Company , For a page , The height of its window is 100vh, The width is 100vw .

OK, Refresh the page , The result is as follows ：

Oh my god , It's cool ,bling bling The feeling of glittering ！ And it's randomly generated colors , So every time you refresh, you get a new experience ！！

It's not over yet. , Next, add the rotation animation to it , Push, push, push , It's going to spin like this ：

because GIF The limitation of graph size , Just look at GIF I can't feel the dizziness of science fiction in full screen , I suggest you poke in to have a look ：

CodePen Demo — conic-gradient Animation(https://codepen.io/Chokcoco/pen/GEvZra)

Brain hole time

I'm still not very satisfied here . Think of the previous mix-blend-mode attribute .

Want to know mix-blend-mode This attribute , You can poke me ： Incredible color mixing mode mix-blend-mode(http://www.cnblogs.com/coco1s/p/6829372.html)

If multiple taper gradients are superimposed , And in practice mix-blend-mode What's going to happen ？ What a terrible idea …

Finally, this is a very sci-fi effect ：

The image above uses 2 A translucent cone gradient , Rotate in opposite directions , And use it at the bottom mix-blend-mode: overlay Superimposed a white black radial gradient layer . You can see the code and the effect ：

CodePen Demo — conic-gradient Animation(https://codepen.io/Chokcoco/pen/gRRdQq)

Used in projects conic-gradient

The above example is cool to cool , But it is not practical in the project . So can cone gradients be used in business ？ The answer is yes .

Look at the picture below , Sesame credit sub background gradient color bar , Don't use JS, pure CSS With the help of conic-gradient How to draw .

Suppose our structure is as follows ：

To highlight conic-gradient The practicality of , Simply combine the two into one , I simulated . Look at the effect , Be accomplished , So conic-gradient There's still room for use ：

CodePen Demo — Use conic-gradient Realize the dial credit sub example (https://codepen.io/Chokcoco/pen/pwWNJJ)

Taper gradient conic-gradient polyfill Gasket Library

See here , Presumably readers are eager to try such a magical property .

however , By convention , such “ High-tech ” It's usually not very compatible .conic-gradient What about compatibility ？

Very tragic ,CSS The official description of it is ：

• Modules in the revision phase (Modules in the revising phase)

The module in the correction phase is not stable as the module in the improvement phase . Usually their syntax needs to be examined in detail , Maybe there will be a big change , And it's not guaranteed to be compatible with the previous . Alternative syntax is usually tested and implemented .

luckily , I also mentioned at the beginning of the article , thank LeaVerou A great god , Let's use this wonderful property ahead of time .

LeaVerou Provides a library of gaskets , According to the above grammar of this article , Add this gasket Library , You can use it happily .

You need to add the following JS , The gasket library will follow CSS grammar , Generate the corresponding taper gradient pattern , And into BASE64 Code ：

Because the function of the gasket library is to put our CSS Grammar is transformed into BASE64 Code replacement background-image: url() The content in , therefore , You don't need to add these two libraries after you go online .

Okay , This concludes the article , I hope it helps you :)

Any questions or Suggestions , Communicate more , Original article , Writing co., LTD. , Pretty good , If there is anything wrong with the text , All hope to inform .

Last , more CSS Related articles , Can be found in my blog and GITHUB See above ：

• Chokcoco —Blog;(http://www.cnblogs.com/coco1s/)
• Chokcoco — Github(https://github.com/chokcoco/iCSS)

reference

CSS conic-gradient() polyfill(http://leaverou.github.io/conic-gradient/)

Scan the QR code below the code ,

Follow more front-end dry goods articles at any time ！

▼

WeChat ：IMWebTech