Record a few useful css functions
1. Filtering function
The filter function in CSS is used to apply graphic effects to elements. You can achieve a lot of effects because the filter function has many other functions.
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Note: If you need to use multiple filters, please separate each filter with a space.
Let’s take a look at their effects through examples.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.cat1 {
filter: none;
}
.cat2 {
filter: blur(5px);
}
.cat3 {
filter: brightness(50%);
}
.cat4 {
filter: brightness(150%);
}
.cat5 {
filter: contrast(50%);
}
.cat6 {
filter: contrast(150%);
}
.cat7 {
filter: drop-shadow(0px 8px 5px red);
}
.cat8 {
filter: grayscale(50%);
}
.cat9 {
filter: grayscale(100%);
}
.cat10 {
filter: hue-rotate(60deg);
}
.cat11 {
filter: hue-rotate(260deg);
}
.cat12 {
filter: invert(80%);
}
.cat13 {
filter: invert(100%);
}
.cat14 {
filter: opacity(50%);
}
.cat15 {
filter: saturate(50%);
}
.cat16 {
filter: sepia(100%);
}
</style>
</head>
<body>
<div class="filter">
<img src="images/cat.jpg" class="cat1">
<img src="images/cat.jpg" class="cat2">
<img src="images/cat.jpg" class="cat3">
<img src="images/cat.jpg" class="cat4">
<img src="images/cat.jpg" class="cat5">
<img src="images/cat.jpg" class="cat6">
<img src="images/cat.jpg" class="cat7">
<img src="images/cat.jpg" class="cat8">
<img src="images/cat.jpg" class="cat9">
<img src="images/cat.jpg" class="cat10">
<img src="images/cat.jpg" class="cat11">
<img src="images/cat.jpg" class="cat12">
<img src="images/cat.jpg" class="cat13">
<img src="images/cat.jpg" class="cat14">
<img src="images/cat.jpg" class="cat15">
<img src="images/cat.jpg" class="cat16">
</div>
</body>
</html>
Two, writing mode
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
writing-mode: vertical-lr;
}
h2{
writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<h1>哈哈哈</h1>
<h2>哈哈哈</h2>
</body>
</html>
Three, cone gradient function
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border-radius: 50%;
background: conic-gradient(red 0% 20%, green 20% 60%, blue 60% 100%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Four, CSS calc () function
div {
width：calc（100％-300px）;
}
Five, mixed mode
Blending mode is an amazing feature that has been added to CSS. There are two mixed mode properties in CSS:
mix-blend-mode: Defines the mix between elements and elements.
background-blend-mode: Defines the blend between the background color of the element and the background image.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.blend {
display: flex;
align-items: center;
justify-content: center;
}
.blend img {
position: absolute;
}
.blend h1 {
font-size: 150px;
mix-blend-mode: overlay;
}
</style>
</head>
<body>
<div class="blend">
<img src="images/screen2.jpg" >
<h1>hello</h1>
</div>
</body>
</html>
The content of this article is borrowed from the following link
https://mp.weixin.qq.com/s/-KJ1dNti77DtVvCCgKOfIQ