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

Centos7 installation of FFmpeg audio/video tool simple document

Introduction to the use of CSS3 filter attribute

1. Introduction

II. Introduction

3. Demonstration Code

Centos7 installation of FFmpeg audio/video tool simple document

JavaScript canvas realizes colorful sun halo effect

JavaScript anti-shake case study

HTML hyperlink a tag_Powernode Java Academy

Example of how to configure nginx in centos server

MySQL 8.0.13 installation and configuration method graphic tutorial under Windows 64 bit

HTML table border control implementation code

VUE implements bottom suction button

Ubuntu 19.04 installation tutorial (picture and text steps)

js realizes two-way data binding (accessor monitoring)

Recommend

Website performance: Image and Cookie optimization and mobile application optimization

Implementation of Docker deployment of MySQL cluster

Detailed explanation of MySQL data rows and row overflow mechanism

XHTML three document type declarations

MySQL database architecture details

Essential for front-end development: 12 browser compatibility testing tools recommended

JavaScript to achieve elastic navigation effect

isPrototypeOf Function in JavaScript

Docker network principles and detailed analysis of custom networks

How to implement distributed transactions in MySQL XA

In-depth explanation of iterators in ECMAScript

Solution to the problem of data loss when using Replace operation in MySQL

Navicat for MySql Visual Import CSV File

How to create a web wireframe using Photoshop

The problem of Vue+tsx using slot is not replaced