Filtry w CSS – prosta edycja zdjeć, filmów i elementów iframe

W ostatnim czasie można zauważyć, że na blogu zaczyna dominować CSS jako główny temat wpisów i niestety nie dużo mogę z tym zrobić, bo zawsze gdy chcę poruszyć inny temat, to trafiam na coś, czym po prostu nie mogę się nie podzielić! 🙂

Nie inaczej jest w tym przypadku, bo czymś takim jest właściwość filter, która pod dość niepozorną nazwą kryje dużą moc pozwalającą nadawać wszystkim elementom predefiniowane style znane nam z podstawowej obróbki zdjęć. Jakie to style oraz w jaki sposób używać omawianej właściwości? Tego dowiesz się w tym artykule. Zapraszam! 🙂

Czym są filtry w CSSie?

Tak jak już wspominałem są właściwością, która pozwala nam na stylowanie wszelkich elementów (zwykle są to zdjęcia, filmy oraz obiekty iframe) w sposób znany z chociażby z podstawowej edycji zdjęć. Dla przykładu możemy wziąć daną grafikę i sprawić, że stanie się ciemniejsza lub czarno-biała.

Wsparcie przeglądarek.

W tego typu wpisach zawsze warto o tym wspomnieć, bo w końcu bez sensu jest uczenie się danej właściwości, jeśli później okaże się, że ta nie jest wspierana przez większość przeglądarek. Na szczęście nie jest tak w tym przypadku, bo filtry w CSSie nie są obsługiwane tylko przez ten nieszczęsny Internet Explorer.

Jeśli interesuje Cię pełny wykaz wsparcia dla tej właściwości, to możesz zajrzeć chociażby na tę stronę. 🙂

No dobrze, ale na co w ogóle pozwala ta właściwość?

Już tłumaczę. 🙂 Może zacznijmy od pokazania przykładu, na którym będziemy pracować, po czym wymienię je wszystkie z osobna:

See the Pen Przykład domyślny by Robert Orliński (@ROrlilnski) on CodePen.

Numer 1: Skala szarości.

See the Pen Filtr – skala szarości by Robert Orliński (@ROrlilnski) on CodePen.


Jak sama nazwa wskazuje za jej pomocą możemy sprawić, że nasz element zacznie wyświetlać się w odcieniach szarości w zależności od poziomu podanego w nawiasie (100% lub po prostu 1, to zupełna zmiana konkretnego elementu).

Numer 2: Nasycenie.

See the Pen Filtr – nasycenie by Robert Orliński (@ROrlilnski) on CodePen.


Podobnie jak w punkcie pierwszym nazwa tego filtra w pełni oddaje jego funkcjonalność. Oczywiście moc nasycenia owych kolorów zależy od tego jak wysoką wartość wpiszemy w nawias.

Numer 3: Inwersja kolorów.

See the Pen Filtr – inwersja kolorów by Robert Orliński (@ROrlilnski) on CodePen.


Kolejna wartość, bardzo dobrze znana amatorom obróbki zdjęć, takim jak ja. 😉 Daje nam możliwość odwrócenia kolorów, w taki sposób, że np. czarny staje się białym. Podobnie jak w punkcie pierwszym najwyższa możliwa wartość, to 1 lub inaczej 100%.

Numer 4: Sepia.

See the Pen Filtr – sepia by Robert Orliński (@ROrlilnski) on CodePen.

Tego efektu chyba nie trzeba nikomu przedstawiać. 🙂 Podobnie jak u jego poprzednika moc zależy od wartości wyrażonej w procentach lub liczbie z zakresu od 0 do 1 .

Numer 5: Kontrast.

See the Pen Filtr – kontrast by Robert Orliński (@ROrlilnski) on CodePen.

Wartość ta pozawala nam na sztuczne podbicie kontrastu obiektu, z którym pracujemy, przez co kolory znacznie mocniej się wyróżniają.

Numer 6: Rozmycie.

