Filtry CSS - moc Photoshopa w Twojej przeglądarce

Coś, co jeszcze niedawno było czystą teorią, fantazją rozmarzonego front-end developera, trafiło kilka dni temu do testowych wersji silnika przeglądarek WebKit. Dzięki filtrom CSS zyskujemy jeszcze więcej możliwości manipulacji obrazami bez potrzeby uruchamiania Photoshopa, co sprawdza się nieźle chociażby w przypadku box-reflect. Zobaczmy więc czym są te filtry i jak z nich skorzystać.

Specyfikacja Filter Effects 1.0 została opublikowana niedawno, bo 16 grudnia 2011 roku, ale już teraz można testować jej implementację dzięki szybkim działaniom programistów - najnowsze kompilacje przeglądarek wyposażone w silnik WebKit (WebKit Nightly dla Safari, Chrome Canary) wspierają filtry CSS. Nad projektem czuwają osoby z takich firm, jak Adobe, Apple czy Opera. Co prawda same filtry nie są nowe, ale do tej pory dotyczyły głównie SVG - Firefox wspiera filtry SVG już od wersji 3.6, a oto i przykłady (dzięki marcoos). Poniższa implementacja natomiast może być używana w stosunku do dowolnie wybranego elementu struktury DOM: nie tylko obrazków, ale na przykład elementów canvas czy video. Ciężko określić także przynależność tej specyfikacji do większej struktury CSS - zbioru CSS3 lub najnowszego CSS4, ponieważ szkic dokumentu powstał od zera i nosi numer 1.0.

Filtry

Ok, tyle wstępu, zajmijmy się teraz szczegółowo możliwościami samych filtrów. Ponieważ jest to funkcjonalność eksperymentalna, do poprawnego działania należy pamiętać o odpowiednim przedrostku -webkit-. Poniższe fragmenty kodu, tak jak pisałem wcześniej, w tym momencie (dzień publikacji wpisu) działają tylko w WebKit Nighty i Chrome Canary. Do testów użyjemy logo CSS4.

img { -webkit-filter: nazwa(parametry); }

Wszystkie nasze style CSS będziemy konstruować według powyższego wzoru.

Grayscale

Teraz dzięki grayscale możemy zmienić dowolny obrazek (a także inne elementy) w jego odcień szarości bez ingrencji w sam plik graficzny. Wystarczy nadać mu poniższy styl, by stracił wszystkie kolory na rzecz szarości:

img { -webkit-filter: grayscale(100%); }

Można oczywiście odpowiednio stopniować ten efekt - np. w animacji przejścia z szarego obrazka w kolorowy po najechaniu na niego kursorem myszy.

Blur

Rozmycie to kolejny bardzo przydatny efekt, który definiujemy za pomocą pikseli oznaczających promień działania:

img { -webkit-filter: blur(5px); }

Od teraz każdy może się dowiedzieć jak wygląda Twoja strona dla kogoś, kto zapomniał okularów.

Sepia

Efekt znany dobrze grafikom z ich narzędzi, dzięki któremu uzyskamy sepię jak na poniższym obrazku.

img { -webkit-filter: sepia(100%); }

Tak jak w przypadku grayscale, wartości mieszczą się w przedziale od 0% (brak efektu) do 100% (sepia).

Hue-rotate

Następny efekt wykorzystywany np. w Photoshopie to hue-rotate, którym zmienimy odcień palety kolorów:

img { -webkit-filter: hue-rotate(90deg); }

Wartości obrotu wyrażamy w stopniach. Dla powyższego przykładu 30deg zmieni kolor z niebieskiego na różowy.

Saturate

Kolejny ciekawy efekt możemy uzyskać za pomocą saturate, które steruje nasyceniem barw:

img { -webkit-filter: saturate(300%); }

Dzięki temu obrazek po prawej otrzymał trzykrotnie większe wartości nasycenia palety barw.

Brightness

Ten filtr odpowiada za ustawienie jasności danego elementu:

img { -webkit-filter: brightness(50%); }

Widoczny po prawej obrazek zmodyfikowany za pomocą filtra brightness jest o połowę ciemniejszy od oryginału.

Contrast

Kolejna dobroć Photoshopa i innych edytorów graficznych, czyli możliwość edycji kontrastu:

img { -webkit-filter: contrast(300%); }

W tym przypadku kontrast tego obrazka został zwiększony dokładnie trzykrotnie.

Invert

Znany z Maca (Ctrl + Alt + Cmd + 8) efekt odwrócenia kolorów:

img { -webkit-filter: invert(100%); }

Dzięki niemu możemy uzyskać efekt przełączania się między trybem "dziennym" i "nocnym" elementu, lub całej strony.

Drop-shadow

Rzucanie cienia może wydawać się zbędnym filtrem, skoro do dyspozycji mamy box-shadow, jednak nie są one identyczne, co zobaczyć można w dabblecie autorstwa Lea Verou.

Zobacz demo

Wszystkie powyższe efekty można zobaczyć w akcji na stronie demonstracyjnej, należy oczywiście pamiętać o ściągnięciu i użyciu obsługującej to przeglądarki, np. Chrome Canary.

Podsumowanie

Nie wiem jak wy, ale ja już nie mogę się doczekać czasów, kiedy filtry zostaną wprowadzone do innych przeglądarek i będzie można z nich korzystać w realizowanych projektach. CSS dostaje coraz więcej mocy, przejmuje efekty do tej pory możliwe do zrobienia jedynie w Photoshopie lub dzięki skryptom Javascript i niedługo może mieć więcej z programowania niż mogłoby się wielu wydawać.