Filtry

Podcast CSS – 023: filtry .

Powiedzmy, że chcesz zbudować element, który jest trochę nieprzezroczysty, efekt oszronionego szkła znajdujący się nad obrazem. Musi to być zwykły tekst, a nie obraz. Jak to zrobić?

Kombinacja filtrów CSS i backdrop-filter pozwalają nam stosować efekty i rozmyć potrzebne elementy w czasie rzeczywistym. Rozmycie i przezroczystość to 2 z wielu dostępnych filtrów: więc pokrótce omówię pokrótce, do czego służą i jak ich używać.

Właściwość filter

Obsługa przeglądarek

  • Chrome: 53.
  • Krawędź: 12.
  • Firefox: 35.
  • Safari: 9.1

Źródło

Możesz zastosować jeden lub kilka z następujących filtrów jako wartości dla filter Jeśli niewłaściwie zastosujesz filtr, pozostałe filtry zdefiniowane dla elementu filter nie będą działać.

blur

Stosuje ono rozmycie Gaussa. Jedynym argumentem, który możesz przekazać, jest radius, czyli stopień rozmycia. Musi to być jednostka długości, np. 10px. Wartości procentowe nie są akceptowane.

.my-element {
    filter: blur(0.2em);
}

brightness

Obsługa przeglądarek

  • Chrome: 18.
  • Krawędź: 12.
  • Firefox: 35.
  • Safari: 6.

Źródło

Aby zwiększyć lub zmniejszyć jasność elementu: korzystać z funkcji jasności. Wartość jasności jest wyrażana jako wartość procentowa, przy czym niezmieniony obraz ma wartość 100%. Wartość 0% powoduje, że obraz jest całkowicie czarny, dlatego wartości od 0% do 100% powodują, że obraz jest mniej jasny. Aby zwiększyć jasność, użyj wartości powyżej 100%.

.my-element {
    filter: brightness(80%);
}

contrast

Obsługa przeglądarek

  • Chrome: 18.
  • Krawędź: 12.
  • Firefox: 35.
  • Safari: 6.

Źródło

Aby odpowiednio zmniejszyć lub zwiększyć kontrast, ustaw wartość między 0% a 100%.

.my-element {
    filter: contrast(160%);
}

grayscale

Obsługa przeglądarek

  • Chrome: 18.
  • Krawędź: 12.
  • Firefox: 35.
  • Safari: 6.

Źródło

Można zastosować efekt w skali szarości, używając parametru 1 jako wartości argumentu grayscale(), lub 0, aby element był całkowicie nasycony. Możesz też użyć wartości procentowych lub dziesiętnych, aby zastosować tylko częściowy efekt skali szarości. Jeśli nie przekażesz żadnych argumentów, element przejdzie w skali szarości. Jeśli przekażesz wartość większą niż 100%, będzie ona ograniczona do 100%.

.my-element {
    filter: grayscale(80%);
}

invert

Obsługa przeglądarek

  • Chrome: 18.
  • Krawędź: 12.
  • Firefox: 35.
  • Safari: 6.

Źródło

Tak jak grayscale, możesz przekazać 1 lub 0 do funkcji invert(), aby ją włączyć lub wyłączyć. Po włączeniu tej opcji kolory elementu są całkowicie odwrócone. Możesz też użyć wartości procentowych lub dziesiętnych, by zastosować tylko częściową odwrócenie kolorów. Jeśli nie przekażesz żadnych argumentów do funkcji invert(), element zostanie całkowicie odwrócony.

.my-element {
    filter: invert(1);
}

opacity

Obsługa przeglądarek

  • Chrome: 18.
  • Krawędź: 12.
  • Firefox: 35.
  • Safari: 6.

Źródło

Filtr opacity() działa tak samo jak właściwość opacity, gdzie możesz przekazać liczbę lub wartość procentową, aby zwiększyć lub zmniejszyć przezroczystość. Jeśli nie przekażesz żadnych argumentów, element będzie w pełni widoczny.

.my-element {
    filter: opacity(0.3);
}

saturate

Obsługa przeglądarek

  • Chrome: 18.
  • Krawędź: 12.
  • Firefox: 35.
  • Safari: 6.

Źródło

Filtr nasycony jest bardzo podobny do filtra brightness i akceptuje ten sam argument: liczby czy procenty. Zamiast zwiększać lub zmniejszać efekt jasności, saturate zwiększa lub zmniejsza nasycenie kolorów.

.my-element {
    filter: saturate(155%);
}

sepia

Obsługa przeglądarek

  • Chrome: 18.
  • Krawędź: 12.
  • Firefox: 35.
  • Safari: 6.

Źródło

Za pomocą tego filtra, który działa jak grayscale(), można dodać efekt sepii. Sepia to technika druku fotograficznego polegająca na konwertowaniu odcieni czarnych na brązowe w celu rozgrzewki. Jako argumentu funkcji sepia() możesz przekazać wartość liczbową lub procentową. co zwiększa lub zmniejsza efekt. Brak argumentów powoduje dodanie pełnego efektu sepii (odpowiednik sepia(100%)).

.my-element {
    filter: sepia(70%);
}

hue-rotate

Obsługa przeglądarek

  • Chrome: 18.
  • Krawędź: 12.
  • Firefox: 35.
  • Safari: 6.

Źródło

Wiesz już, że kolor w polu hsl odnosi się do obrotu koła kolorów lekcja kolorów i ten filtr działa w podobny sposób. Jeśli mijasz kąt, np. w stopniach lub skrętach, zmienia barwę wszystkich kolorów elementu, przez zmianę części koła kolorów, do którego się odwołuje. Jeśli przekażesz żaden argument, nie przyniesie to żadnego efektu.

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

Obsługa przeglądarek

  • Chrome: 18.
  • Krawędź: 12.
  • Firefox: 35.
  • Safari: 6.

Źródło

Możesz zastosować przylegający do krzywej cień jak w narzędziu do projektowania, takich jak Photoshop z drop-shadow Ten cień jest stosowany na maskę alfa, co bardzo ułatwia dodawanie cienia do wyciętego zdjęcia. Filtr drop-shadow wykorzystuje parametr cienia, który zawiera rozdzielone spacjami wartości przesunięcia-x, przesunięcia-y, rozmycia i koloru. Jest prawie taki sam jak box-shadow, ale słowo kluczowe inset i wartość rozkładu nie są obsługiwane.

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

Więcej informacji o różnych rodzajach cieni zawiera moduł cienie.

url

Obsługa przeglądarek

  • Chrome: 5.
  • Krawędź: 12.
  • Firefox: 3.
  • Safari: 6.

Źródło

Filtr url umożliwia zastosowanie filtra SVG z połączonego elementu lub pliku SVG. Dostępne opcje więcej informacji o filtrach SVG

Filtr tła

Obsługa przeglądarek

  • Chrome: 76.
  • Krawędź: 79.
  • Firefox: 103.
  • Safari: 18.

Źródło

Filtr tła, właściwość akceptuje wszystkie wartości funkcji filtra co filter. Różnica między backdrop-filter a filter jest to, że właściwość backdrop-filter stosuje filtry tylko do tła, gdzie właściwość filter stosuje ją do całego elementu.

Świetny przykład widać na początku tej lekcji: ponieważ tekst nie jest rozmyty, a najlepiej nie trzeba dodawać dodatkowych elementów HTML. Stosowanie filtrów tylko do tła jest możliwe.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o filtrach

Które z tych funkcji są funkcjami filtra CSS?

grayscale()
🎉
invert()
🎉
flip()
Spróbuj jeszcze raz.
multiply()
Spróbuj jeszcze raz.
blur()
🎉
brightness()
🎉

Czy CSS może używać filtrów SVG?

Tak
Włącza to funkcja filtra url()
Nie
Spróbuj jeszcze raz.