W tym artykule
Właściwość CSS filter wyjaśniona
Właściwość CSS filter stosuje efekty graficzne takie jak rozmycie, jasność, kontrast i przesunięcia kolorów do dowolnego elementu HTML. Działa na obrazach, tłach, tekście, a nawet całych sekcjach strony. Filtry są przetwarzane przez GPU przeglądarki, co czyni je wydajnymi dla efektów wizualnych w czasie rzeczywistym.
CSS zapewnia dziewięć wbudowanych funkcji filtrów: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate i sepia. Można je łączyć w jednej deklaracji filter, aby tworzyć złożone efekty wizualne. Kolejność filtrów ma znaczenie — każda funkcja przetwarza wynik poprzedniej.
Jak działa każda funkcja filtra
Każda funkcja filtra przyjmuje jedną wartość i przekształca wizualne wyjście elementu. Zrozumienie działania każdej funkcji pomaga je efektywnie łączyć.
- blur(px) — stosuje gaussowskie rozmycie, sprawiając, że element wygląda nieostro. Wyższe wartości tworzą silniejsze rozmycie. Przydatne dla nakładek tła i efektów matowego szkła
- brightness(%) i contrast(%) — brightness skaluje ogólną jasność (100% bez zmian, 200% podwójna), a contrast reguluje różnicę między jasnymi i ciemnymi obszarami
- grayscale(%), sepia(%) i hue-rotate(deg) — grayscale usuwa nasycenie kolorów, sepia dodaje ciepły brązowy ton, a hue-rotate przesuwa wszystkie kolory po kole barw
Wypróbuj za darmo — bez rejestracji
Generuj filtry CSS →Tworzenie efektów w stylu Instagrama
Układając w stos wiele funkcji filtrów CSS, możesz odtworzyć popularne efekty filtrów fotograficznych całkowicie w kodzie. Efekty te stosują się w czasie rzeczywistym na dowolnym elemencie obrazu.
- Wygląd vintage — połącz sepia(60%) z contrast(110%) i brightness(90%) aby stworzyć ciepły, wyblakły efekt fotografii przypominający stare aparaty na kliszę
- Czarno-biały — użyj grayscale(100%) z contrast(120%) dla monochromatycznego efektu o wysokim kontraście. Dodaj brightness(110%) dla jaśniejszego czarno-białego wyglądu
- Dramatyczny nastrój — ułóż contrast(150%) z saturate(130%) i brightness(80%) dla żywej, przyciemnionej atmosfery, gdzie kolory wyróżniają się na głębokich cieniach
Często zadawane pytania
Czy można używać filtrów SVG z właściwością CSS filter?
Tak. Funkcja url() w CSS filter pozwala odwoływać się do niestandardowych definicji filtrów SVG dla efektów wykraczających poza wbudowane funkcje. Umożliwia to zaawansowane efekty jak mapy przemieszczenia i macierze kolorów.
Czy filtry CSS wpływają na wydajność?
Filtry CSS są przyspieszane przez GPU w nowoczesnych przeglądarkach, co czyni je wydajnymi w większości przypadków. Pojedyncze filtry na obrazach mają minimalny wpływ na wydajność. Jednak stosowanie rozmycia na dużych obszarach może powodować spadki klatek na słabszych urządzeniach.
Czy filtry można animować przy hoverze?
Tak. Filtry CSS działają bezproblemowo z przejściami i animacjami. Popularny wzorzec to stosowanie filtra grayscale lub blur domyślnie i przejście do oryginalnego wyglądu przy hoverze, tworząc płynne efekty przyspieszane przez GPU.