Efekty filtrów CSS

Wstęp

Filtry są potężnym narzędziem, dzięki któremu autorzy treści internetowych mogą uzyskać interesujące efekty wizualne. W tym artykule omówimy historię efektów filtrów, ich funkcję i sposób korzystania z nich. Przedstawimy przykłady wszystkich filtrów zdefiniowanych w kodzie CSS, podając kilka przykładów. Omówimy też kwestie związane z wydajnością podczas używania filtrów na komputerach i urządzeniach mobilnych, ponieważ wpływ filtrów na szybkość działania ma duże znaczenie dla wygody użytkowników. Na koniec przypomnimy stan implementacji w nowoczesnych przeglądarkach.

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

Efekty filtrów pochodzą ze specyfikacji Scalable Vector Graphics (SVG). Powstały one w celu zastosowania szeregu różnych, opartych na pikselach efektów graficznych na rysunku wektorowym. W miarę jak dostawcy przeglądarek dodali do swoich przeglądarek funkcje SVG, użyteczność filtrów stała się oczywista. Robert O’Callahan z Mozilli wpadł na świetny pomysł na zastosowanie filtrów SVG przez zastosowanie CSS do „normalnych” treści HTML. Robert opracował prototyp wczesnej wersji, który pokazujeł, jak skuteczne może być połączenie filtrów i stylów CSS. W zespole W3C zespoły robocze ds. CSS i SVG postanowiły ujednolicić stosowanie filtrów zarówno do kodu HTML, jak i SVG za pomocą stylów CSS. W rezultacie powstała właściwość „filter” w przypadku CSS. W tej chwili wspólna grupa zadaniowa osób pracujących nad CSS i SVG pracuje nad zapewnieniem uniwersalności filtrów. Aktualną specyfikację tych wszystkich elementów znajdziesz tutaj.

Nowe życie właściwości CSS „filter”

Gdy Deja Vu widzi „filtr” w stylach CSS, czasami trafia na dewelopera stron internetowych. Wynika to z faktu, że starsze wersje Internet Explorera miały właściwość „filtr” udostępnianą za pośrednictwem CSS do wykonywania pewnych funkcji specyficznych dla platformy. Została wycofana i zastąpiona standardową właściwością „filter”, która jest teraz częścią CSS3. Jeśli zauważysz, że na starych stronach internetowych widzisz „filtrowanie”, nie musisz się bać. Nowa właściwość „filter” zawiera wszystkie działania. Nowe wersje IE implementują je tak samo jak wszystkie nowoczesne przeglądarki.

Jak działają filtry

Do czego dokładnie służy filtr? Najprostszy sposób, by wyobrazić sobie filtr, to taki etap przetwarzania posta, na którym po ułożeniu i wyciągnięciu całej zawartości strony robi się coś magicznego.

Po wczytaniu strony internetowej przeglądarka musi zastosować style, wykonać układ, a następnie wyrenderować stronę, aby było się czym przyjrzeć. Filtry uruchamiają się po wykonaniu tych wszystkich czynności i tuż przed skopiowaniem strony na ekran. Robią one obraz renderowanej strony jako obraz bitmapy, a następnie wykonuje magiczną grafikę na pikselach w zrzucie, a następnie rysuje wynik nad obrazem oryginalnej strony. Można je sobie wyobrazić jako filtr umieszczony na przedniej części obiektywu aparatu. To, co widzisz przez obiektyw, to świat zewnętrzny zmodyfikowany przez filtr.

Oznacza to oczywiście, że rysowanie strony z filtrami zajmuje dużo czasu, ale ich prawidłowe korzystanie z nich ma minimalny wpływ na szybkość działania witryny.

Podobnie jak w przypadku układania kilku różnych filtrów w obiektywie aparatu, możesz dodawać dowolną liczbę filtrów jeden po drugim, aby uzyskać różnego rodzaju efekty.

Filtry zdefiniowane za pomocą SVG i CSS

Filtry pochodzą z SVG, dlatego można je definiować i używać na różne sposoby. Plik SVG zawiera element <filter>, który kończy definicje różnych efektów filtrów za pomocą składni XML. Zestaw filtrów zdefiniowanych przez CSS korzysta z tego samego modelu graficznego, ale są to znacznie prostsze definicje, które są łatwe do zastosowania w arkuszu stylów.

Większość filtrów CSS można wyrażać w formie filtrów SVG. Poza tym CSS umożliwia też odwoływanie się do filtra określonego w SVG. Projektanci filtrów CSS włożyli wiele wysiłku w ułatwienie stosowania filtrów autorom stron internetowych. W tym artykule skupimy się tylko na filtrach dostępnych bezpośrednio w CSS, na razie z pominięciem definicji SVG.

Jak zastosować filtr CSS

Filtry z CSS polegają na użyciu właściwości „filter” zastosowanej do dowolnego widocznego elementu na stronie. Prostym przykładem może być wpisanie na przykład adresu

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

co sprawi, że zawartość wszystkich <div>elementów na stronie stanie się szara. Doskonale nadaje się do nadawania stronie wyglądu obrazu telewizyjnego z lat 40. XX wieku.

Większość filtrów ma formę parametrów, które kontrolują zakres filtrowania. Jeśli na przykład chcesz ustawić styl treści tak, aby był w połowie między kolorem oryginalnym a wersją w skali szarości, możesz to zrobić w następujący sposób:

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

Jeśli chcesz zastosować kilka różnych filtrów, wystarczy po prostu umieścić je w odpowiedniej kolejności w CSS w ten sposób:

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

W tym przykładzie wszystkie kolory oryginalnych kolorów zostaną użyte w skali szarości, a następnie zostanie zastosowany efekt sepii, co ostateczny rezultat będzie wyglądać tak:

Dzięki elastyczności stosowania filtrów jeden po drugim, można osiągnąć różnego rodzaju efekty – to od Twojej wyobraźni zależy, aby eksperymentować z niesamowitymi wynikami.

jakie efekty filtrów są dostępne w CSS,

Oryginalny mechanizm filtra SVG jest więc obiecujący, ale zarazem może sprawiać trudności w użyciu. Z tego powodu CSS wprowadza szereg standardowych efektów filtrów, które bardzo ułatwiają korzystanie z nich.

Przyjrzyjmy się bliżej każdemu z nich i sprawdźmy, do czego służy.

odcienie szarości(kwota)

Spowoduje to przekształcenie kolorów na obrazie w odcień szarości. Zastosowana kwota określa, w jakim stopniu ma być stosowana konwersja w kolorze szarym. Jeśli wartość wynosi 100%, wszystko jest w odcieniach szarości, a jeśli wynosi 0%, kolory pozostają bez zmian. Możesz tutaj użyć liczby zmiennoprzecinkowej, jeśli wolisz jej używać zamiast wartości procentowych. Oznacza to, że 0% działa tak samo jak 0%, a 1,0 – 100%.

sepia(kwota)

Dzięki temu kolory przekazywane w sepii będą wyglądać tak jak na starych zdjęciach. Zastosowana wartość „kwota” działa tak samo jak filtr „skala szarości” – 100% powoduje, że wszystkie kolory są całkowicie w odcieniach sepii, a mniejsze wartości można stosować w mniejszych proporcjach.

nasycenie(kwota)

Stosuje to efekt nasycenia kolorów, dzięki czemu stają się one bardziej żywe. To fajny efekt, dzięki któremu zdjęcia mogą wyglądać jak plakaty lub kreskówki.Ten efekt pozwala też użyć wartości większej niż 100%, aby naprawdę podkreślić nasycenie. Zdecydowanie efekt, który może sprawić, że rzeczy będą wyglądały odlotowo.

obrót barwy(kąt)

