This is an introduction to CSS functions (1)

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

You must be familiar with CSS functions, such as CLAC, RGBA and other CSS functions in the usual use frequency is still very high. Today we are going to take a look at the properties of CSS.

There are 86 CSS functions! CSS functions

Attribute function

attr()

Attr is used to get the attribute value of the selected element and is used in the style file. It can also be used in pseudo-class elements, in pseudo-class elements, and it gets the value of the original element of the pseudo-element.

The function of this attribute is quite understandable, but it is not very good to get where can be used, feel a little chicken ribs. But that’s not the case. Here’s an example: add a hover prompt to buttons. You can go to Baidu for more usage.

<div class="wrap">
		<button data-tip="Click on my submit">I'm a button</button>
</div>
Copy the code

button:hover::after {
		position: absolute;
		margin-left: 20px;
		content: attr(data-tip);
		background-color: yellow;
}
Copy the code

Background image function

url()

We must be familiar with the permeable, but here is also more description, directly skip.

image-set()

According to the device pixel ratio to set the picture, using zhang Xinxu’s big example is very easy to understand.

background-image: image-set(url(zxx.png) 1x, url(zxx-2x.png) 2x, url(zxx-print.png) 600dpi);

/* If the screen is 1x, i.e. the device pixel ratio is 1, use zxx.png as the background image; If the screen is 2x or larger, use the zXX-2x.png image as the background image. If the device resolution is greater than 600dpi, use zxx-print.png as the background image. * /
Copy the code

CSS image-set()

element()

This function is really amazing, I was shocked to find the use of this function. Render a part of the site as an image. What does that mean? You can use some of the DOM elements as images. It can even serve as a background image for another DOM element.

To get a feel for it:

<body>
    <div id="css-source">
		<p>luo yan</p>
	</div> 
	<div id="css-result">
		<p>111111111111111111111</p>
	</div>
</body>
Copy the code

#css-result { 
	background: -moz-element(#css-source);  /* Use firefox to view the effect */
	/* background-size: 50% 50%; * /
}
#css-source {
	width: 100px;
	height: 100px;
	margin-right: 30px;
	color: red;
	background-color: yellow;
}
Copy the code

The color function

Pure color

The function name	meaning
rgb	Red, green and blue
rgba	Red – green – blue – transparency
hsl	Hue – Saturation – Brightness
hsla	Hue – Saturation – Brightness – transparency
hwb	Tone – White concentration – Black concentration
lch	Luminance – Chroma – Tone
device-cmyk	Printing four color separation mode: magenta, yellow, blue, black

The first two should be familiar to you, the others even if you haven’t. You should be able to get it quickly by looking at the chart.

For more details, see this article: CSS functions (six) colorful color functions

The gradient

The function name	meaning
linear-gradient	Line to the gradient
radial-gradient	Radial gradient
conic-gradient	Conical gradient
repeating-linear-gradient	Repeat line gradient
repeating-radial-gradient	Repeated radial gradient
repeating-conic-gradient	Repeated taper gradient

div {
	width: 100px;
	height:100px;
	margin-right: 50px;
}
.one {
	background: linear-gradient(yellow, red);
}
.two {
	background: radial-gradient(yellow, red);
}
.three {
	background: conic-gradient(yellow, red);
}
Copy the code

The last three can be seen as corresponding to the first three, these functions can also specify parameters such as Angle, you can understand, I will not repeat here.

color-mod()

This function means to take the existing color and apply zero or more color modifiers, which will specify how to process the end result, which sounds great. Can be adjusted through a variety of the most close to our mind’s color. Unfortunately, this function is still in draft mode.

For more details, see: Six new features of native CSS that are not to be sniffed at

Originally wanted to complete an article to introduce CSS functions, really too much, planned to be divided into 2 or 3 issues. And did not speak of very fine, just give you a general overview. Note also that this is not necessarily all CSS functions, as there are a lot of information on them that I might have missed.