Explore the practical value of CSS attribute * – gradient


Let’s start with an interesting attribute——conic-gradient

Conical gradient

I was interested in it because I found that it could be used to doPie chart
For example:


In this way:


The principle is also very simple: take the starting point as the center, and then turn clockwise around the center to achieve the gradient effect. It must receive multiple color value parameters. Each color value can be followed by two percentages, which are the starting point and ending point of the current color value (separated by a space):


background: conic-gradient(pink 0 30%, yellow 0 70%, lime 0 100%);

It can also be written separately:

background: conic-gradient(pink 0, pink 30%, yellow 30%, yellow 70%, lime 70%, lime 100%);

(the compatibility of the second method is better than the first one)

Wait! Isn’t the second picture above what we want?
According to the picture, we can easily find the following code:

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

But, it’s completely “static”.

Most of us have probably used ecarts to draw graphics: according to the data transmitted from the back end, we can render it to the specified parameters (array) of ecarts’s map object to get a pie chart with different colors that meet the requirements. How do you do this with CSS?

We certainly need the help of JS – because CSS3 is launchedCustom variable, it can combine CSS attributes with JavaScript variables:
After exploration,At present, a better practice should be to set the start and end positions of gradient color as user-defined variables, and then change the color distribution in the pie chart by changing its value after JavaScript gets the data!

Put a demo you have written before:

	width: 300px;
	height: 300px;
	border-radius: 50%;
	/* background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red); */
	background: conic-gradient(red var(--zero) var(--one),yellow var(--one) 100%);
<div class="circle"></div>
< button id = "but" > Click me to change the pie chart distribution < / button >
		document.documentElement.style.setProperty('--zero', '10%');
		document.documentElement.style.setProperty('--one', '70%');

If you want to dynamically increase the color value (such as adding a survey object), you can dynamically modify the properties in style:

xxx.style.xxx="xxx";   // change

It’s better than using“::after“Pseudo element” is much more convenient to implement!

Many people have also played the pseudo element method: use the rotate attribute of transform to rotate a content box and display parts to achieve the purpose.

There are still a lot of “Sao operations” that should be searched on the Internet, which will not be repeated here (: compared with the browser’s “indifference” to this attribute in the previous two years, the current partial support is also a great progress, let’s continue to look forward to it)


Apart from being used as the background of an element on some websites, this attribute does not seem to be worth paying attention to:
such asStripe background
“If multiple color codes have the same position, they will produce an infinitesimal transition region,
The start and end colors of the transition are the first and last specified values, respectively. From the effect, the color will be there
A sudden change of position, not a smooth gradient process. “
Because gradient is an image generated by code, we can treat it like any other background image, and we can adjust its size through background size; And because the background is repeatedly tiled by default, the whole container has actually been filled with horizontal stripes:

background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;


Vertical stripe
The code of vertical stripes is almost the same as that of horizontal stripes. The main difference is that we need to
Add an additional parameter at the beginning to specify the direction of the gradient. In the code of horizontal stripes, we
You can also add this parameter, but its default value to bottom is exactly what we want
The figure is consistent, so it is omitted. Finally, we need to reverse the value of background size

background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;

It should be noted that if the first parameter is added to linear gradient, its default direction will change to “bottom-up”. Therefore, the author also sent an email to the rookie tutorial, suggesting that they modify the wording in the document.


Oblique stripe
The “traditional” way of only changing the first parameter of linear gradient – angle value or increasing “accuracy” through background size can not effectively achieve a truly perfect inclined background: they will always confuse the whole pattern when the size changes or change an inclination!
Fortunately, we have a better way to create oblique stripes: a little-known truth is that linear gradient () and radial gradient () also have a cyclic enhanced version: repeating linear gradient () and repeating radial gradient ().
They work in a similar way to the first two, with one difference: the color code is repeated in an infinite cycle, straight
To fill the whole background!

background: repeating-linear-gradient(45deg, #fb3, #58a 30px);


Oh, by the way, as above, all “- gradient” attributes will have “gradient halo” when there is no limit on the start position and end position. If we change it to the following:

background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);


See this picture, do you think of a famous case – triangle?

