Podcast CSS – 023: filtry
Załóżmy, że chcesz zbudować element, który efektem jest lekko nieprzezroczyste, oszronione szkło i znajduje się nad zdjęciem. Musi to być zwykły tekst, a nie obraz. Jak to zrobić?
Połączenie filtrów CSS i elementu backdrop-filter pozwala nam stosować efekty i rozmyć potrzebne elementy w czasie rzeczywistym.
Rozmycie i przezroczystość to 2 z wielu dostępnych filtrów,
więc krótko omówmy ich działanie i sposób ich użycia.
Właściwość filter
Jako wartość właściwości filter możesz zastosować 1 lub kilka z tych filtrów.
Jeśli zastosujesz nieprawidłowy filtr, pozostałe filtry zdefiniowane dla elementu filter nie będą działać.
blur
Stosuje ono rozmycie Gaussowskie, a jedyny argument, który można przekazać, to 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
Aby zwiększyć lub zmniejszyć jasność elementu, użyj funkcji jasności. Wartość jasności jest wyrażana jako wartość procentowa, przy czym niezmieniony obraz ma wartość 100%. Wartość 0% zmienia obraz na czarny, a w przypadku wartości od 0% do 100% obraz jest słabszy. 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ść między 0% a 100%.
.my-element {
filter: contrast(160%);
}
grayscale
Aby zastosować efekt całkowicie w skali szarości, użyj 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 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
Tak jak w polu grayscale, możesz przekazać do funkcji invert() parametr 1 lub 0, aby ją włączyć lub wyłączyć.
Po włączeniu tej funkcji 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
Filtr opacity() działa tak samo jak właściwość opacity, gdzie można 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
Filtr nasycony jest bardzo podobny do filtra brightness i przyjmuje ten sam argument: liczbę lub wartość procentową.
Zamiast zwiększać lub zmniejszać efekt jasności, funkcja saturate zwiększa lub zmniejsza nasycenie kolorów.
.my-element {
filter: saturate(155%);
}
sepia
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ć liczbę lub wartość 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
Z lekcji kolorów dowiesz się, jak barwa w funkcji hsl odnosi się do obracania koła kolorów. W podobny sposób działa ten filtr.
Jeśli miniesz kąt, na przykład stopnie lub skręty, zmieni się barwa wszystkich kolorów elementu,
zmieniając część 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
Możesz zastosować przylegający do krzywej cień jak w narzędziu do projektowania, np. w Photoshopie za pomocą narzędzia 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 niemal taka sama jak box-shadow, ale słowo kluczowe inset i wartość rozpowszechniona 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
Filtr url umożliwia zastosowanie filtra SVG z połączonego elementu lub pliku SVG.
Więcej informacji o filtrach SVG znajdziesz tutaj
Filtr tła
Właściwość backdrop-filter akceptuje wszystkie 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, gdzie właściwość filter stosuje ją do całego elementu.
Doskonałym przykładem jest przykład na początku 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()multiply()blur()brightness()Czy CSS może używać filtrów SVG?
url()