Podcast dotyczący CSS – 023: filtry
Załóżmy, że chcesz zbudować element z nieprzezroczystym, efektem oszronionego szkła, który jest umiejscowiony nad obrazem. Musi to być tekst aktywny, a nie obraz. Jak to zrobić?
Połączenie filtrów CSS i backdrop-filter umożliwia stosowanie efektów i rozmycie w czasie rzeczywistym.
Rozmycie i przezroczystość to dwa z wielu dostępnych filtrów.
Przyjrzyjmy się więc im pokrótce i zastanówmy się, jak z nich korzystać.
Właściwość filter
Jako wartość właściwości filter możesz zastosować co najmniej 1 z tych filtrów.
Jeśli zastosujesz filtr nieprawidłowo, pozostałe filtry zdefiniowane w polu filter nie będą działać.
blur
Stosuje to rozmycie gaussowskie, a jedyny argument, jaki można przekazać, to radius, czyli stopień rozmycia.
Wymagana jest jednostka długości, np. 10px. Wartości procentowe nie są akceptowane.
.my-element {
filter: blur(0.2em);
}
brightness
Aby zwiększyć lub zmniejszyć jasność elementu, użyj funkcji jasności. Jasność jest wyrażana jako wartość procentowa, a niezmieniony obraz – 100%. Wartość 0% zmienia całkowicie zdjęcie na czarny, a to wartości od 0% do 100% zmniejszają jego jasność. Aby zwiększyć jasność, użyj wartości powyżej 100%.
.my-element {
filter: brightness(80%);
}
contrast
Aby odpowiednio zmniejszyć lub zwiększyć kontrast, ustaw wartość z zakresu od 0% do 100%.
.my-element {
filter: contrast(160%);
}
grayscale
Aby zastosować efekt w skali szarości, możesz użyć 1 jako wartości dla 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 odcieni szarości.
Jeśli nie zostaną przekazane żadne argumenty, element będzie miał pełną skalę szarości.
Jeśli podasz wartość większą niż 100%, zostanie ona ograniczona do 100%.
.my-element {
filter: grayscale(80%);
}
invert
Tak jak w przypadku grayscale, możesz przekazać do funkcji invert() parametr 1 lub 0, aby go włączyć lub wyłączyć.
Gdy jest włączona, kolory elementu są całkowicie odwrócone.
Możesz też użyć wartości procentowych lub dziesiętnych, aby zastosować tylko częściowe 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
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 jest w pełni widoczny.
.my-element {
filter: opacity(0.3);
}
saturate
Filtr nasycenia jest bardzo podobny do filtra brightness i może przyjmować ten sam argument: liczbę lub wartość procentową.
Zamiast zwiększać lub zmniejszać efekt jasności, saturate zwiększa lub zmniejsza nasycenie kolorów.
.my-element {
filter: saturate(155%);
}
sepia
Możesz dodać efekt sepii za pomocą tego filtra, który działa jak grayscale().
Odcień sepii to technika drukowania, która przekształca odcienie czerni w odcienie brązowe w celu ich ocieplenia.
Jako argument funkcji sepia() możesz przekazać liczbę lub wartość procentową, która zwiększa lub zmniejsza efekt.
Brak argumentów daje pełny efekt sepii (odpowiednik sepia(100%)).
.my-element {
filter: sepia(70%);
}
hue-rotate
Wiesz już, jak kolor w polu hsl odnosi się do obrotu koła kolorów z lekcji kolorów i ten filtr działa w podobny sposób.
Jeśli przesuwasz kąt – np. stopnie lub skręty, zmieni się też odcień wszystkich kolorów elementu, zmieniając część, do której odnosi się koło kolorów. Jeśli nie przekażesz żadnego argumentu, nic nie przyniesie.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
Możesz zastosować cień przylegający do krzywej tak jak w narzędziu do projektowania, takim jak Photoshop z użyciem drop-shadow.
Ten cień jest stosowany do maski alfa, dzięki czemu jest bardzo przydatny przy dodawaniu cienia do obrazu z wycięciem.
Filtr drop-shadow przyjmuje parametr cienia, który zawiera rozdzielone spacjami wartości przesunięcia: x, przesunięcia y, rozmycia oraz koloru.
Jest prawie taka sama jak wartość box-shadow, ale słowo kluczowe inset i wartość zasięgu nie są obsługiwane.
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
Więcej informacji o różnych typach cieni znajdziesz w module Cienie.
url
Filtr url umożliwia zastosowanie filtra SVG z połączonego elementu lub pliku SVG.
Więcej informacji o filtrach SVG
Filtr tła
Właściwość backdrop-filter akceptuje wszystkie te same wartości funkcji filtra co filter.
Różnica między backdrop-filter a filter polega na tym, że właściwość backdrop-filter stosuje filtry tylko do tła, a właściwość filter – do całego elementu.
Przykład na początku tej lekcji to doskonały przykład, ponieważ nie chcesz, aby tekst był zamazany, a najlepiej też dodawać dodatkowe elementy HTML. W ten sposób można stosować filtry tylko do tła.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o filtrach
Które z tych opcji są funkcjami filtra CSS?
grayscale()invert()flip()multiply()blur()brightness()Czy w CSS można stosować filtry SVG?
url() umożliwia to