Filtry w CSS3

CSS3 wprowadza spore możliwosci co do definiowania wyglądu elementów. Jedną z nowości są filtry, które pozwalają tworzyć różne transformacje. Wsród predefiniowanych filtrów znajdują się m.in. skala szarości, blur, sepia czy odwracanie kolorów. Dzieki temu możemy oszczedzić sporo czasu (np. poprzez dodanie filtrów do obrazków po stronie klienta, bez konieczności używania elementu canvas).

Niestety CSS3 Filters nie są jeszcze tak popularne jak <canvas> (w sumie to cieżko tu mówić o popularności skoro na dzień dzisiejszy są jedynie dostępne pod Chrome Canary Release), ale miejmy nadzieję, ze wkrótce będziemy mogli z nich swobodnie korzystać.

Oto predefiniowane wartości dla parametru filter (a w sumie -webkit-filter, pozostałe przeglądarki nie obsługują filtrów w HTMLu a jedynie w SVG). Po prawej obrazki z nadanym filtrem na oryginalne zdjęcie, po lewej zapisane ze zrzutu z ekranu:

grayscale (amount)

<img src="img.png" style="-webkit-filter: grayscale(1); filter: grayscale(1);" />

sepia (amount)

<img src="img.png" style="-webkit-filter: sepia(1); filter: sepia(1);" />

saturate (amount)

<img src="img.png" style="-webkit-filter: saturate(10); filter: saturate(10);" />

hue-rotate(amount deg)

<img src="img.png" style="-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);" />

invert (amount)

<img src="img.png" style="-webkit-filter: invert(1); filter: invert(1);" />

opacity (amount)

<img src="img.png" style="-webkit-filter: opacity(0.5); filter: opacity(0.5);" />

contrast (amount)

<img src="img.png" style="-webkit-filter: contrast(2); filter: contrast(2);" />

blur(radius px)

<img src="img.png" style="-webkit-filter: blur(1px); filter: blur(1px);" />

Warto wspomnieć, że to dopiero początek całego zamieszania związanego z filtrami. W planach jest rozszerzenie filtrów o animacje (poprzez transitions) oraz definiowanie własnych shaderów! Dzięki temu bedzie mozna deformować obiekty na stronie na wszystkie możliwe sposoby. A wszystko to zawdzięczamy pomysłodawcy - Adobe!

Przydatne linki:

• draft specyfikacji: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
• artykuł o shaderach: http://www.adobe.com/devnet/html5/articles/css-shaders.html