Co to są filtry CSS?

Filtry CSS umożliwiają zastosowanie efektów graficznych, takich jak rozmycie lub zmiana koloru do elementu. Są one powszechnie używane do obrazów, tła i obramowań.

Filtry mogą być używane do tworzenia efektów wizualnych, ulepszania obrazów lub tworzenia unikalnych elementów projektu bez konieczności korzystania z zewnętrznych narzędzi do edycji obrazu.

Obsługiwane właściwości filtru CSS

• blur()- Stosuje rozmycie gaussowskie do elementu.
• brightness()- Dostosowuje jasność elementu.
• contrast()- Dostosowuje kontrast elementu.
• grayscale()- Konwertuje element na skalę szarości.
• hue-rotate()- Stosuje obrót barwy do elementu.
• invert()- Odwraca kolory elementu.
• opacity()- Dostosowuje krycie elementu.
• saturate()- Nasyca lub zmniejsza nasycenie elementu.
• sepia()- Konwertuje element na sepię.

Jak stosować filtry

Korzystając z kodu CSS wygenerowanego przez to narzędzie, możesz zastosować filtry do dowolnego elementu HTML. Oto odpowiednia procedura:

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

Kompatybilność z przeglądarką

Filtry CSS są szeroko obsługiwane w nowoczesnych przeglądarkach, w tym Chrome, Firefox, Safari, Edge i Opera. Jednak starsze przeglądarki, takie jak Internet Explorer, nie obsługują ich.