Introduction to the use of CSS3 filter attribute

1. Introduction

When writing animation effects for front-end pages, the filter attribute will be used more or less. Since there are too many attribute values, this article is used to organize and record its related information.

II. Introduction

The filter attribute defines a visual effect on an element (usually ).

The property values are as follows:

Property Value	describe
none	Default value, no effect.
blur(px)	Set Gaussian blur to the image. The default value is 0.
brightness(%)	Applies a linear multiplication to the image, making it appear brighter or darker. The default value is 1.
contrast(%)	Adjust the contrast of the image. The default value is 1.
grayscale(%)	Convert the image to grayscale. The default value is 0.
hue-rotate(deg)	Applies hue rotation to the image. The default value is 0deg.
invert(%)	Invert the input image. The default value is 0.
opacity(%)	The transparency level of the converted image. The default value is 1.
Saturate(%)	Convert image saturation, the default value is 1.
sepia(%)	Convert the image to sepia. The default value is 0.

Note: Filters are usually expressed as percentages (such as 75%), but can also be expressed as decimals (such as 0.75).

3. Demonstration Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            margin: 4rem auto;
            width: 100%;
            height: auto;
            text-align: center;
        }

        .box {
            display: inline-block;
            margin: 1rem;
        }

        .box ul {
            margin: 0;
            padding: 0;
            list-style: none;
            text-align: left;
        }

        .box ul li {
            margin: .25rem 0;
            padding: .25rem;
            cursor: pointer;
        }

        .box ul li:hover {
            background-color: #eee;
        }

        ul li.active {
            background-color: #eee;
        }

       .box img {
            width: 260px;
            height: 260px;
        }

    </style>
</head>
<body>
    <div class="container">
        <h3>Click on the left side to display the properties</h3>
        <div class="box">
            <ul>
                <li data-p="blur(5px)">filter: blur(5px)</li>
                <li data-p="brightness(.5)">filter: brightness(.5)</li>
                <li data-p="contrast(.5)">filter: contrast(.5)</li>
                filter: grayscale(1)
                <li data-p="hue-rotate(90deg)">filter: hue-rotate(90deg)</li>
                <li data-p="invert(.4)">filter: invert(.4)</li>
                <li data-p="opacity(.4)">filter: opacity(.4)</li>
                filter: saturate(.5)
                <li data-p="sepia(.5)">filter: sepia(.5)</li>
            </ul>
        </div>
        <div class="box">
            <div class="origin">
                <img src="upload/2022/web/87c01ec7gy1frmmmwb3anj21hc0u0b2a.jpg" alt="">
            </div>
            <div>Original image</div>
        </div>
        <div class="box">
            <div id="filter">
                <img src="upload/2022/web/87c01ec7gy1frmmmwb3anj21hc0u0b2a.jpg" alt="">
            </div>
            <div id="info">Effect diagram</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script>
        $(function() {
                let $lis = $("li");
               $lis.on("click", function() {
                    $lis.removeClass("active");
                    let p = $(this).addClass("active").data("p");
                    $("#filter").css({"filter": p});
                    $("#info").text("filter: " + p);
               });
        });
    </script>
</body>
</html>

The above is the detailed introduction to the use of CSS3 filter attributes. For more information about CSS3 filter attributes, please pay attention to other related articles on 123WORDPRESS.COM!

<<: A brief discussion on the problem that the text in the button is not centered vertically in the browser's compatibility mode

>>: Pygame code to make a snake game

Experience of redesigning the homepage of TOM.COM

Introduction to the use of CSS3 filter attribute

1. Introduction

II. Introduction

3. Demonstration Code

Experience of redesigning the homepage of TOM.COM

ERROR 1862 (HY000): Your password has expired. To log in you must change it using a .....

Example of using Nginx to implement port forwarding TCP proxy

CSS to implement QQ browser functions

Summary of SQL deduplication methods

Detailed explanation of the use of Linux time command

Nginx configuration location matching rules example explanation

Summary of MySQL 8.0 memory-related parameters

Detailed explanation of the practical application of regular expressions in JavaScript

A brief analysis of the basic implementation of Vue detection data changes

Recommend

XHTML tags should be used properly

React+Typescript implements countdown hook method

Detailed analysis of replication in Mysql

A brief discussion on the datetime format when exporting table data from MySQL to Excel

Docker-compose one-click deployment of gitlab Chinese version method steps

Analysis of two usages of the a tag in HTML post request

Solution to the problem that crontab output redirection does not take effect in Linux

Docker Basics

Why Use DOCTYPE HTML

Web page HTML code explanation: ordered list and unordered list

Share a Markdown editor based on Ace

CSS makes the footer automatically stick to the bottom when the content height is not enough

Solution to forgetting the administrator password of mysql database

Example analysis of the page splitting principle of MySQL clustered index

Markup language - simplified tags