Applicare filtri alle immagini con i CSS

Mattepuffo's logo
Applicare filtri alle immagini con i CSS

Applicare filtri alle immagini con i CSS

Programmazione, HTML - CSS

Ho scoperto che con i CSS è possibile applicare filtri alle immagini in maniera molto semplice.

Questi sono i filtri disponibili:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

A parte il filtro url() gli altri hanno una sintassi molto semplice, e sono tutti filtri "pre-impostati".

Questi degli esempi:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Filters</title>
        <style>
            #brightness { filter: brightness(300%); }
            #contrast { filter: contrast(10%); }
            #grayscale { filter: grayscale(90%); }
            #invert { filter: invert(100%); }
        </style>
    </head>
    <body>
        <img src="immagine.jpg">
        <br>
        <img id="brightness" src="immagine.jpg">
        <br>
        <img id="contrast" src="immagine.jpg">
        <br>
        <img id="grayscale" src="immagine.jpg">
        <br>
        <img id="invert" src="immagine.jpg">
    </body>
</html>

Se invece vogliamo creare dei filtri personalizzati, possiamo usare appunto url() e un pò di SVG:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Filters</title>
    <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
    <filter id="test_svg">
        <feComponentTransfer>
            <feFuncR type="linear" slope="2" intercept="-1.5"/>
            <feFuncG type="linear" slope="2" intercept="-0."/>
            <feFuncB type="linear" slope="2" intercept="-0.25"/>
        </feComponentTransfer>
    </filter>
    </svg>
    <style>
        img {
            filter: url('#test_svg');
        }
    </style>
</head>
<body>
    <img src="immagine.jpg">
</body>
</html>

Ovviamente, bisogna conoscere meglio come funzionano i canali RGB per impostare il filtro desiderato.

Infine, possiamo combinare i flitri con le animazioni:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Filters</title>
        <style>
            img {
                animation: haunted 3s infinite;
            }
 
            @keyframes haunted {
                0% {
                    filter: brightness(20%);
                }
                50% {
                    filter: sepia(1) contrast(2);
                }
                100% {
                    filter: brightness(200%);
                }
            }
        </style>
    </head>
    <body>
        <img src="immagine.jpg">
    </body>
</html>

Come vedete usiamo la prorpietà animation, specificando la sequenza dei frames, la durata di ogni frame e per quante volte deve ripartire l'animazione.

Abbiamo fatto tutto ciò senza scrivere una linea di Javascript!

Enjoy!

Condividi

Commentami!