To mały efekt maniaka dzięki kolorom, który można wykorzystać do uzyskania interesujących wyników. Polega ono na przesuwaniu kolorów, dzięki czemu zdjęcie wejściowe wygląda zupełnie inaczej. Jeśli wyobrazisz sobie, że wokół koła kolorów zmienia się zakres kolorów od czerwonego do fioletowego, w wyniku tego efektu przyjmuje się oryginalny kolor z koła i obraca go na podstawie parametru „angle”, aby uzyskać kolor na kole, na który obrócił się jako wartość koloru wyjściowego. Dlatego wszystkie kolory na zdjęciu są przesuwane o ten sam „kąt” na kole. Jest to oczywiście uproszczenie, ale mam nadzieję, że brzmi na tyle dobrze, że będzie miało sens.

odwróć(kwota)

Ten efekt odwraca kolory, dzięki czemu po zastosowaniu „kwoty” wartość wynosi 100%, co sprawia, że zdjęcie wygląda jak negatyw, który wrócił do starych aparatów fotograficznych. Tak jak poprzednio, używanie wartości mniejszych niż 100% będzie stopniowo stosować efekt odwrócenia.

opacity(amount)

Jeśli chcesz, aby filtrowane treści wyglądały na półprzezroczyste, to właśnie jest rozwiązanie dla Ciebie. Wartość „amount” (kwota) określa nieprzezroczystość danych wyjściowych. Wartość 100% jest więc całkowicie nieprzezroczysta, więc dane wyjściowe będą dokładnie takie same jak dane wejściowe. Gdy wartość spadnie poniżej 100%, obraz wyjściowy stanie się mniej przezroczysty (bardziej przezroczysty) i będzie go coraz mniej. Oznacza to oczywiście, że jeśli nakłada się na coś innego na stronie, elementy znajdujące się pod spodem zaczną być widoczne. Wartość 0% oznacza, że element zniknie, ale pamiętaj, że zdarzenia takie jak kliknięcie myszą może się odbywać na całkowicie przezroczystych obiektach. Jest to przydatne, gdy chcesz utworzyć klikalne obszary bez pokazywania czegokolwiek.

Działa to tak samo jak właściwość „opacity”, którą już znasz. Zwykle właściwość „opacity” CSS nie jest wspomagana sprzętowo, ale niektóre przeglądarki, które stosują filtry za pomocą akceleracji sprzętowej, przyspieszają wersję przezroczystości filtra, co znacznie poprawia wydajność.

jasność(kwota)

Działa to tak samo jak regulacja jasności na telewizorze. Dostosowuje ono kolory całkowicie do czarnego lub oryginalnego proporcjonalnie do parametru „amount”. Jeśli ustawisz wartość 0%, zobaczysz wyłącznie czarny obraz, ale wraz ze wzrostem wartości do 100% oryginalny obraz będzie coraz bardziej rozjaśniany, aż do uzyskania 100% w miejscu, w którym obraz jest taki sam jak obraz wejściowy. Oczywiście możesz to zmienić, ale ustawienie wartości 200% sprawi, że zdjęcie będzie dwukrotnie jaśniejsze niż oryginał. To świetny sposób na skorygowanie słabo oświetlonych ujęć.

kontrast(kwota)

Więcej ustawień z telewizora. Spowoduje to dostosowanie różnicy między najciemniejszymi i najjaśniejszymi fragmentami zdjęcia wejściowego. Jeśli użyjesz 0%, uzyskasz czerń, tak jak z „jasnością”, więc nie będzie to zbyt interesujące. Jednak gdy podniesiesz tę wartość do 100%, różnica w ciemności będzie się zmieniać aż do uzyskania 100% i ponowne będzie zdjęcie oryginalne. W przypadku tego efektu możesz też przekroczyć wartość 100%, co jeszcze bardziej zwiększy różnicę między kolorami jasnymi i ciemnym.

rozmycie(promień)

Jeśli treści mają być delikatne, możesz zastosować rozmycie. Wygląda jak klasyczna wazelina na szklanej szklanej powierzchni, która dawniej była popularną techniką tworzenia filmów. Rozmazuje wszystkie kolory i rozmywa swój efekt, podobnie jak wtedy, gdy oczy nie są ostre. Parametr „promień” ma wpływ na liczbę pikseli na ekranie, które stapiają się ze sobą. Większa wartość powoduje większe rozmycie. 0 z nich oczywiście pozostawia obraz bez zmian.

drop-shadow(shadow)

To fajne, gdy możesz sprawić, że treści będą wyglądać tak, jakby były widoczne na słońcu, a są za nimi cień. Oczywiście na tym właśnie polega „cień”. Wykonuje zrzut ekranu, zmienia kolor na jeden kolor, zamazuje, a następnie odsuwa trochę wynik, przez co wygląda jak cień oryginalnej treści. Przekazywany parametr „shadow” jest nieco bardziej skomplikowany niż zwykła wartość. Jest to seria wartości rozdzielonych spacją, a niektóre wartości również są opcjonalne. Wartości „cień” określają, gdzie ma być padnięty cień, jaki jest jego poziom rozmycia, jaki jest kolor cienia itd. Szczegółowe informacje o tym, do czego służą wartości „cień”, znajdziesz w specyfikacji CSS3 Backgrounds (stron w języku CSS). Kilka poniższych przykładów powinno przybliżyć Wam możliwe możliwości.

To kolejna operacja filtra, która jest podobna do istniejących funkcji CSS dostępnych dzięki właściwości „box-shadow”. Zastosowanie filtra może spowodować, że niektóre przeglądarki otrzymają akcelerację sprzętową, jak opisano powyżej w przypadku operacji „przezroczystość”.

URL odwołujący się do filtrów SVG

Filtry pochodzą z SVG, dlatego logiczne, że możesz dostosowywać styl treści za pomocą filtra SVG. Jest to łatwe dzięki bieżącej ofercie właściwości „Filtruj”. Wszystkie filtry w SVG mają zdefiniowane atrybut „id”, którego można użyć do odwoływania się do efektu filtra. Aby więc użyć dowolnego filtra SVG z CSS, wystarczy, że odwołasz się do niego za pomocą składni „url”.

Na przykład znacznik SVG filtra może wyglądać tak:

<filter id="foo">...</filter>

Następnie w CSS możesz zrobić coś tak prostego, jak:

div { { % mixin filter: url(#foo); % } }

Gotowe! Styl wszystkich elementów <div> w dokumencie będzie zgodny z definicjami filtra SVG.

niestandardowy (już wkrótce)

Wkrótce pojawią się filtry niestandardowe. Wykorzystują one moc procesora graficznego i używają specjalnego języka cieniowania, aby uzyskać niesamowite efekty ograniczone tylko przez Twoją wyobraźnię. Ta część specyfikacji „filtra” jest wciąż rozważana i zmienia się, ale gdy tylko pojawi się ona w pobliskiej przeglądarce, z pewnością napiszemy więcej o możliwościach.

Możliwe spowolnienie działania witryny

Jedną z rzeczy każdego twórcy stron internetowych jest wydajność jego strony lub aplikacji. Filtry CSS to potężne narzędzie do tworzenia efektów wizualnych, ale z każdego z nich mogą wpływać na wydajność Twojej strony.

Wiedza o tym, jak one działają i jak wpływa to na skuteczność, ma duże znaczenie, zwłaszcza jeśli chcesz, by Twoja witryna dobrze działała na urządzeniach mobilnych, jeśli obsługują filtry CSS.

Po pierwsze, nie wszystkie filtry są sobie równe. Większość filtrów działa bardzo szybko na każdej platformie i ma bardzo niewielki wpływ na wydajność. Jednak filtry, które rozmywają jakiś rodzaj rozmycia, działają wolniej niż inne. Są to oczywiście „rozmycie” i „cień”. Nie oznacza to, że nie należy ich używać, ale warto wiedzieć, jak one działają.

Gdy wykonujesz polecenie blur, miesza się kolory z pikseli wokół piksela wyjściowego, tworząc wynik rozmycia. Powiedzmy, że parametr radius ma wartość 2, a żeby wygenerować mieszany kolor, filtr musi przyjrzeć się 2 pikselom w każdym kierunku wokół każdego piksela wyjściowego. Dzieje się tak w przypadku każdego piksela wyjściowego, więc oznacza to, że liczba obliczeń może być większa, gdy zwiększysz radius. blur szuka we wszystkich kierunkach, więc podwojenie promienia oznacza, że musisz przyjrzeć się 4 razy więcej pikseli. W rzeczywistości przy każdym podwojeniu radius działa 4 razy wolniej. Filtr drop-shadow zawiera ze względu na działanie filtr blur, więc zachowuje się tak samo jak blur po zmianie elementów radius i spread parametru shadow.

Nie wszystko stracone jest w blur, ponieważ na niektórych platformach można przyspieszyć proces za pomocą GPU, ale niekoniecznie jest to dostępne w każdej przeglądarce. W razie wątpliwości najlepiej jest poeksperymentować z „promieniem” zapewniającym oczekiwany efekt, a następnie ograniczyć je do największego możliwego poziomu przy zachowaniu akceptowalnego efektu wizualnego. Takie dostosowanie zwiększy zadowolenie użytkowników, zwłaszcza jeśli korzystają z Twojej witryny za pomocą telefonu.

Jeśli używasz filtrów opartych na url, które odwołują się do filtrów SVG, mogą one zawierać dowolne efekty filtrów, więc pamiętaj, że one również mogą być powolne. Sprawdź więc, jak działa ten efekt filtra, i poeksperymentuj na urządzeniu mobilnym, aby mieć pewność, że jego wydajność jest odpowiednia.

Dostępność w nowoczesnych przeglądarkach

Obecnie w przeglądarkach opartych na silniku WebKit i Mozilli dostępnych jest wiele efektów CSS filter. Planujemy wkrótce udostępnić je zarówno w Operze, jak i w IE10. Ponieważ specyfikacja jest nadal w fazie opracowywania, niektórzy dostawcy przeglądarek wdrożyli tę funkcję, korzystając z prefiksów dostawców. Dlatego w WebKit musisz używać -webkit-filter, a w Mozilla -moz-filter i zwracaj uwagę na inne implementacje przeglądarek, które się pojawią.

Nie wszystkie przeglądarki obsługują od razu wszystkie efekty filtrów, więc zasięg może być różny. Obecnie przeglądarka Mozilla obsługuje tylko funkcję filter: url() – bez prefiksu dostawcy, ponieważ ta implementacja wyprzedza inne funkcje efektów.

Poniżej przedstawiamy zestawienie efektów filtrów CSS dostępnych w różnych przeglądarkach wraz z przybliżonymi wskaźnikami wydajności ich implementacji w oprogramowaniu. Zwróć uwagę, że wiele nowoczesnych przeglądarek zaczyna je wdrażać na sprzęcie (z akceleracją GPU). Jeśli karty te są oparte na procesorach graficznych, ich wydajność znacznie się poprawi w przypadku wolniejszych efektów. Jak zwykle najlepiej ocenić wydajność, korzystając z różnych przeglądarek.

Efekt filtra	Obsługiwane przeglądarki	Występy
w skali szarości	Chrome	bardzo szybko
sepia	Chrome	bardzo szybko
nasycenie	Chrome	bardzo szybko
rotacja barw	Chrome	szybko renderowanych
odwróć	Chrome	bardzo szybko
opacity	Chrome	może działać wolno
jasność	Chrome	szybko renderowanych
kontrast	Chrome	szybko renderowanych
rozmycie	Chrome	wolne, chyba że przyspieszone
drop-shadow	Chrome	może działać wolno
url()	Chrome, Mozilla	Różne, szybkie i wolne

Inne przydatne materiały

Świetna aplikacja do interaktywnego malowania abstrakcyjnego z filtrami, która umożliwia eksperymentowanie i udostępnianie dzieł. Zajrzyj na świetną stronę z interaktywnym filtrem Erica Bidelmana Świetny samouczek na temat filtrów z przykładami Oficjalna specyfikacja robocza W3C Filtr Effects 1.0 http://dev.w3.org/fxtf/filters/ Przykład interfejsu użytkownika utworzonego z użyciem filtrów