Autor publikacji: Virtual Patriot - Administrator

backdrop-filter

Data publikacji: Listopad 16 2017
Ostatnio edytowano: Grudzień 28 2024

Przeznaczenie właściwości `backdrop-filter`

Za pomocą właściwości backdrop-filter możemy zmienić kolorystykę miejsca występującego pod obszarem interesującego nas elementu HTML.

Informacje dodatkowe: brak

Informacje techniczne o właściwości `backdrop-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 `backdrop-filter`

: nie
: tak
: tak, lecz z przedrostkiem -webkit-
: tak
: nie
: tak

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

Opis wartości właściwości `backdrop-filter`

none

Wyjaśnienie

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

Domyślnie pierwotna kolorystyka miejsca występującego pod obszarem elementu HTML nie jest zmieniona.

Przykład

  backdrop-filter:none;

przykładowy element "p"

Kolorystyka miejsca występującego pod obszarem przykładowego elementu "p" 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;
      }

      div {
        width:450px;
        height:250px;
        padding:3em;
        background-image:url(https://webkod.pl/files/css/natura-01.png);
      }

      div > p {
        color:#FFF;
        width:50%;
        height:50%;
        margin:0;
        border:10px solid black;
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div>
      <p>przykładowy element "p"</p>
    </div>

  </body>
</html>

grayscale()

Wyjaśnienie

Za pomocą właściwości backdrop-filter oraz funkcji grayscale() możemy zmienić procent szarości kolorów miejsca występującego pod obszarem interesującego nas elementu HTML.

Przykład

  backdrop-filter:grayscale(90%);

przykładowy element "p"

Procent szarości kolorów miejsca występującego pod obszarem przykładowego elementu "p" został powiększony o 90 procent, ponieważ do wspomnianego elementu "p" została dodana właściwość "backdrop-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;
      }

      div {
        width:450px;
        height:250px;
        padding:3em;
        background-image:url(https://webkod.pl/files/css/natura-01.png);
      }

      div > p {
        backdrop-filter:grayscale(90%);
        -webkit-backdrop-filter:grayscale(90%);
        color:#FFF;
        width:50%;
        height:50%;
        margin:0;
        border:10px solid black;
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div>
      <p>przykładowy element "p"</p>
    </div>

  </body>
</html>

sepia()

Wyjaśnienie

Za pomocą właściwości backdrop-filter oraz funkcji sepia() możemy zmienić procent sepii kolorów miejsca występującego pod obszarem interesującego nas elementu HTML.

Przykład

  backdrop-filter:sepia(100%);

przykładowy element "p"

Procent sepii kolorów miejsca występującego pod obszarem przykładowego elementu "p" został powiększony o 100 procent, ponieważ do wspomnianego elementu "p" została dodana właściwość "backdrop-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;
      }

      div {
        width:450px;
        height:250px;
        padding:3em;
        background-image:url(https://webkod.pl/files/css/natura-01.png);
      }

      div > p {
        backdrop-filter:sepia(100%);
        -webkit-backdrop-filter:sepia(100%);
        color:#FFF;
        width:50%;
        height:50%;
        margin:0;
        border:10px solid black;
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div>
      <p>przykładowy element "p"</p>
    </div>

  </body>
</html>

saturate()

Wyjaśnienie

Za pomocą właściwości backdrop-filter oraz funkcji saturate() możemy zmienić procent nasycenia kolorów miejsca występującego pod obszarem interesującego nas elementu HTML.

Przykład

  backdrop-filter:saturate(250%);

przykładowy element "p"

Procent nasycenia kolorów miejsca występującego pod obszarem przykładowego elementu "p" został powiększony o 150 procent, ponieważ do wspomnianego elementu "p" została dodana właściwość "backdrop-filter" wraz z wartością w postaci funkcji "saturate()", w której to funkcji została użyta wartość "250%".

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 {
        width:450px;
        height:250px;
        padding:3em;
        background-image:url(https://webkod.pl/files/css/natura-01.png);
      }

      div > p {
        backdrop-filter:saturate(250%);
        -webkit-backdrop-filter:saturate(250%);
        color:#FFF;
        width:50%;
        height:50%;
        margin:0;
        border:10px solid black;
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div>
      <p>przykładowy element "p"</p>
    </div>

  </body>
</html>

hue-rotate()

Wyjaśnienie

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

Przykład

  backdrop-filter:hue-rotate(270deg);

przykładowy element "p"

Odcienie kolorów miejsca występującego pod obszarem przykładowego elementu "p" zostały zmienione, ponieważ do wspomnianego elementu "p" została dodana właściwość "backdrop-filter" wraz z wartością w postaci funkcji "hue-rotate()", w której to funkcji została użyta wartość "270deg".

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 {
        width:450px;
        height:250px;
        padding:3em;
        background-image:url(https://webkod.pl/files/css/natura-01.png);
      }

      div > p {
        backdrop-filter:hue-rotate(270deg);
        -webkit-backdrop-filter:hue-rotate(270deg);
        color:#FFF;
        width:50%;
        height:50%;
        margin:0;
        border:10px solid black;
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div>
      <p>przykładowy element "p"</p>
    </div>

  </body>
</html>

invert()

Wyjaśnienie

Za pomocą właściwości backdrop-filter oraz funkcji invert() możemy zmienić procent odwrócenia kolorów miejsca występującego pod obszarem interesującego nas elementu HTML.

Przykład

  backdrop-filter:invert(100%);

przykładowy element "p"

Procent odwrócenia kolorów miejsca występującego pod obszarem przykładowego elementu "p" został powiększony o 100 procent, ponieważ do wspomnianego elementu "p" została dodana właściwość "backdrop-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;
      }

      div {
        width:450px;
        height:250px;
        padding:3em;
        background-image:url(https://webkod.pl/files/css/natura-01.png);
      }

      div > p {
        backdrop-filter:invert(100%);
        -webkit-backdrop-filter:invert(100%);
        color:#FFF;
        width:50%;
        height:50%;
        margin:0;
        border:10px solid black;
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div>
      <p>przykładowy element "p"</p>
    </div>

  </body>
</html>

brightness()

Wyjaśnienie

Za pomocą właściwości backdrop-filter oraz funkcji brightness() możemy zmienić procent jasności kolorów miejsca występującego pod obszarem interesującego nas elementu HTML.

Przykład

  backdrop-filter:brightness(150%);

przykładowy element "p"

Procent jasności kolorów miejsca występującego pod obszarem przykładowego elementu "p" został powiększony o 50 procent, ponieważ do wspomnianego elementu "p" została dodana właściwość "backdrop-filter" wraz z wartością w postaci funkcji "brightness()", w której to funkcji została użyta wartość "150%".

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 {
        width:450px;
        height:250px;
        padding:3em;
        background-image:url(https://webkod.pl/files/css/natura-01.png);
      }

      div > p {
        backdrop-filter:brightness(150%);
        -webkit-backdrop-filter:brightness(150%);
        color:#FFF;
        width:50%;
        height:50%;
        margin:0;
        border:10px solid black;
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div>
      <p>przykładowy element "p"</p>
    </div>

  </body>
</html>

contrast()

Wyjaśnienie

Za pomocą właściwości backdrop-filter oraz funkcji contrast() możemy zmienić procent zróżnicowania kolorów miejsca występującego pod obszarem interesującego nas elementu HTML.

Przykład

  backdrop-filter:contrast(250%);

przykładowy element "p"

Procent zróżnicowania kolorów miejsca występującego pod obszarem przykładowego elementu "p" został powiększony o 150 procent, ponieważ do wspomnianego elementu "p" została dodana właściwość "backdrop-filter" wraz z wartością w postaci funkcji "contrast()", w której to funkcji została użyta wartość "250%".

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 {
        width:450px;
        height:250px;
        padding:3em;
        background-image:url(https://webkod.pl/files/css/natura-01.png);
      }

      div > p {
        backdrop-filter:contrast(250%);
        -webkit-backdrop-filter:contrast(250%);
        color:#FFF;
        width:50%;
        height:50%;
        margin:0;
        border:10px solid black;
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div>
      <p>przykładowy element "p"</p>
    </div>

  </body>
</html>

blur()

Wyjaśnienie

Za pomocą właściwości backdrop-filter oraz funkcji blur() możemy zmienić stopień rozmycia kolorów miejsca występującego pod obszarem interesującego nas elementu HTML.

Przykład

  backdrop-filter:blur(4px);

przykładowy element "p"

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

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 {
        width:450px;
        height:250px;
        padding:3em;
        background-image:url(https://webkod.pl/files/css/natura-01.png);
      }

      div > p {
        backdrop-filter:blur(4px);
        -webkit-backdrop-filter:blur(4px);
        color:#FFF;
        width:50%;
        height:50%;
        margin:0;
        border:10px solid black;
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div>
      <p>przykładowy element "p"</p>
    </div>

  </body>
</html>

opacity()

Wyjaśnienie

Za pomocą właściwości backdrop-filter oraz funkcji opacity() możemy zmienić procent przezroczystości kolorów miejsca występującego pod obszarem interesującego nas elementu HTML.

Przykład

  backdrop-filter:opacity(50%);

przykładowy element "p"

Procent przezroczystości kolorów miejsca występującego pod obszarem przykładowego elementu "p" wynosi 50 procent, ponieważ do wspomnianego elementu "p" została dodana właściwość "backdrop-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 {
        width:450px;
        height:250px;
        padding:3em;
        background-image:url(https://webkod.pl/files/css/natura-01.png);
      }

      div > p {
        backdrop-filter:opacity(50%);
        -webkit-backdrop-filter:opacity(50%);
        color:#FFF;
        width:50%;
        height:50%;
        margin:0;
        border:10px solid black;
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div>
      <p>przykładowy element "p"</p>
    </div>

  </body>
</html>

drop-shadow()

Wyjaśnienie

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

Przykład

  backdrop-filter:drop-shadow(4px 4px 2px red);

przykładowy element "p"

Do znajdujących się na przezroczystym tle kolorów miejsca występującego pod obszarem przykładowego elementu "p" 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 czerwony), ponieważ do wspomnianego elementu "p" została dodana właściwość "backdrop-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 red".

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 {
        width:450px;
        height:250px;
        padding:3em;
        background-image:url(https://webkod.pl/files/css/natura-02.png);
      }

      div > p {
        backdrop-filter:drop-shadow(4px 4px 2px red);
        -webkit-backdrop-filter:drop-shadow(4px 4px 2px red);
        color:#FFF;
        width:50%;
        height:50%;
        margin:0;
        border:10px solid black;
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div>
      <p>przykładowy element "p"</p>
    </div>

  </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 backdrop-filter możemy zmienić kolorystykę miejsca występującego pod obszarem interesującego nas elementu HTML na kilka różnych sposobów jednocześnie.

Podana przez nas kombinacja wartości właściwości "backdrop-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 "backdrop-filter" ma znaczenia na ostateczny sposób zmiany kolorystyki miejsca występującego pod obszarem elementu HTML.

Przykład

  backdrop-filter:grayscale(100%) blur(4px);

przykładowy element "p"

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

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 {
        width:450px;
        height:250px;
        padding:3em;
        background-image:url(https://webkod.pl/files/css/natura-01.png);
      }

      div > p {
        backdrop-filter:grayscale(100%) blur(4px);
        -webkit-backdrop-filter:grayscale(100%) blur(4px);
        color:#FFF;
        width:50%;
        height:50%;
        margin:0;
        border:10px solid black;
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div>
      <p>przykładowy element "p"</p>
    </div>

  </body>
</html>