CSS Lastnost: filter

Lastnost filter definira vizualne učinke, kot so zamegljenost, senco in nasičenost za element.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>filter: drop-shadow</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        img {
            filter: drop-shadow(-6px -3px 0.75em purple);
            padding: 20px
        }
    </style>
</head>
<body>
<img src="/demo/smiley.png" width="403" height="336" alt="Smeško">
</body>
</html>

REZULTAT

filter: blur()	Sliki doda učinek zameglitve.	Glej primer
filter: brightness()	Prilagodi svetlost slike.	Glej primer
filter: contrast()	Prilagodi kontrast slike.	Glej primer
filter: drop-shadow()	Elementu doda učinek sence.	Glej primer
filter: grayscale()	Sliko pretvori v sivino.	Glej primer
filter: hue-rotate()	Uporabi rotacijo odtenka na sliki.	Glej primer
filter: inherit	Podeduje lastnost od nadrejenega elementa.	Glej primer
filter: initial	Nastavi na privzeto vrednost.	Glej primer
filter: invert()	Obrne vzorce na sliki.	Glej primer
filter: none	Privzeta vrednost, ki ne določa učinkov.	Glej primer
filter: opacity()	Nastavi stopnjo motnosti slike.	Glej primer
filter: saturate()	Nasičena slika.	Glej primer
filter: sepia()	Sliko pretvori v sepijo, kar ji daje toplejši in bolj rumen/rjav videz.	Glej primer