Shulou(Shulou.com)06/01 Report--

This article mainly explains "the method of automatic color matching of CSS foreground and background". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the method of automatic color matching of CSS foreground and background.

1. Preview of color matching effect

The following GIF indicates that when the background color of our button gradually fades, the text color changes from white to black, and the border is also displayed, in which the color conversion is realized by pure CSS.

Auto-color-button.gif

Automatic color matching button

By dragging the corresponding slider, you can see the button text color and border color, which automatically changes according to the background color. The specific manifestations are as follows:

On a dark background, the text is white and has no border.

On a light background, the text is black with a deepening frame to make it easy to distinguish it from its surroundings.

This intelligent matching is implemented in pure CSS, mainly using CSS3calc () calculations, as well as CSS3 native var variables.

Second, the display of color matching codes

The HTML code is simple, as follows:

I'm the button.

The key points and difficulties are in the part of CSS:

: root {

/ * define RGB variable * /

-- red:44

-- green:135

-- blue:255

/ * the critical value of text color discoloration. It is recommended that 0.5: 0.6 /

-- threshold:0.5

/ * the critical value of the dark border, with a range of 0: 1, with a recommended value of 0. 8 percent /

-- border-threshold:0.8

}

.btn {

/ * Button background color is the basic background color * /

Background:rgb (var (--red), var (--green), var (--blue))

/ * *

* use the sRGBLuma method to calculate grayscale (can be regarded as luminance)

* the algorithm is:

* lightness= (red*0.2126+green*0.7152+blue*0.0722) / 255

* /

-- r:calc (var (--red) * 0.2126)

-- g:calc (var (--green) * 0.7152)

-- b:calc (var (--blue) * 0.0722)

-sum:calc (var (--r) + var (--g) + var (--b))

-- lightness:calc (var (--sum) / 255)

/ * set color * /

Color:hsl ((var (--lightness)-var (--threshold)) *-999999%)

/ * determine the transparency of the border * /

-- border-alpha:calc ((var (--lightness)-var (--border-threshold)) * 100)

/ * set border related styles * /

Border:.2emsolid

Border-color:rgba (calc (var (--red)-50), calc (var (--green)-50), calc (var (--blue)-50), var (--border-alpha)

}

At first glance, it looks like a duck listening to thunder-I don't know what to say, but it's not complicated, and let me analyze the implementation principle.

Third, the principle of automatic color matching of foreground and background.

1.CSS attribute value range overflow boundary rendering property

An interesting feature of the CSS language is that when the value of the CSS attribute exceeds the normal range, it will render as long as the format is correct, and the rendered value is the legal boundary value.

Take two chestnuts:

The legal range of the opacity transparency attribute value is 0-1. However, if you set a negative number or a maximum value, the browser can also resolve it, but it is either 0 or 1, as follows:

.example {

Opacity:-2;/* resolves to 0, completely transparent * /

Opacity:-1;/* resolves to 0, completely transparent * /

Opacity:2;/* parses to 1, completely opaque * /

Opacity:100;/* parses to 1, completely opaque * /

}

The range of color values, such as HSL,S and L, is 0% Mur100%. However, if you set a negative number or a maximum value, the browser can also resolve it, but it is either 0% or 100%, as shown below:

.example {

Color:hsl (0penol 0% mai 100%); / * parsed to hsl (0penol 0% penny 0%), black * /

Color:hsl (0re0% penny 200%); / * parsed to hsl (0penny 0% par 100%), white * /

}

The color matching technology in this paper makes active use of this boundary rendering feature.

The 2.var variable is passed to calc for complex computation.

Let's analyze the CSS code one by one from top to bottom.

First, define several global CSS variables (semantically global) on the: root root selector:

: root {

-- red:44

-- green:135

-- blue:255

-- threshold:0.5

-- border-threshold:0.8

}

Where:

-threshold

This is the threshold for color discoloration and is used to compare the brightness of the current RGB color value.

-border-threshold

This is the threshold for the transparency of the border color, as well as the brightness contrast to the current RGB color value.

And then. CSS code inside btn {}:

Background:rgb (var (--red), var (--green), var (--blue))

This is easy to understand, that is, the basic RGB color value as the background color.

-- r:calc (var (--red) * 0.2126)

-- g:calc (var (--green) * 0.7152)

-- b:calc (var (--blue) * 0.0722)

-sum:calc (var (--r) + var (--g) + var (--b))

-- lightness:calc (var (--sum) / 255)

Here are five lines and five CSS variables, and what you need is the last one-- lightness, which is to calculate the brightness of the current background color. Using sRGBLuma grayscale algorithm ①, why do you need 5 lines? Because that's what the formula is:

Lightness= (red*0.2126+green*0.7152+blue*0.0722) / 255

Among them, the coefficient of the multiplication of the color value of R _ GMagne B is fixed, and the coefficients of different grayscale algorithms are different. -- lightness represents brightness, with a range of 0-1, which can be compared with the critical values of-- threshold and-- border-threshold to determine the text color of the button and the transparency of the border.

The grayscale here in ① can be regarded as luminance. In fact, the luminance calculation method of HSL should be 1/2 of the sum of the maximum and minimum color values in RMagneGPerry B.

Color:hsl ((var (--lightness)-var (--threshold)) *-999999%)

Sets the CSS code for the color.

Here the calc calculation is translated into Chinese: (luminance value-critical value) * scale factor.

Where the luminance value is between 0 and 1, and the critical value is fixed at 0.5, so:

If the luminance value is less than 0.5, the luminance value minus the critical value is negative, because our scale coefficient is very negative, negative and positive, so we will get a huge positive number. According to the principle of boundary rendering, it will be rendered according to 100%. So the color is white.

If the luminance value is greater than 0.5, the luminance value minus the critical value is positive, because our scale coefficient is very negative, so we will get a huge negative number, which will be rendered according to 0% according to the boundary rendering principle, so the color is black.

The above is the principle of the button text color changing black under the background and white under the dark background.

-- border-alpha:calc ((var (--lightness)-var (--border-threshold)) * 100)

Border transparency is a similar principle. Here the calc calculation is translated into Chinese: (luminance value-border critical value) * 100.

Where the luminance value is between 0 and 1, and the border critical value is fixed at 0.8, so:

If the luminance value is less than 0.8, the luminance value minus the border critical value is negative. In CSS, the negative transparency is rendered according to the boundary 0, and the border is completely transparent.

If the luminance value is greater than 0.8 and the luminance value minus the border critical value is positive, the calculated transparency value will wander between 0 and 20. Of course, the transparency value greater than 1 will be rendered according to 1. At this time, the frame is basically completely opaque, and the deepened frame appears.

Border:.2emsolid

Border-color:rgba (calc (var (--red)-50), calc (var (--green)-50), calc (var (--blue)-50), var (--border-alpha)

Set the border style, the border color is 50 units darker than the background color (a negative number is rendered as 0), and then the transparency is dynamically calculated based on brightness. Under the dark background, the transparency of the button frame is 0, which is not displayed; under the light background, the transparency is between 0x1 and appears, the lighter the color of Beijing is, the greater the transparency of the frame is, the darker the color of the frame is, which is in line with the expectation of color matching.

I believe that after the above analysis, we will understand the principle of its implementation.

Change the background color of the button

The CSS code under the .btn class name is fixed, so that when we need to change the color of the button, it is not. CSS under btn, but modify the values of the following three variables in root:

-- red:44

-- green:135

-- blue:255

CSS setting directly change the value, if it is JS setting, with the help of setProperty () method, if you do not understand, you can refer to this article: "how to set the CSS3var variable in the HTML tag and JS".

IV. Concluding remarks

Due to the compatibility limitations of var, this very interesting CSS technique is not suitable for large-scale external projects.

Mini Program can give it a try because the kernel environment is relatively fixed. Internal system, experimental projects can be played, it will be very interesting.

In fact, this color matching technique can be used not only on buttons, but also in some large area layouts, because the background color of these layouts may be dynamic, and the color matching of text colors can also be automated with the help of CSS.

In addition, the button text in this demo is black and white. In fact, if our multiplication coefficient is smaller, we can have more color values, and the color matching will be more refined.

At this point, I believe that everyone on the "CSS foreground background automatic color matching method" have a deeper understanding, might as well to practical operation it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.