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:
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
Brak komentarzy:
Prześlij komentarz