Autor publikacji
Virtual Patriot - Administrator

blur()

Data publikacji
Ostatnio edytowano

Przeznaczenie funkcji blur()

Za pomocą funkcji blur() możemy określić stopień rozmycia koloru.

Parametry funkcji blur()

Przykładowe zapisy

blur(5px)

blur(0.2em)

blur(2.5pt)

value

Parametr value jest wymaganym parametrem funkcji blur(). Parametr value określa stopień rozmycia koloru. Im większa wartość parametru value tym stopień rozmycia koloru będzie większy.

Zakres wartości

od 0 w górę (dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną)

Wartość domyślna

0

Występowanie funkcji blur()

  1. filter
  2. backdrop-filter

Przykład funkcji blur()

  filter:blur(4px);
obrazek przed zmianą kolorystyki za pomocą funkcji blur() obrazek po zmianie kolorystyki za pomocą funkcji blur()

Stopień rozmycia kolorów przykładowego elementu "img" został zmieniony, 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ść "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;
      }

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

  <body>

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

  </body>
</html>

Interpretacja funkcji blur()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .