CSS3 - Filteri (Filters)


Razumijevanje CSS3 funkcija filtra

U ovoj ćemo lekciji razgovarati o efektima filtera uvedenim u CSS3 koje možete koristiti za izvođenje operacija vizuelnih efekata poput zamućenja, uravnoteženja kontrasta ili svjetline, zasićenosti boja itd. na grafičkim elementima poput slike, prije nego što se prikaže na web stranicu. Efekti filtra mogu se primijeniti na element pomoću svojstva filtra CSS3, koje prihvataju jednu ili više funkcija filtra prema navedenom redosljedu.

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


Efekat zamućenja (The Blur Effect)

Efekta zamućenja može se primijeniti na element pomoću funkcije blur(). Ova funkcija prihvata CSS vrijednost dužine kao parametar koji definiše radijus zamućenja. Veća vrijednost stvorit će više zamućenja. Ako nije naveden parametar, tada se koristi vrijednost 0.

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 efekat zamućenja</title>
<style>
img.blur {
    -webkit-filter: blur(2px); /* Chrome, Safari, Opera */
    filter: blur(2px);
}
img.extra-blur {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
/* Neki CSS za uljepšavanje ovog primjera */
table td{
    padding: 10px;
    text-align: center;
}
</style>
</head>
<body>
    <table>
        <tr>
            <td>
                <img src="/examples/images/parrot.png" alt="Papiga">
            </td>
            <td>
                <img class="blur" src="/examples/images/parrot.png" alt="Papiga">
            </td>
            <td>
                <img class="extra-blur" src="/examples/images/parrot.png" alt="Papiga">
            </td>
        </tr>
        <tr>
            <td>Orginalna slika</td>
            <td>blur(2px)</td>
            <td>blur(5px)</td>
        </tr>
    </table>
</body>
</html>

Izlaz iz primjera izgledaće otprilike ovako:



Podešavanje osvjetljenja slike

Funkcija brightness() može se koristiti za podešavanje svjetline slike. Vrijednost od 0% stvoriće sliku koja je potpuno crna. Dok vrijednost od 100% ili 1 ostavlja slike nepromijenjenima. Ostale vrijednosti su linearni multiplikatori na efektu. Svjetlinu možete postaviti i veću od 100%, što rezultuje svjetlijom slikom. Ako parametar količina nedostaje, koristi se vrijednost 1. Negativne vrijednosti nisu dozvoljene.

img.bright {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}
img.dark {
    -webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
    filter: brightness(50%);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 efekta osvjetljenja</title>
<style>
img.bright {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}
img.dark {
    -webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
    filter: brightness(50%);
}
/* Neki CSS za uljepšavanje ovog primjera */
table td{
    padding: 10px;
    text-align: center;
}
</style>
</head>
<body>
    <table>
        <tr>
            <td>
                <img src="/examples/images/parrot.png" alt="Papiga">
            </td>
             <td>
                <img class="dark" src="/examples/images/parrot.png" alt="Papiga">
            </td>
            <td>
                <img class="bright" src="/examples/images/parrot.png" alt="Papiga">
            </td>
        </tr>
        <tr>
            <td>Orginalna slika</td>
            <td>brightness(50%)</td> 
            <td>brightness(200%)</td>                       
        </tr>
    </table>
</body>
</html>

Izlaz iz primjera izgledaće otprilike ovako:





Podešavanje kontrasta slike

Funkcija contrast() koristi se za podešavanje kontrasta na slici. Vrijednost od 0% stvoriće sliku koja je potpuno crna. Dok vrijednost od 100% ili 1 ostavlja sliku nepromijenjenom. Dopuštene su i vrijednosti preko 100% koje daju rezultate s manje kontrasta. Ako parametar količina nedostaje ili je izostavljen, koristi se vrijednost 1.

img.bright {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}
img.dim {
    -webkit-filter: contrast(50%); /* Chrome, Safari, Opera */
    filter: contrast(50%);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 kontrast filtera</title>
<style>
img.bright {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}
img.dim {
    -webkit-filter: contrast(50%); /* Chrome, Safari, Opera */
    filter: contrast(50%);
}
/* Neki CSS za uljepšavanje ovog primjera */
table td{
    padding: 10px;
    text-align: center;
}
</style>
</head>
<body>
    <table>
        <tr>
            <td>
                <img src="/examples/images/parrot.png" alt="Papiga">
            </td>
             <td>
                <img class="dim" src="/examples/images/parrot.png" alt="Papiga">
            </td>
            <td>
                <img class="bright" src="/examples/images/parrot.png" alt="Papiga">
            </td>
        </tr>
        <tr>
            <td>Orginalna slika</td>
            <td>contrast(50%)</td> 
            <td>contrast(200%)</td>
        </tr>
    </table>
</body>
</html>

Izlaz iz primjera izgledaće otprilike ovako:




Dodavanje kapljice sjene slikama (Drop Shadow)

Možete koristiti funkciju drop-shadow() da primijenite efekt kapljice sjene na slike poput Photoshopa. Ova je funkcija slična svojstvu box-shadow.

img {
    -webkit-filter: drop-shadow(4px 4px 10px orange); /* Chrome, Safari, Opera */
    filter: drop-shadow(4px 4px 10px orange);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dodavanje CSS3 Drop-shadow efekta</title>
<style>
img.shadow {
    -webkit-filter: drop-shadow(2px 2px 4px orange); /* Chrome, Safari, Opera */
    filter: drop-shadow(2px 2px 4px orange);
}
img.shadow-large {
    -webkit-filter: drop-shadow(4px 4px 10px orange); /* Chrome, Safari, Opera */
    filter: drop-shadow(4px 4px 10px orange);
}
/* Neki CSS za uljepšavanje ovog primjera */
table td{
    padding: 10px;
    text-align: center;
}
</style>
</head>
<body>
    <table>
        <tr>
            <td>
                <img src="/examples/images/parrot.png" alt="Papiga">
            </td>
             <td>
                <img class="shadow" src="/examples/images/parrot.png" alt="Papiga">
            </td>
            <td>
                <img class="shadow-large" src="/examples/images/parrot.png" alt="Papiga">
            </td>
        </tr>
        <tr>
            <td>Orginalna slika</td>
            <td>drop-shadow(2px 2px 4px orange)</td> 
            <td>drop-shadow(4px 4px 10px orange)</td>
        </tr>
    </table>
</body>
</html>

Izlaz iz primjera izgledaće otprilike ovako:





Pretvaranje slike u nijanse sive

Slike se mogu pretvoriti u nijanse sive pomoću funkcije grayscale(). Vrijednost od 100% potpuno je sive skale. Vrijednost od 0% ostavlja sliku nepromijenjenu. Vrijednosti između 0% i 100% linearni su multiplikatori na efekat. Ako parametar amount nedostaje, koristi se vrijednost 0.

img.complete-gray {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}
img.partial-gray {
    -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 Grayscale efekta</title>
<style>
img.complete-gray {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}
img.partial-gray {
    -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}
/* Neki CSS za uljepšavanje ovog primjera */
table td{
    padding: 10px;
    text-align: center;
}
</style>
</head>
<body>
    <table>
        <tr>
            <td>
                <img src="/examples/images/parrot.png" alt="Papiga">
            </td>
             <td>
                <img class="partial-gray" src="/examples/images/parrot.png" alt="Papiga">
            </td>
            <td>
                <img class="complete-gray" src="/examples/images/parrot.png" alt="Papiga">
            </td>
        </tr>
        <tr>
            <td>Originalna slika</td>
            <td>grayscale(50%)</td> 
            <td>grayscale(100%)</td>
        </tr>
    </table>
</body>
</html>

Izlaz iz primjera izgledaće otprilike ovako:




Primjena rotacije nijanse na slici

Funkcija hue-rotate() primjenjuje rotaciju nijanse na slici. Prosljeđeni parametar definiše broj stepeni oko kruga. Boja uzorka slike će se prilagoditi slici. Vrijednost 0deg ostavlja sliku nepromijenjenom. Ako parametar 'angle' nedostaje, koristi se vrijednost 0deg. Ne postoji maksimalna vrijednost. Efekt vrijednosti iznad 360 stepeni se obavija.

img.hue-normal {
    -webkit-filter: hue-rotate(150deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(150deg);
}
img.hue-wrap {
    -webkit-filter: hue-rotate(480deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(480deg);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS3 Hue-rotate Filter Effect</title>
<style>
img.hue-normal {
    -webkit-filter: hue-rotate(150deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(150deg);
}
img.hue-wrap {
    -webkit-filter: hue-rotate(480deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(480deg);
}
/* Neki CSS za uljepšavanje ovog primjera */
table td{
    padding: 10px;
    text-align: center;
}
</style>
</head>
<body>
    <table>
        <tr>
            <td>
                <img src="/examples/images/parrot.png" alt="Papiga">
            </td>
             <td>
                <img class="hue-normal" src="/examples/images/parrot.png" alt="Papiga">
            </td>
            <td>
                <img class="hue-wrap" src="/examples/images/parrot.png" alt="Papiga">
            </td>
        </tr>
        <tr>
            <td>Orginalna slika</td>
            <td>hue-rotate(150deg)</td> 
            <td>hue-rotate(480deg)</td>
        </tr>
    </table>
</body>
</html>

Izlaz iz primjera izgledaće otprilike ovako:




Invertni efekat

Invertni efekt poput Photoshopa može se primijeniti na sliku pomoću funkcije invert(). Vrijednost 100% ili 1 je potpuno obrnuta. Vrijednost od 0% ostavlja ulaz nepromijenjenim. Vrijednosti između 0% i 100% linearni su multiplikatori na efekat. Ako parametar 'amount' nedostaje, koristi se vrijednost 0. Negativne vrijednosti nisu dozvoljene.

img.partially-inverted {
    -webkit-filter: invert(80%); /* Chrome, Safari, Opera */
    filter: invert(80%);
}
img.fully-inverted {
    -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
    filter: invert(100%);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 Invert filtera</title>
<style>
img.partially-inverted {
    -webkit-filter: invert(80%); /* Chrome, Safari, Opera */
    filter: invert(80%);
}
img.fully-inverted {
    -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
    filter: invert(100%);
}
/* Neki CSS za uljepšavanje ovog primjera */
table td{
    padding: 10px;
    text-align: center;
}
</style>
</head>
<body>
    <table>
        <tr>
            <td>
                <img src="/examples/images/parrot.png" alt="Papiga">
            </td>
             <td>
                <img class="partially-inverted" src="/examples/images/parrot.png" alt="Papiga">
            </td>
            <td>
                <img class="fully-inverted" src="/examples/images/parrot.png" alt="Papiga">
            </td>
        </tr>
        <tr>
            <td>Orginalna slika</td>
            <td>invert(80%)</td> 
            <td>invert(100%)</td>
        </tr>
    </table>
</body>
</html>

Izlaz iz primjera izgledaće otprilike ovako:




Primjena neprozirnosti na slike

Funkcija opacity() može se koristiti za primjenu prozirnosti na slikama. Vrijednost od 0% je potpuno transparentna. Vrijednost 100% ili 1 ostavlja sliku nepromijenjenom. Vrijednosti između 0% i 100% linearni su multiplikatori na efekat. Ako parametar 'iznos' nedostaje, koristi se vrijednost 1. Ova je funkcija slična svojstvu neprozirnosti.

img {
    -webkit-filter: opacity(80%); /* Chrome, Safari, Opera */
    filter: opacity(80%);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 Opacity efekat</title>
<style>
img.transparent {
    -webkit-filter: opacity(80%); /* Chrome, Safari, Opera */
    filter: opacity(80%);
}
img.highly-transparent {
    -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
    filter: opacity(30%);
}
/* Neki CSS za uljepšavanje ovog primjera */
table td{
    padding: 10px;
    text-align: center;
}
</style>
</head>
<body>
    <table>
        <tr>
            <td>
                <img src="/examples/images/parrot.png" alt="Papiga">
            </td>
             <td>
                <img class="transparent" src="/examples/images/parrot.png" alt="Papiga">
            </td>
            <td>
                <img class="highly-transparent" src="/examples/images/parrot.png" alt="Papiga">
            </td>
        </tr>
        <tr>
            <td>Originalna slika</td>
            <td>opacity(80%)</td> 
            <td>opacity(30%)</td>
        </tr>
    </table>
</body>
</html>

Izlaz iz primjera izgledaće otprilike ovako:




Primjena Sepia efekta na slike

Funkcija sepia() pretvara sliku u sepiju. Vrijednost od 100% ili 1 je potpuno sepija. Vrijednost od 0% ostavlja sliku nepromijenjenu. Vrijednosti između 0% i 100% linearni su multiplikatori na efekat. Ako parametar 'amount' nedostaje, koristi se vrijednost 0.

img.complete-sepia {
    -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
    filter: sepia(100%);
}
img.partial-sepia {
    -webkit-filter: sepia(30%); /* Chrome, Safari, Opera */
    filter: sepia(30%);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 Sepia filtera</title>
<style>
img.complete-sepia {
    -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
    filter: sepia(100%);
}
img.partial-sepia {
    -webkit-filter: sepia(30%); /* Chrome, Safari, Opera */
    filter: sepia(30%);
}
/* Neki CSS za uljepšavanje ovog primjera */
table td{
    padding: 10px;
    text-align: center;
}
</style>
</head>
<body>
    <table>
        <tr>
            <td>
                <img src="/examples/images/parrot.png" alt="Papiga">
            </td>
             <td>
                <img class="partial-sepia" src="/examples/images/parrot.png" alt="Papiga">
            </td>
            <td>
                <img class="complete-sepia" src="/examples/images/parrot.png" alt="Papiga">
            </td>
        </tr>
        <tr>
            <td>Originalna slika</td>
            <td>sepia(30%)</td> 
            <td>sepia(100%)</td>
        </tr>
    </table>
</body>
</html>

Izlaz iz primjera izgledaće otprilike ovako:





Prilagođavanje zasićenosti slika

Funkcija saturate() može se koristiti za podešavanje zasićenosti slike. Vrijednost od 0% potpuno je nezasićena. Vrijednost od 100% ostavlja sliku nepromijenjenom. Ostale vrijednosti su linearni multiplikatori na efekat. Vrijednosti preko 100% su takođe dopuštene, pružajući zasićene rezultate. Ako parametar 'amount' nedostaje, koristi se vrijednost 1.

img.un-saturated {
    -webkit-filter: saturate(0%); /* Chrome, Safari, Opera */
    filter: saturate(0%);
}
img.super-saturated {
    -webkit-filter: saturate(200%); /* Chrome, Safari, Opera */
    filter: saturate(200%);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 Saturate filter</title>
<style>
img.un-saturated {
    -webkit-filter: saturate(0%); /* Chrome, Safari, Opera */
    filter: saturate(0%);
}
img.super-saturated {
    -webkit-filter: saturate(200%); /* Chrome, Safari, Opera */
    filter: saturate(200%);
}
/* Neki CSS za uljepšavanje ovog primjera */
table td{
    padding: 10px;
    text-align: center;
}
</style>
</head>
<body>
    <table>
        <tr>
            <td>
                <img src="/examples/images/parrot.png" alt="Papiga">
            </td>
             <td>
                <img class="super-saturated" src="/examples/images/parrot.png" alt="Papiga">
            </td>
            <td>
                <img class="un-saturated" src="/examples/images/parrot.png" alt="Papiga">
            </td>
        </tr>
        <tr>
            <td>Originalna slika</td>
            <td>saturate(200%)</td> 
            <td>saturate(0%)</td>
        </tr>
    </table>
</body>
</html>

Izlaz iz primjera izgledaće otprilike ovako: