Wprowadzenie
Filtry to potężne narzędzie, które pozwala autorom stron internetowych tworzyć ciekawe efekty wizualne. Z tego artykułu dowiesz się, jaką historię mają efekty filtrów, do czego służą i jak z nich korzystać. Omówimy wszystkie wstępnie zdefiniowane filtry w usłudze porównywania cen, podając przykłady ich zastosowania. Omówimy też kwestie związane z wydajnością korzystania z filtrów na komputerach i urządzeniach mobilnych, ponieważ znajomość wpływu filtrów na szybkość ma duże znaczenie dla wygody użytkowników. Na koniec sprawdzimy, jak wygląda implementacja w nowoczesnych przeglądarkach.
Przeszłość, teraźniejszość i przyszłość efektów filtrów
Efekty filtra pochodzące ze specyfikacji Scalable Vector Graphics (SVG). Zostały one stworzone, aby stosować różne efekty obrazu oparte na pikselach do rysunku wektorowego. Z czasem, gdy dostawcy przeglądarek dodawali do swoich przeglądarek funkcje SVG, oczywista staje się użyteczność filtrów. Robert O’Callahan z Mozilla wpadł na świetny pomysł użycia filtrów SVG poprzez zastosowanie CSS do „zwykłych” treści HTML. Robert stworzył prototyp wczesnej wersji, który pokazał, jak potężna może być kombinacja filtrów i stylizacji CSS. Grupy robocze W3C dotyczące CSS i SVG postanowiły dostosować użycie filtrów w HTML i SVG za pomocą stylów CSS. W ten sposób powstała właściwość „filter” dla CSS. Obecnie zespół specjalistów zajmujących się CSS i SVG ciężko pracuje nad tym, aby filtry były przydatne dla wszystkich. Aktualną specyfikację tych wszystkich elementów znajdziesz tutaj.
Nowe życie właściwości CSS „filter”
Dewojaźnia może czasem uderzyć programistę stron internetowych, gdy zobaczy on „filtr” w stylach CSS. Dzieje się tak, ponieważ starsze wersje Internet Explorera miały w CSS-ie właściwość „filter” umożliwiającą wykonywanie niektórych funkcji specyficznych dla danej platformy. Ta funkcja została wycofana i zastąpiona standardową właściwością „filter”, która jest obecnie częścią CSS3. Kiedy natrafisz na „filtrowanie” na wolności na starszych stronach internetowych, nie musisz się niczym martwić. Nowa właściwość „filter” jest kluczowa, a nowe wersje Internet Explorera implementują ją tak samo jak wszystkie nowoczesne przeglądarki.
Jak działają filtry
Do czego więc służy filtr? Najprościej można sobie wyobrazić, że filtr jest etapem postprodukcji, który wykonuje coś magicznego po rozplanowaniu i narysowaniu wszystkich elementów strony.
Gdy przeglądarka wczytuje stronę internetową, musi zastosować style, wykonać układ, a potem wyrenderować stronę, aby można było ją zobaczyć. Filtry działają po wykonaniu wszystkich tych czynności i tuż przed skopiowaniem strony na ekran. Wykonują one zrzut ekranu wyrenderowanej strony jako obrazu bitmapowego, a następnie dokonują pewnych magicznych zmian w pikselach zrzutu i rysują wynik na wierzchu oryginalnego obrazu strony. Można je sobie wyobrazić jako filtr umieszczony z przodu obiektywu aparatu. To, co widzisz przez obiektyw, to świat zewnętrzny zmodyfikowany przez efekt filtra.
Oczywiście oznacza to czas poświęcany na rysowanie strony z filtrami, ale ich prawidłowe wykorzystanie ma minimalny wpływ na szybkość witryny.
Podobnie jak możesz ułożyć na sobie kilka filtrów na obiektywie aparatu, możesz też zastosować dowolną liczbę filtrów jeden po drugim, aby uzyskać różne efekty.
Filtry zdefiniowane za pomocą SVG i CSS
Filtry pochodzą pierwotnie z formatu SVG, więc można je definiować i stosować na różne sposoby. Sam format SVG zawiera element <filter>, który zawiera definicje różnych efektów filtra za pomocą składni XML. Zestaw filtrów zdefiniowanych przez CSS wykorzystuje ten sam model graficzny, ale są to dużo prostsze definicje, które można łatwo zastosować w arkuszu stylów.
Większość filtrów CSS można wyrazić w postaci filtrów SVG, a CSS pozwala odwoływać się do filtra określonego w SVG. Projektanci filtrów CSS dołożyli wszelkich starań, aby ułatwić autorom stron internetowych stosowanie filtrów. Dlatego w tym artykule omówimy tylko filtry dostępne bezpośrednio z CSS, pomijając na razie definicje SVG.
Jak zastosować filtr CSS
Filtry z CSS są stosowane przy użyciu właściwości „filter” zastosowanej do każdego widocznego elementu na stronie internetowej. W bardzo prostym przykładzie możesz napisać np.
div { { % mixin filter: grayscale(100%); % } }
Spowoduje to, że treść we wszystkich elementach <div> na stronie zmieni kolor na szary. To świetny sposób na nadanie stronie wyglądu obrazu z telewizora z lat 40. XX w.
Większość filtrów przyjmuje jakąś formę parametrów, które pozwalają kontrolować stopień filtrowania. Jeśli na przykład chcesz, aby kolory Twoich treści były na pół drogi między oryginalnym kolorem a wersją w szarościach, wykonaj te czynności:
div { { % mixin filter: grayscale(50%); % } }
Jeśli chcesz stosować kilka różnych filtrów jeden po drugim, wystarczy umieścić je w odpowiedniej kolejności w CSS:
div { { % mixin filter: grayscale(100%) sepia(100%); % } }
W tym przykładzie najpierw zmienimy wszystkie oryginalne kolory na skalę szarości, a potem zastosujemy efekt sepii. Efekt końcowy będzie wyglądał tak:
Dzięki możliwości stosowania filtrów jeden po drugim możesz uzyskać różne efekty – wszystko zależy od Twojej wyobraźni i chęci eksperymentowania z tworzeniem niesamowitych efektów.
Jakie efekty filtrów są dostępne za pomocą CSS
Pierwotny mechanizm filtra SVG jest potężny, ale jednocześnie może być trudny w użyciu. Dlatego CSS wprowadza kilka standardowych efektów filtrów, które ułatwiają ich używanie.
Przyjrzyjmy się im i spójrzmy, do czego służą.
- grayscale(amount)
- Spowoduje to zmianę koloru w obrazie do odcienia szarości. Zastosowana wartość „kwota” określa stopień szarości konwersji. Jeśli wartość wynosi 100%, wszystko będzie w odcieniach szarości, a jeśli 0%, kolory pozostaną bez zmian. Jeśli wolisz liczby zmiennoprzecinkowe zamiast procentów, możesz użyć takiej liczby. Wartość 0 działa tak samo jak 0%, a wartość 1.0 działa tak samo jak 100%.
- sepia(kwota)
- Kolory są przekształcane w odcienie sepii, jak w przypadku starych fotografii. Zastosowana wartość „kwota” działa tak samo jak filtr „skala szarości” – przy ustawieniu 100% wszystkie kolory są całkowicie w sepii, a mniejsze wartości umożliwiają uzyskanie efektu w mniejszych proporcjach.
- saturate(amount)
- Ta opcja powoduje zastosowanie efektu nasycenia kolorów, dzięki któremu będą one bardziej żywe. To świetny efekt, który sprawia, że zdjęcia wyglądają jak plakaty lub kreskówki.Ten efekt umożliwia także użycie wartości większej niż 100%, aby podkreślić nasycenie. To na pewno efekt, który może sprawić, że wszystko będzie wyglądać bardzo fajnie.
- odcień-obrót(kąt)
- Ten efekt jest przeznaczony dla osób, które interesują się kolorami. Może on dać ciekawe efekty. Funkcja ta polega na zmianie kolorów, dzięki czemu obraz wejściowy wygląda zupełnie inaczej. Jeśli wyobrażasz sobie widmo kolorów od czerwieni do fioletu na kolorowym kole, ten efekt przyjmuje jako dane wejściowe oryginalny kolor na kole i obraca go o parametr „kąt”, aby wygenerować kolor na kole, do którego został on obrócony, jako wartość wyjściową koloru. Wszystkie kolory na obrazie są przesunięte o ten sam „kąt” na kole. Jest to oczywiście uproszczenie, ale mam nadzieję, że wystarczająco zbliżone do rzeczywistości, aby miało sens.
- invert(amount)
- Ten efekt odwraca kolory, więc jeśli wartość „Amount” (Ilość) wynosi 100%, wynik będzie wyglądał jak negatyw z dawnych czasów filmowych aparatów. Podobnie jak wcześniej, użycie wartości niższych niż 100% spowoduje stopniowe odwrócenie obrazu.
- opacity(amount)
- Jeśli chcesz, aby filtrowane treści były półprzezroczyste, wybierz tę opcję. Wartość „amount” określa, jak bardzo nieprzejrzy będzie wynik. Wartość 100% jest całkowicie nieprzejrzysta, więc wynik będzie dokładnie taki sam jak dane wejściowe. Gdy wartość spadnie poniżej 100%, obraz wyjściowy stanie się mniej nieprzezroczysty (bardziej przezroczysty) i będzie coraz mniej widoczny. Oznacza to oczywiście, że jeśli coś na stronie nakłada się na obraz, elementy znajdujące się pod nim staną się widoczne. Wartość 0% oznacza, że element całkowicie zniknie. Pamiętaj jednak, że zdarzenia takie jak kliknięcie myszą mogą być nadal wykonywane w przypadku całkowicie przezroczystych obiektów. Jest to więc przydatne, gdy chcesz utworzyć klikalne obszary bez wyświetlania żadnych elementów.
Działa ona tak samo jak znana właściwość „przezroczystość”. Właściwość CSS „opacity” nie jest ogólnie przyspieszana sprzętowo, ale niektóre przeglądarki, które implementują filtry z akceleracją sprzętową, przyspieszą wersję filtra opacity, aby uzyskać znacznie lepszą wydajność.
- brightness(amount)
- To tak, jak sterowanie jasnością na telewizorze. Dostosowuje kolory między czernią a kolorami oryginalnymi proporcjonalnie do parametru „amount”. Jeśli ustawisz ten parametr na 0%, nie zobaczysz nic poza czernią, ale gdy wartość wzrośnie do 100%, zobaczysz coraz więcej szczegółów oryginalnego obrazu, aż do 100%, gdzie będzie on taki sam jak obraz wejściowy. Oczywiście możesz zwiększyć wartość jeszcze bardziej – ustawienie 200% spowoduje, że obraz będzie dwa razy jaśniejszy niż oryginalny. To świetne rozwiązanie do dostosowywania zdjęć zrobionych w słabym oświetleniu.
- contrast(amount)
- Więcej opcji sterowania telewizorem Spowoduje to dostosowanie różnicy między najciemniejszymi a najjaśniejszymi częściami obrazu wejściowego. Jeśli ustawisz 0%, uzyskasz czarny kolor, tak jak w przypadku „jasności”, więc nie będzie to zbyt interesujące. Jednak w miarę zwiększania wartości do 100% różnica w ciemności zmienia się, aż do osiągnięcia 100%, po czym obraz wraca do pierwotnego stanu. Możesz też zwiększyć ten efekt ponad 100%, co jeszcze bardziej zwiększy różnicę między jasnymi i ciemnymi kolorami.
- rozmycie(promień)
- Jeśli chcesz, aby treści były bardziej miękkie, możesz zastosować rozmycie. Wygląda jak klasyczny efekt wazeliny na szkle, który był kiedyś popularną techniką filmową. Wymazuje wszystkie kolory i rozprasza ich efekty – trochę tak, jak gdy oczy są rozmyte. Parametr „radius” wpływa na to, ile pikseli na ekranie będzie ze sobą łączyć się, więc im większa wartość, tym większe rozmycie. Wartość zero pozostawia obraz bez zmian.
- cień(cień)
- To bardzo przyjemne, że można sprawić, by treści wyglądały jakby były nakręcone na zewnątrz w słonecznym dniu, z cieniem na ziemi za obiektem. Dokładnie to robi efekt „drop-shadow”. Wykonuje zrzut obrazu, przekształca go w jeden kolor, rozmazuje, a następnie przesuwa nieco w stronę, aby wyglądał jak cień oryginalnej treści. Parametr „shadow” jest nieco bardziej skomplikowany niż pojedyncza wartość. Jest to seria wartości rozdzielonych spacjami, a niektóre z nich są też opcjonalne. Wartości „shadow” określają, gdzie ma być umieszczony cień, jak bardzo ma być rozmyty, jaki ma mieć kolor itp. Szczegółowe informacje o tym, co robią wartości „shadow”, znajdziesz w specyfikacji CSS3 Backgrounds, która szczegółowo definiuje atrybuty „box-shadow”. Kilka poniższych przykładów daje dobre pojęcie o różnych możliwościach.
Jest to kolejna operacja filtra, która jest podobna do dotychczasowej funkcji CSS dostępnej za pomocą właściwości „box-shadow”. Filtrowanie oznacza, że niektóre przeglądarki mogą stosować akcelerację sprzętową, tak jak w przypadku operacji „przezroczystość” opisanej powyżej.
- adres URL odwołujący się do filtrów SVG
- Filtry wywodzą się z SVG, dlatego logiczne jest możliwość określenia stylu treści przy użyciu filtra SVG. Jest to proste dzięki obecnej propozycji właściwości „filtr”. Wszystkie filtry w SVG są definiowane za pomocą atrybutu „id”, który może służyć do odwołania się do efektu filtra. Aby użyć dowolnego filtra SVG z CSS, wystarczy odwołać się do niego za pomocą składni „url”.
Na przykład znaczniki SVG filtra mogą wyglądać tak:
<filter id="foo">...</filter>
W CSS możesz zrobić coś tak prostego jak:
div { { % mixin filter: url(#foo); % } }
i voila! Wszystkie elementy <div> w dokumencie zostaną sformatowane za pomocą definicji filtra SVG.
- niestandardowy (już wkrótce)
- Wkrótce udostępnimy filtry niestandardowe. Wykorzystują one moc karty graficznej, aby używać specjalnego języka cieniowania do tworzenia niesamowitych efektów ograniczonych tylko przez Twoją wyobraźnię. Ta część specyfikacji „filtra” jest wciąż przedmiotem dyskusji i wciąż się zmienia, ale gdy tylko zacznie się pojawiać w Twojej przeglądarce, na pewno napiszemy więcej o możliwościach.
Możliwe spowolnienie działania witryny
Każdy web developer zwraca uwagę na wydajność swojej strony internetowej lub aplikacji. Filtry CSS to potężne narzędzie do tworzenia efektów wizualnych, ale jednocześnie mogą mieć wpływ na wydajność witryny.
Warto wiedzieć, jak działają i jak wpływają na wydajność, zwłaszcza jeśli chcesz, aby Twoja witryna działała dobrze na urządzeniach mobilnych, które obsługują filtry CSS.
Po pierwsze, nie wszystkie filtry są sobie równe. W rzeczywistości większość filtrów działa bardzo szybko na każdej platformie i ma bardzo niewielki wpływ na ich wydajność. Jednak filtry, które powodują jakiekolwiek rozmycie, działają zwykle wolniej niż inne. Dotyczy to oczywiście rozmycia i cieni. Nie oznacza to, że nie należy ich używać, ale zrozumienie, jak działają, może być pomocne.
Gdy wykonasz operację blur, spowoduje to zmieszanie kolorów z pikseli wokół piksela wyjściowego, co spowoduje rozmycie. Jeśli więc parametr radius ma wartość 2, filtr musi uwzględnić 2 piksele we wszystkich kierunkach wokół każdego piksela wyjściowego, aby wygenerować mieszany kolor. Dzieje się tak w przypadku każdego piksela wyjściowego, co oznacza dużą liczbę obliczeń, które zwiększają się wraz ze wzrostem wartości radius. Ponieważ blur patrzy we wszystkich kierunkach, podwojenie „promienia” oznacza, że musisz wziąć pod uwagę 4 razy więcej pikseli, więc w rzeczywistości jest to 4 razy wolniej przy każdym podwojeniu radius. Filtr drop-shadow zawiera teraz element blur, więc po zmianie części radius i spread parametru shadow działa on tak samo jak blur.
Nie wszystko stracone w przypadku blur, ponieważ na niektórych platformach można użyć procesora graficznego, aby przyspieszyć działanie, ale nie jest to koniecznie dostępne w każdej przeglądarce. W razie wątpliwości najlepiej jest poeksperymentować z „promieniem”, który zapewnia pożądany efekt, a następnie spróbować jak najdokładniej go ograniczyć, zachowując jednocześnie akceptowalny efekt wizualny. Dzięki temu użytkownicy będą zadowoleni, zwłaszcza jeśli korzystają z Twojej witryny na telefonie.
Jeśli używasz filtrów opartych na url, które odwołują się do filtrów SVG, mogą one zawierać dowolny efekt filtra, więc pamiętaj, że mogą być one również powolne. Upewnij się, że wiesz, do czego służy dany efekt filtra, i przetestuj go na urządzeniu mobilnym, aby sprawdzić, czy działa prawidłowo.
Dostępność w nowoczesnych przeglądarkach
Obecnie udostępniamy kilka efektów CSS filter w przeglądarkach opartych na WebKit i Mozilla. Oczekujemy, że wkrótce pojawią się one w przeglądarce Opera i Internet Explorer 10. Specyfikacja jest wciąż opracowywana, dlatego niektórzy dostawcy przeglądarek wdrožili te funkcje, używając prefiksów dostawców. W WebKit musisz użyć -webkit-filter, a w Mozilla – -moz-filter. Zwróć też uwagę na inne implementacje przeglądarek, gdy się pojawią.
Nie wszystkie przeglądarki od razu obsługują wszystkie efekty filtra, więc efekty mogą się różnić. Obecnie przeglądarka Mozilla obsługuje tylko funkcję filter: url() – bez prefiksu dostawcy, ponieważ ta implementacja sprzed obecnie innych funkcji efektów.
Poniżej przedstawiamy podsumowanie efektów filtrów CSS dostępnych w różnych przeglądarkach wraz z przybliżonymi wskaźnikami wydajności w przypadku ich implementacji w oprogramowaniu. Pamiętaj, że wiele nowoczesnych przeglądarek zaczyna wdrażać te funkcje na sprzęcie (z przyspieszeniem GPU). Gdy zostaną one utworzone z obsługą GPU, wydajność w przypadku wolniejszych efektów znacznie się poprawi. Jak zwykle najlepszym sposobem oceny skuteczności jest testowanie w różnych przeglądarkach.
| Efekt filtra | Obsługa przeglądarek | Wyniki |
|---|---|---|
| tryb szarości | Chrome | bardzo szybko |
| sepia | Chrome | bardzo szybko |
| nasycenie | Chrome | bardzo szybko |
| hue-rotate | Chrome | szybko |
| odwróć | Chrome | bardzo szybko |
| opacity | Chrome | może być wolny |
| jasność | Chrome | szybko |
| kontrast | Chrome | szybko |
| rozmycie | Chrome | wolno bez przyspieszenia |
| cień | Chrome | Może działać wolno |
| url(). | Chrome, Mozilla | Różne, od szybkiego do wolnego |
Inne przydatne materiały
Niesamowita aplikacja interaktywna abstrakcja z filtrami, która pozwala eksperymentować i udostępniać swoje prace. Koniecznie zajrzyj na świetną stronę interaktywne filtry Erica Bidelmana. Znajdziesz tam samouczek o filtrach z przykładami. Oficjalna specyfikacja W3C Filter Effects 1.0 http://dev.w3.org/fxtf/filters/. Przykład interfejsu użytkownika utworzonego za pomocą filtrów.