Autor publikacji
Virtual Patriot - Administrator

filter

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości filter

Za pomocą właściwości filter możemy zmienić kolorystykę interesującego nas elementu HTML.

Informacje dodatkowe

gdy element przodek oraz element potomek posiadają właściwość filter wraz z wartością różną od wartości none, wtedy zmiana kolorystyki rozpoczyna się od elementu potomka.

Informacje techniczne o właściwości filter

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

tak

Interpretacja właściwości filter

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości filter

none

Wyjaśnienie

Wartość none jest domyślną wartością właściwości filter.

Domyślnie pierwotna kolorystyka elementu HTML nie jest zmieniona.

Przykład

  filter:none;
obrazek przed zmianą kolorystyki za pomocą właściwości filter

Kolorystyka przykładowego elementu "img" nie została zmieniona.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }
    </style>
  </head>

  <body>

    <img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

grayscale()

Wyjaśnienie

Za pomocą właściwości filter oraz funkcji grayscale() możemy zmienić procent szarości kolorów interesującego nas elementu HTML.

Przykład

  filter:grayscale(90%);
obrazek przed zmianą kolorystyki za pomocą funkcji grayscale() właściwości filter obrazek po zmianie kolorystyki za pomocą funkcji grayscale() właściwości filter

Procent szarości kolorów przykładowego elementu "img" został powiększony o 90 procent, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "grayscale()", w której to funkcji została użyta wartość "90%".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      img {
        filter:grayscale(90%);
      }
    </style>
  </head>

  <body>

    <img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

sepia()

Wyjaśnienie

Za pomocą właściwości filter oraz funkcji sepia() możemy zmienić procent sepii kolorów interesującego nas elementu HTML.

Przykład

  filter:sepia(100%);
obrazek przed zmianą kolorystyki za pomocą funkcji sepia() właściwości filter obrazek po zmianie kolorystyki za pomocą funkcji sepia() właściwości filter

Procent sepii kolorów przykładowego elementu "img" został powiększony o 100 procent, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "sepia()", w której to funkcji została użyta wartość "100%".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      img {
        filter:sepia(100%);
      }
    </style>
  </head>

  <body>

    <img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

saturate()

Wyjaśnienie

Za pomocą właściwości filter oraz funkcji saturate() możemy zmienić procent nasycenia kolorów interesującego nas elementu HTML.

Przykład

  filter:saturate(180%);
obrazek przed zmianą kolorystyki za pomocą funkcji saturate() właściwości filter obrazek po zmianie kolorystyki za pomocą funkcji saturate() właściwości filter

Procent nasycenia kolorów przykładowego elementu "img" został powiększony o 80 procent, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "saturate()", w której to funkcji została użyta wartość "180%".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      img {
        filter:saturate(180%);
      }
    </style>
  </head>

  <body>

    <img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

hue-rotate()

Wyjaśnienie

Za pomocą właściwości filter oraz funkcji hue-rotate() możemy zmienić (na podstawie koła barw) odcienie kolorów interesującego nas elementu HTML.

Przykład

  filter:hue-rotate(30deg);
obrazek przed zmianą kolorystyki za pomocą funkcji hue-rotate() właściwości filter obrazek po zmianie kolorystyki za pomocą funkcji hue-rotate() właściwości filter

Odcienie kolorów przykładowego elementu "img" zostały zmienione, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "hue-rotate()", w której to funkcji została użyta wartość "30deg".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      img {
        filter:hue-rotate(30deg);
      }
    </style>
  </head>

  <body>

    <img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

invert()

Wyjaśnienie

Za pomocą właściwości filter oraz funkcji invert() możemy zmienić procent odwrócenia kolorów interesującego nas elementu HTML.

Przykład

  filter:invert(100%);
obrazek przed zmianą kolorystyki za pomocą funkcji invert() właściwości filter obrazek po zmianie kolorystyki za pomocą funkcji invert() właściwości filter

Procent odwrócenia kolorów przykładowego elementu "img" został powiększony o 100 procent, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "invert()", w której to funkcji została użyta wartość "100%".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      img {
        filter:invert(100%);
      }
    </style>
  </head>

  <body>

    <img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

brightness()

Wyjaśnienie

Za pomocą właściwości filter oraz funkcji brightness() możemy zmienić procent jasności kolorów interesującego nas elementu HTML.

Przykład

  filter:brightness(160%);
obrazek przed zmianą kolorystyki za pomocą funkcji brightness() właściwości filter obrazek po zmianie kolorystyki za pomocą funkcji brightness() właściwości filter

Procent jasności kolorów przykładowego elementu "img" został powiększony o 60 procent, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "brightness()", w której to funkcji została użyta wartość "160%".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      img {
        filter:brightness(160%);
      }
    </style>
  </head>

  <body>

    <img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

contrast()

Wyjaśnienie

Za pomocą właściwości filter oraz funkcji contrast() możemy zmienić procent zróżnicowania kolorów interesującego nas elementu HTML.

Przykład

  filter:contrast(200%);
obrazek przed zmianą kolorystyki za pomocą funkcji contrast() właściwości filter obrazek po zmianie kolorystyki za pomocą funkcji contrast() właściwości filter

Procent zróżnicowania kolorów przykładowego elementu "img" został powiększony o 100 procent, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "contrast()", w której to funkcji została użyta wartość "200%".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      img {
        filter:contrast(200%);
      }
    </style>
  </head>

  <body>

    <img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

blur()

Wyjaśnienie

Za pomocą właściwości filter oraz funkcji blur() możemy zmienić stopień rozmycia kolorów interesującego nas elementu HTML.

Przykład

  filter:blur(2px);
obrazek przed zmianą kolorystyki za pomocą funkcji blur() właściwości filter obrazek po zmianie kolorystyki za pomocą funkcji blur() właściwości filter

Stopień rozmycia kolorów przykładowego elementu "img" został powiększony na podstawie wartości równej 2 piksele, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "blur()", w której to funkcji została użyta wartość "2px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      img {
        filter:blur(2px);
      }
    </style>
  </head>

  <body>

    <img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

opacity()

Wyjaśnienie

Za pomocą właściwości filter oraz funkcji opacity() możemy zmienić procent przezroczystości kolorów interesującego nas elementu HTML.

Przykład

  filter:opacity(50%);
obrazek przed zmianą kolorystyki za pomocą funkcji opacity() właściwości filter obrazek po zmianie kolorystyki za pomocą funkcji opacity() właściwości filter

Procent przezroczystości kolorów przykładowego elementu "img" wynosi 50 procent, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "opacity()", w której to funkcji została użyta wartość "50%".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-image:url(https://webkod.pl/files/css/obrazek-01.png);
      }

      img {
        filter:opacity(50%);
      }
    </style>
  </head>

  <body>

    <div>
      <img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">
    </div>

  </body>
</html>

drop-shadow()

Wyjaśnienie

Za pomocą właściwości filter oraz funkcji drop-shadow() możemy określić efekt cienia dla kolorów interesującego nas elementu HTML.

Przykład

  filter:drop-shadow(4px 4px 2px black);
obrazek przed dodaniem cienia za pomocą funkcji drop-shadow() właściwości filter obrazek po dodaniu cienia za pomocą funkcji drop-shadow() właściwości filter

Do znajdujących się na przezroczystym tle kolorów przykładowego elementu "img" został dodany efekt cienia (przesunięty w prawo o 4 piksele, przesunięty w dół o 4 piksele, posiadający stopień rozmycia równy 2 piksele oraz posiadający kolor czarny), ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z wartością w postaci funkcji "drop-shadow()", w której to funkcji zostały użyte następujące wartości: "4px 4px 2px black".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      img {
        filter:drop-shadow(4px 4px 2px black);
      }
    </style>
  </head>

  <body>

    <img src="https://webkod.pl/files/css/obrazek-02.png" alt="wielokąty na przezroczystym tle">

  </body>
</html>

kombinacja wartości

Wyjaśnienie

Za pomocą kombinacji kilku (oddzielonych od siebie znakiem spacji) wartości należących do właściwości filter możemy zmienić kolorystykę interesującego nas elementu HTML na kilka różnych sposobów jednocześnie.

Podana przez nas kombinacja wartości właściwości "filter" nie może zawierać wartości none oraz wartości globalnych.

Podana przez nas kolejność wartości kombinacji wartości właściwości "filter" ma znaczenia na ostateczny sposób zmiany kolorystyki elementu HTML.

Przykład

  filter:grayscale(100%) blur(2px);
obrazek przed zmianą kolorystyki za pomocą kilku funkcji właściwości filter obrazek po zmianie kolorystyki za pomocą kilku funkcji właściwości filter

Najpierw procent szarości kolorów przykładowego elementu "img" został powiększony o 100 procent, a następnie stopień rozmycia kolorów przykładowego elementu "img" został powiększony na podstawie wartości równej 2 piksele, ponieważ do wspomnianego elementu "img" została dodana właściwość "filter" wraz z następującą kombinacją wartości: "grayscale(100%) blur(2px)".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      img {
        filter:grayscale(100%) blur(2px);
      }
    </style>
  </head>

  <body>

    <img src="https://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>