background: #eee;
background-image: linear-gradient(45deg, transparent 75%, #bbb 0);

We used to write CSS like this:

width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: black ;

In fact, the use of linear gradient is far more than that

Updated on October 17, 2020

Radial gradient and its overall application

As we all know, scroll bar is a common interface control, which is used to prompt that an element contains more content than can be seen. However, it is often too bulky and visually dominant, so modern operating systems have begun to simplify its appearance. When users do not interact with scrollable elements, the scroll bar will be completely hidden.
Among the known methods of “removing scroll bars”, the most commonly used are:::-webkit-scrollbar{display:none;}But obviously, it can’t be used on IE – it only allows you to change the color of the scroll block.

In the era of CSS3, we can wrap a layer of div outside the place where we want to add a scroll bar and set itoverflow:hidden, for internal usecalc()Function dynamically calculates width to overflow! This can effectively solve the compatibility problem under ie.

Now we rarely scroll the page through the scroll bar (more use touch gestures), but the scroll bar is still very useful for the scrollable prompt of element content, even for those elements that do not interact; And this prompt is very clever.
It is said that Google once launched an RSS reader (it’s gone). Its user experience designer found a very elegant way to make a similar prompt: when the container in the sidebar has more content, a light shadow will appear on the top and bottom of the container. Like this:


Let’s start with a simple structure code, an ordinary unordered list with schematic content:

	<li>Ada Catlace</li>
	<li>Alan Purring</li>
	<li>Tim Purrners-Lee</li>
	<li>Ada Catlace</li>
	<li>Alan Purring</li>
	<li>Tim Purrners-Lee</li>
	<li>Ada Catlace</li>
	<li>Alan Purring</li>
	<li>Tim Purrners-Lee</li>
	<li>Ada Catlace</li>
	<li>Alan Purring</li>
	<li>Tim Purrners-Lee</li>

We can give<ul>Element sets some basic styles so that its height is slightly shorter than its content, so that its content can be scrolled:

overflow: auto;
width: 10em;
height: 8em;
padding: .3em .5em;
border: 1px solid silver;

Next, something interesting is about to happen. We use a radial gradient to add a shadow at the top:

background: radial-gradient(at top, rgba(0,0,0,.2),transparent 70%) no-repeat;
background-size: 100% 15px;

Now, when we scroll through the list, the shadow stays in the same position all the time. This is the default behavior of the background image: its position is fixed relative to the element! Whether the contents of the element are scrolled or not. This also applies tobackground-attachment: fixedBackground image. The only difference between them is that when the page scrolls, the latter is fixed relative to the viewport. Is there any way to make the background image scroll with the content of the element?

Now common values areinheritscrollfixed, but as you can see from the W3C documentation: laterbackground-attachmentProperty adds a new keyword calledlocal
If this attribute is applied to this shadow, it will bring us the opposite effect: when we scroll to the top, we can see a shadow; But when we scroll down, the shadow disappears.

But it doesn’t matter. We’re right!

I think of a very common hack: we need two layers of background: one layer is used to generate the shadow, and the other layer is basically a white rectangle used to block the shadow, which is similar to the mask layer. The layer of background that generates the shadow will have the defaultbackground-attachmentValue (scroll) because we want it to always stay in place. We put the mask on the backgroundbackground-attachmentProperty is set to local, so that it will cover the shadow when we scroll to the top and roll down to expose the shadow.

background: linear-gradient(white 30%, transparent),
 			radial-gradient(at 50% 0, rgba(0,0,0,.2),transparent 70%);
background-repeat: no-repeat;
background-size: 100% 50px, 100% 15px;
background-attachment: local, scroll;

Yes, this is another application of linear gradient – gradient mask layer!

But now we will find: now there is only one at the top, what’s the matter at the bottom?
This requires the “abbreviation” in CSS and the*-gradientIf the first parameter is not added (the direction is not specified), the gradient will be from top to bottom by default, but if the first parameter is added but not specifiedto bottomor100%, then it is gradient from bottom to top by default!

background: linear-gradient(white 30%, transparent) top / 100% 50px,
	radial-gradient(at 50% 0, rgba(0,0,0,.2),transparent 72%) top / 100% 15px,
	linear-gradient(to top, white 15px, hsla(0,0%,100%,0)) bottom / 100% 50px,
 	radial-gradient(at bottom, rgba(0,0,0,.2), transparent 72%) bottom / 100% 15px;
background-repeat: no-repeat;
background-attachment: local, scroll,local, scroll;

This is the end of this article about exploring the practical value of CSS attribute * – gradient. For more information about CSS attribute gradient, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!