Ta strona została przetłumaczona przez Cloud Translation API.

Efekty filtrów CSS

Alex Danilo

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 wydajności podczas korzystania z nich na komputerach i urządzeniach mobilnych, ponieważ znajomość wpływu filtrów na szybkość działania jest ważna dla zapewnienia użytkownikom wygody. Na koniec sprawdzimy obecny stan implementacji w nowoczesnych przeglądarkach.

Przeszłość, teraźniejszość i przyszłość efektów filtrów

Efekty filtra powstały w ramach specyfikacji skalowalnej grafiki wektorowej (SVG). Zostały one stworzone, aby stosować różne efekty obrazu oparte na pikselach do rysunku wektorowego. Z czasem, gdy dostawcy przeglądarek dodali do nich obsługę SVG, użyteczność filtrów stała się oczywista. 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 zharmonizować użycie filtrów w HTML i SVG za pomocą stylizacji 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ę, 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. Zostało ono wycofane na rzecz standardowej właściwości „filter”, która jest teraz częścią CSS3. Gdy więc zobaczysz „filtr” na starych stronach internetowych, nie musisz się z tego powodu zdezorientować. 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

Jak działa 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 porównać do filtra umieszczonego na obiektywie aparatu. To, co widzisz przez obiektyw, to świat zewnętrzny zmodyfikowany przez efekt filtra.

Oznacza to oczywiście, że wyświetlanie strony z filtrami zajmuje pewien czas, ale ich prawidłowe używanie będzie miało minimalny wpływ na szybkość witryny.

Podobnie jak możesz ułożyć na siebie 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 istnieją różne sposoby ich definiowania i używania. Sam format SVG zawiera element <filter>, który zawiera definicje różnych efektów filtra za pomocą składni XML. Zbiór filtrów zdefiniowanych za pomocą CSS korzysta z tego samego modelu graficznego, ale są to znacznie prostsze definicje, które łatwo zastosować w arkuszu stylów.

Większość filtrów CSS można zastąpić filtrami SVG, a CSS umożliwia też odwołanie 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 w CSS, pomijając na razie definicje SVG.

Jak zastosować filtr CSS

Filtry z CSS są używane za pomocą właściwości „filter” zastosowanych do dowolnego widocznego elementu w witrynie. W bardzo prostym przykładzie możesz napisać coś takiego:

div { { % mixin filter: grayscale(100%); % } }

Spowoduje to, że treść we wszystkich elementach <div> na stronie stanie się szara. To świetny sposób na nadanie stronie wyglądu obrazu z telewizora z lat 40. XX w.

Obraz w skali szarości. — Obraz w trybie szarości.

Większość filtrów wymaga ustawienia pewnych parametrów, aby kontrolować, jak bardzo ma być przeprowadzone odfiltrowywanie. 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%); % } }

Oryginalny obraz powyżej, ale z filtrem 50% szarości. — Obraz oryginalny powyżej, ale z filtrem 50% szarości.

Jeśli chcesz zastosować kilka różnych filtrów jeden po drugim, wystarczy umieścić je w kolejności w CSS, np.:

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): To spowoduje przekształcenie koloru na obrazie wejściowym w szarość. Zastosowana „ilość” określa, w jak dużym stopniu ma być stosowana konwersja szara. 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 ich użyć. Wartość 0 działa tak samo jak 0%, a wartość 1.0 działa tak samo jak 100%.

tryb szarości(100%), — Skala szarości(100%)

sepia(amount): To powoduje, że kolory są wyświetlane w odcieniach sepii, jak w przypadku starych fotografii. Zastosowanie „ilości” działa tak samo jak w przypadku filtra „szarość”. Wartość 100% sprawia, że wszystkie kolory są całkowicie w tonacji sepii, a mniejsze wartości pozwalają na zastosowanie efektu w mniejszych proporcjach.

saturate(amount): Ta opcja powoduje zastosowanie efektu nasycenia kolorów, dzięki któremu będą one bardziej żywe. To fajny efekt, który może sprawić, że zdjęcia będą wyglądać jak plakaty lub kreskówki.Ten efekt pozwala też użyć wartości większej niż 100%, aby naprawdę podkreślić nasycenie. To na pewno efekt, który może sprawić, że wszystko będzie wyglądać dość dziwnie.

hue-rotate(angle): Ten efekt jest przeznaczony dla osób, które interesują się kolorami. Może on dać ciekawe efekty. Przesuwa ona kolory, aby 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 było zrozumiałe.

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 efektu.

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. „Ilość” 0% oznacza, że obiekt całkowicie zniknie. Pamiętaj jednak, że w przypadku całkowicie przezroczystych obiektów nadal mogą występować zdarzenia takie jak kliknięcia myszką. Jest to przydatne, jeśli chcesz tworzyć obszary klikalne bez wyświetlania czegokolwiek.

Działa ona tak samo jak już znana Ci właściwość „opacity”. 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 całkowicie czarnym a oryginalnym kolorem 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ć ten współczynnik – ustawienie go na przykład na 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 niezbyt ciekawie. 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 uzyskać efekt rozmycia brzegów, możesz dodać 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.

rozmycie(10 piks.) — Rozmycie(10 pikseli)

drop-shadow(shadow): 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ą 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 przykładów poniżej powinno pomóc Ci w poznaniu różnych możliwości.

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: Ponieważ filtry powstały jako część formatu SVG, logiczne jest, że możesz stylizować swoje treści za pomocą 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ływania 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.

niestandardowe (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 zasadzie większość filtrów działa bardzo szybko na każdej platformie i ma niewielki wpływ na wydajność. Filtry, które powodują rozmazywanie, są jednak zwykle wolniejsze od innych. Chodzi oczywiście o rozmycie i cieniowanie. Nie oznacza to, że nie należy ich używać, ale zrozumienie ich działania może być pomocne.

Gdy wykonasz operację blur, miesza ona kolory pikseli wokół piksela wyjściowego, aby uzyskać rozmyty efekt. 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 trzeba wziąć pod uwagę 4 razy więcej pikseli, więc w rzeczywistości jest to 4 razy wolniejsze przy każdym podwojeniu radius. Filtr drop-shadow zawiera element blur, więc zachowuje się tak samo jak blur, gdy zmieniasz części radius i spread parametru shadow.

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 możliwe w każdej przeglądarce. W wątpliwych przypadkach najlepiej jest eksperymentować z „promieniem”, aby uzyskać pożądany efekt, a potem spróbować go zmniejszyć, 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 jest starsza od 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 na ocenę 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, chyba że przyspieszone
cień	Chrome	może być wolny
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. Sprawdź świetną stronę interaktywne filtry Erica Bidelmana. Świetły samouczek o filtrach z przykładami. Oficjalna specyfikacja W3C Filter Effects 1.0 http://dev.w3.org/fxtf/filters/. Przykładowe UI utworzone za pomocą filtrów.