This is the 20th day of my participation in the August Text Challenge.More challenges in August

preface

The new cSS3 attribute makes it easy to add interesting filters to images, and filter applies graphical effects such as blur or color offset to elements. Usually used to adjust images, backgrounds and borders for rendering.

Ten filter filter functions

Gaussian blur

Blur () : The default value is 0, larger values will produce more blur and 100 points will not be accepted.

<article>
    <h3>Gaussian blur</h3>
    <figure>
        <img style="filter:blur(0);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:blur(0)</figcaption>
    </figure>
    <figure>
        <img style="filter:blur(1px);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:blur(1px)</figcaption>
    </figure>
    <figure>
        <img style="filter:blur(2px);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:blur(2px)</figcaption>
    </figure>
    <figure>
        <img style="filter:blur(3px);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:blur(3px)</figcaption>
    </figure>
</article>
Copy the code

Brightness and dark adjustment

Brightness () makes it look more or less bright. Default is 1, equal to 100%, 0% is an all black image, bigger is brighter

<article>
    <h3>Light and shade adjustment: make it appear more or less bright</h3>
    <figure>
        <img style="filter:brightness(0%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:brightness(0%)</figcaption>
    </figure>
    <figure>
        <img style="filter:brightness(50%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:brightness(50%)</figcaption>
    </figure>
    <figure>
        <img style="filter:brightness(100%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:brightness(100%)</figcaption>
    </figure>
    <figure>
        <img style="filter:brightness(150%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:brightness(150%)</figcaption>
    </figure>
</article>
Copy the code

Contrast adjustment

Contrast () contrast adjustment, default value is 1, which is equal to 100%, 0% is all gray image, higher value means lower contrast

<article>
    <h3>Contrast adjustment</h3>
    <figure>
        <img style="filter:contrast(0%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:contrast(0%)</figcaption>
    </figure>
    <figure>
        <img style="filter:contrast(50%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:contrast(50%)</figcaption>
    </figure>
    <figure>
        <img style="filter:contrast(100%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:contrast(100%)</figcaption>
    </figure>
    <figure>
        <img style="filter:contrast(150%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:contrast(150%)</figcaption>
    </figure>
</article>
Copy the code

Drop-shadow Shadow effect

Drop-shadow () Specifies the shadow effect. It accepts


(required),

(optional), and
(optional) parameters

  • <offset-x>Set the horizontal distance
  • <offset-y>Set the vertical distance
  • <blur-radius>The larger the value, the more obscure it is. The default value is0
  • <color>Shadow color
<article>
    <h3>shadows</h3>
    <figure>
        <img style="filter:drop-shadow(0 0 0 black);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>blur-radius:0</figcaption>
    </figure>
    <figure>
        <img style="filter:drop-shadow(0 0 3px black);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>blur-radius:3px</figcaption>
    </figure>
    <figure>
        <img style="filter:drop-shadow(0 0 6px black);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>blur-radius:6px</figcaption>
    </figure>
    <figure>
        <img style="filter:drop-shadow(0 0 9px black);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>blur-radius:9px</figcaption>
    </figure>
</article>
Copy the code

Grayscale image grayscale

Grayscale () Image grayscale. Change the size of image gray scale by conversion ratio, default value is 0, 0% no change, 100% full gray scale image

<article>
    <h3>The image gray level</h3>
    <figure>
        <img style="filter:grayscale(0%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:grayscale(0%)</figcaption>
    </figure>
    <figure>
        <img style="filter:grayscale(50%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:grayscale(50%)</figcaption>
    </figure>
    <figure>
        <img style="filter:grayscale(100%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:grayscale(100%)</figcaption>
    </figure>
    <figure>
        <img style="filter:grayscale(0);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:grayscale(0)</figcaption>
    </figure>
</article>
Copy the code

Hue -rotate Indicates hue rotation

Hue -rotate() Specifies the hue rotation. By adjusting the Angle value of the color ring to change the hue, the default value is 0DEg, 0DEG does not change, 360deg is equivalent to a circle back to the starting point

<article>
    <h3>Hue rotation</h3>
    <figure>
        <img style="filter:hue-rotate(0deg);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:hue-rotate(0deg)</figcaption>
    </figure>
    <figure>
        <img style="filter:hue-rotate(90deg);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:hue-rotate(90deg)</figcaption>
    </figure>
    <figure>
        <img style="filter:hue-rotate(180deg);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:hue-rotate(180deg)</figcaption>
    </figure>
    <figure>
        <img style="filter:hue-rotate(270deg);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:hue-rotate(270deg)</figcaption>
    </figure>
    <figure>
        <img style="filter:hue-rotate(360deg);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:hue-rotate(360deg)</figcaption>
    </figure>
</article>
Copy the code

Invert inversion

Invert () inversion. The default value is 0, 0% unchanged and 100% completely reversed

<article>
    <h3>reverse</h3>
    <figure>
        <img style="filter:invert(0%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:invert(0%)</figcaption>
    </figure>
    <figure>
        <img style="filter:invert(25%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:invert(25%)</figcaption>
    </figure>
    <figure>
        <img style="filter:invert(50%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:invert(50%)</figcaption>
    </figure>
    <figure>
        <img style="filter:invert(75%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:invert(75%)</figcaption>
    </figure>
    <figure>
        <img style="filter:invert(100%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:invert(100%)</figcaption>
    </figure>
</article>
Copy the code

Opacity image

The opacity() function sets the opacity of the image. Change the conversion ratio by adjusting the percentage, 0% completely transparent and 100% unchanged

<article>
    <h3>The transparency of the image</h3>
    <figure>
        <img style="filter:opacity(0%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:opacity(0%)</figcaption>
    </figure>
    <figure>
        <img style="filter:opacity(25%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:opacity(25%)</figcaption>
    </figure>
    <figure>
        <img style="filter:opacity(50%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:opacity(50%)</figcaption>
    </figure>
    <figure>
        <img style="filter:opacity(75%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:opacity(75%)</figcaption>
    </figure>
    <figure>
        <img style="filter:opacity(100%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:opacity(100%)</figcaption>
    </figure>
</article>
Copy the code

Saturate image saturation

Saturate () image saturation. Change the conversion scale by adjusting the percentage. The default value is 1,0 % completely unsaturated and 100% unchanged

<article>
    <h3>Image saturation</h3>
    <figure>
        <img style="filter:saturate(0%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:saturate(0%)</figcaption>
    </figure>
    <figure>
        <img style="filter:saturate(25%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:saturate(25%)</figcaption>
    </figure>
    <figure>
        <img style="filter:saturate(50%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:saturate(50%)</figcaption>
    </figure>
    <figure>
        <img style="filter:saturate(75%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:saturate(75%)</figcaption>
    </figure>
    <figure>
        <img style="filter:saturate(100%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:saturate(100%)</figcaption>
    </figure>
</article>
Copy the code

Sepia converts the image to dark brown

Sepia () converts the image to dark brown. Change the scale of the conversion by adjusting the percentage. The default value is 0, 0% unchanged and 100% completely dark brown

<article>
    <h3>Convert the image to dark brown</h3>
    <figure>
        <img style="filter:sepia(0%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:sepia(0%)</figcaption>
    </figure>
    <figure>
        <img style="filter:sepia(25%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:sepia(25%)</figcaption>
    </figure>
    <figure>
        <img style="filter:sepia(50%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:sepia(50%)</figcaption>
    </figure>
    <figure>
        <img style="filter:sepia(75%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:sepia(75%)</figcaption>
    </figure>
    <figure>
        <img style="filter:sepia(100%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:sepia(100%)</figcaption>
    </figure>
</article>
Copy the code

Composite function

You can combine any number of functions to render various filters

<article>
    <h3>Composite function</h3>
    <figure>
        <img style="filter:contrast(175%) brightness(3%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:contrast(175%) brightness(3%)</figcaption>
    </figure>
    <figure>
        <img style="filter:contrast(75%) brightness(9%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:contrast(75%) brightness(9%)</figcaption>
    </figure>
    <figure>
        <img style="filter:contrast(100%) brightness(12%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:contrast(100%) brightness(12%)</figcaption>
    </figure>
</article>
Copy the code

Welcome to follow my official account: Class A Coder and get daily dry goods push. Thank you again for reading. I’m Han the Programming Monkey