Exploring the practical value of the CSS property *-gradient

Let me first introduce an interesting property - conic-gradient

Conical gradient !

I became interested in it because I discovered that it can be used to make pie charts !
For example:

Like this:

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

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

You can also write it separately:

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

(The second method has better compatibility than the first one)

Wait! Isn’t the second picture above what we want?
According to the picture, it is not difficult to derive 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 is completely "static" here.

Most of us probably have used echarts to draw graphics: by rendering the data from the backend into the specified parameters (array) of the echarts Map object, we can get a pie chart with different colors that meets the requirements. How do you do this with CSS?

Of course, we need the help of JS - because CSS3 introduces custom variables , which can well combine CSS properties with JavaScript variables:
After exploration, the current better practice should be to set the start and end positions of the gradient color as custom variables, and then when JavaScript gets the data, it can change its value to change the color distribution in the pie chart!

Here is a demo I wrote before:

:root{
	--zero:0;
	--one:50%;
}
.circle{
	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>
<script>
	but.onclick=function(){
		document.documentElement.style.setProperty('--zero', '10%');
		document.documentElement.style.setProperty('--one', '70%');
	}
</script>

If you want to dynamically add color values ​​(for example, add new survey subjects), you can dynamically modify the attributes in style:

xxx.style.xxx="xxx"; //Change

This is much easier to implement than using the " ::after pseudo-element"!

Many people may have used the pseudo-element method: using the rotate property of transform to rotate a content box and display part of it to achieve the purpose.

There are many other "sexy operations" that can be found by searching on the Internet, so I will not go into details here (compared to the browser's "indifference" to this attribute in the past two years to the current partial support, it is also a great progress, let us continue to look forward to it)

About linear-gradient

This attribute doesn't seem to have much to offer except for being used as a background for an element on some websites:
Such as striped background
"If multiple color stops have the same position, they create an infinitesimally small transition area.
The transition starts and ends at the first and last specified values ​​respectively. Effectively, the color changes abruptly at that location, rather than as a smooth gradient. ”
Because a gradient is a code-generated image, we can treat it like any other background image and adjust its size with background-size; and because backgrounds are tiled by default, the entire container is actually filled with horizontal stripes:

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

Vertical stripes <br /> The code for vertical stripes is almost the same as horizontal stripes, the main difference is that we need to add an extra parameter at the beginning to specify the direction of the gradient. In the code for horizontal stripes, we can actually add this parameter, but its default value to bottom is consistent with our intention, so it is omitted. Finally, we also need to invert the background-size value:

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 become "from bottom to top". For this reason, the author also sent an email to Novice Tutorial to suggest that they modify the wording in the document.

Slanted Stripes
The "traditional" way of just changing the first parameter of linear-gradient - the angle value, or increasing the "precision" through background-size cannot effectively achieve a truly perfect tilted background: they will always mess up the entire pattern when the size changes or the tilt changes!
Fortunately, there are better ways to create diagonal stripes: a little-known fact is that linear-gradient() and radial-gradient() each have a looping version: repeating-linear-gradient() and repeating-radial-gradient().
They work similarly to the previous two, with one difference: the color scale is repeated in an infinite loop until the entire background is filled!

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

Oh, by the way, just like above, all "-gradient" properties will have a "gradient halo" when there are no restrictions on the starting and ending positions. If we change it to the following:

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

When you see this picture, do you think of a famous case - the 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, linear-gradient is much more useful than this...

Updated on 2020-10-17

Radial-gradient and overall application

We all probably know that a scroll bar is a common interface control used to indicate that an element contains more content besides the visible content. However, it was often too cumbersome and visually distracting, so modern operating systems have begun to simplify its appearance, hiding the scrollbar completely when the user is not interacting with the scrollable element.
Among the currently known methods of "removing the scroll bar", the most commonly used one is: ::-webkit-scrollbar{display:none;} , but obviously, it cannot be used on IE - it only allows changing the color of the scroll bar.

In the era of CSS3, we can wrap a layer of div around the place where we want to add a scroll bar, set overflow:hidden for it, and use calc() function to dynamically calculate the width to make it overflow! This can effectively solve compatibility issues under IE.

We rarely use scroll bars to scroll pages now (more often using touch gestures), but scroll bars are still very useful for indicating that element content is scrollable, even for elements that are not interactive; and this prompt method is very clever.
It is said that Google once launched an RSS reader (now gone), and its user experience designers found a very elegant way to make similar prompts: when there is more content in the sidebar container, a light shadow will appear at the top and bottom of the container. Like this:

Let's start with a simple structure, a plain unordered list with some sample content:

<ul>
	<li>Ada Catlace</li>
	<li>Alan Purring</li>
	<li>Schrödingcat</li>
	<li>Tim Purrners-Lee</li>
	<li>WebKitty</li>
	<li>Json</li>
	<li>Void</li>
	<li>Neko</li>
	<li>NaN</li>
	<li>Cat5</li>
	<li>Vector</li>
	<li>Ada Catlace</li>
	<li>Alan Purring</li>
	<li>Schrödingcat</li>
	<li>Tim Purrners-Lee</li>
	<li>WebKitty</li>
	<li>Json</li>
	<li>Void</li>
	<li>Neko</li>
	<li>NaN</li>
	<li>Cat5</li>
	<li>Vector</li>
	<li>Ada Catlace</li>
	<li>Alan Purring</li>
	<li>Schrödingcat</li>
	<li>Tim Purrners-Lee</li>
	<li>WebKitty</li>
	<li>Json</li>
	<li>Void</li>
	<li>Neko</li>
	<li>NaN</li>
	<li>Cat5</li>
	<li>Vector</li>
	<li>Ada Catlace</li>
	<li>Alan Purring</li>
	<li>Schrödingcat</li>
	<li>Tim Purrners-Lee</li>
	<li>WebKitty</li>
	<li>Json</li>
	<li>Void</li>
	<li>Neko</li>
	<li>NaN</li>
	<li>Cat5</li>
	<li>Vector</li>
</ul>

We can set some basic styles for the <ul> element to make its height slightly shorter than its content, thus allowing its content to scroll:

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

Next, something interesting is about to happen. We add a shadow on top using a radial gradient:

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

Now, when we scroll the list, this shadow will stay in the same position. This is exactly the default behavior of a background image: its position is fixed relative to the element! Whether or not the element's content has scrolled. This also applies to background images with background-attachment: fixed . The only difference between them is that the latter is fixed relative to the viewport when the page is scrolled. Is there a way to make the background image scroll along with the content of the element?

Now the common values ​​are only inherit , scroll , and fixed , but from the W3C document we can see that a new keyword called local was added to background-attachment property!
If we apply this property to the shadow, it will give us the exact opposite effect: when we scroll to the very top, we can see a shadow; but when we scroll down, the shadow disappears.

But it doesn’t matter, we have the right idea!

I thought of a very common hack: we need two background layers: one is used to generate the shadow, and the other is basically a white rectangle used to cover the shadow, which acts like a mask layer. The background layer that generates the shadow will have the default background-attachment value (scroll) because we want it to always stay in place. We set the background-attachment property of the mask background to local so that it covers the shadow when we scroll to the top and scrolls with it when we scroll down, revealing 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;

That’s right, this is another application of linear-gradient – ​​gradient mask layer!

But now we will find: now there is only the upper part, what should we do with the lower part?
This requires the use of "abbreviations" in CSS and an understanding of *-gradient : if the first parameter is not added (no direction is specified), the default is to gradient from top to bottom, but if the first parameter is added but to bottom or 100% is not specified, then it defaults to gradient from bottom to top!

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 concludes this article on exploring the practical value of the CSS attribute *-gradient. For more information about the CSS attribute gradient, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!