See the Pen Filtr – rozmycie by Robert Orliński (@ROrlilnski) on CodePen.


Tu również nazwa idealnie opisuje zastosowanie omawianej wartości.

Co ciekawe, moc tego efektu jest definiowana zupełnie inaczej niż w przypadku wcześniejszych wartości, bo stosujemy tu klasyczne jednostki przeznaczone do wymiarowania, na przykład piksele.

Numer 7: Poziom jasności.

See the Pen Filtr – poziom jasności by Robert Orliński (@ROrlilnski) on CodePen.


Z kolei dzięki tej wartości możemy manipulować iluminacją elementu. W przypadku chęci jego ściemnienia użyjemy wartości po przecinku, a jeśli jego jasność ma zostać zwiększona, to zastosujemy wartości powyżej 1 (np. 2 sprawi, że nasz element stanie się 2 razy jaśniejszy).

Numer 8: Hue-rotate.

See the Pen Filtr – hue-rotate by Robert Orliński (@ROrlilnski) on CodePen.


Bardzo ciekawa wartość o dosyć nietypowej nazwie. Dzięki niej możemy “obrócić” kolorystykę naszego elementu poruszając się po tzw. kole barw.

Numer 9: Przezroczystość.

See the Pen Filtr – przezroczystość by Robert Orliński (@ROrlilnski) on CodePen.


Nie da się ukryć, że ta wartość może nam się nie przydać, ponieważ działa w dokładnie ten sam sposób, jak właściwość opacity w CSSie. 😉

Numer 10: Cień.

See the Pen Filtr – cień by Robert Orliński (@ROrlilnski) on CodePen.

Ostatnia już wartość dodaje cień do naszego elementu.

W przeciwieństwie do poprzednich wymaga większej ilości parametrów, a dokładnie od 2 do 4. Pierwszy z nich to przesunięcie cienia w poziomie, drugi określa dokładnie to samo, ale w pionie. Trzecia wartość pozwala nam ustalić poziom rozmycia, a ostatnia już, czwarta określa jego kolor.

Łączenie filtrów.

See the Pen Łączenie filtrów by Robert Orliński (@ROrlilnski) on CodePen.

Warto wspomnieć, że nasze filtry można łączyć w bardzo prosty sposób, jednocześnie sprawiając, że wygląd konkretnych elementów staje się jeszcze ciekawszy!

Przykłady używania omawianej dziś właściwości.

Jeszcze zanim skończymy poznawanie filtrów w CSSie, chciałbym pokazać Ci, że poza zdjęciami działają świetnie w przypadku filmów:

See the Pen Zastosowanie filtru na obiekcie “video” by Robert Orliński (@ROrlilnski) on CodePen.


oraz elementów iframe (na przykład map Google’a):

See the Pen Zastosowanie filtru na obiekcie iframe by Robert Orliński (@ROrlilnski) on CodePen.

Animacje.

Podobnie jak w przypadku niedawno omawianej właściwości clip-path, filtry możemy animować za pomocą ogólnie dostępnych keyfamesów. Dla przykładu jesteśmy w stanie stworzyć taki oto bardzo prosty efekt:

See the Pen Animowanie filtrów by Robert Orliński (@ROrlilnski) on CodePen.

Podsumowanie.

Jak widać filtry w CSSie okazują się naprawdę potężnym narzędziem, które pozwala nam bardzo łatwo edytować grafiki, filmy oraz elementy iframe w sposób znany z prostych programów do obróbki zdjęć.

Oczywiście jeśli masz jakiekolwiek pytania lub sugestie, to zapraszam Cię do komentowania tego wpisu! 🙂

Programista zakochany w JavaScript’cie, twórca stron internetowych i jak widać od niedawna bloger 🙂

8 comments Add yours
    1. To prawda, z tego co pamiętam, to właśnie u Ciebie się o nim dowiedziałem. 😉

      Chociaż przymierzam się do tego co Ty uczyniłeś, a dokładnie napisania czegoś swojego. 😀

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *