É engraçado como o CSS está evoluindo, tanto para possibilidade de utilizar variáveis CSS4 que o Zeno Rocha apresentou aqui, ou utilizando o Módulo Template já citado no Tableless pelo Diego Eis e MUITO mais! Assim, achei interessante mostrar uma outra novidade bem interessante sobre o novo CSS, o atributo FILTER.
O atributo FILTER faz parte do rascunho no W3C proposto pela Adobe. A ideia é simples(até parece!): começar a vincular CSS com SVG a fim de controlar o estilo, a aparência e as animações mais complexas.
Não! Eu não vou falar sobre as manipulações de vértice do CSS Shader
Eu não vou explicar o que é o CSS shaders, pois ainda está bastante no começo, mas o principal motivo é uma percepção que estou tendo (e sobre a qual espero muito estar enganado).
A Adobe está incentivando a aprovação do CSS shader por parte do W3C e de fato tem muita coisa interessante na linguagem, porém, os exemplos dos shaders (ondulados, com animação, 3D etc.) são dependentes de arquivos que fazem isso ser possível. Fui procurar esses arquivos para ver qual a dificuldade para criá-los e a complexidade é grande, o que não acredito que seja interessante a codificação do 0, sem a utilização de frameworks, biblioteca ou ferramenta para isso. Daí eu descubro que a Adobe tem uma ferramenta para isso, o que me fez ficar confuso quanto a sensações, primeiramente “impressionante! Eles criaram uma ferramenta sensacional que eu manipulo e já me retorna o arquivo .vs ou o que for dos vértices já mapeados” e depois “Então eu precisarei de uma ferramenta para trabalhar com isso? Será que podemos considerar isso uma evolução?”. Sobre essa discussão, termino com o pensamento: Agora que o flash perdeu força e ficamos independentes da Adobe, será que ela não quer nos colocar na gaiola novamente? Não digo que sim, nem que não, apenas levanto a discussão enquanto mostro algumas telas da suíte.
Filters!
Primeiramente, NÃO, você não pode já utilizá-lo em seus projetos, o mesmo só funciona no CHROMIUM (20+) e é dependente do prefixo -webkit-. Você pode consultar o “Can I use” para acompanhar a aceitação do Filter.
Os atributos são simples, fiz 5 exemplos para mostrar para vocês como eles funcionam:
- filter: hue-rotate(328deg);
- filter: blur(15px)
- filter: saturate(20)
- filter: invert(1)
- filter: sepia(1)
A velocidade dos efeitos SVG é tão rápida que impressiona, até mesmo para o INVERT e o SEPIA que vai do 0 a 1.
Então, fiz uma brincadeira criando animações com esses atributos em cima de uma imagem de fundo (minha no palco do #BrazilJS) e, como só funciona no Chromium, gravei um screencast para vocês assistirem.
Vi o @renatomangini junto com o @luisleao controlando as luzes do auditório com javascript e DMX. Meus amigos, eu faço isso só com CSS (pelo menos via browser :p).
Segue o código HTML:
<div class="sample-item hue-bernard"></div><div class="sample-item blur-bernard"></div><div class="sample-item saturate-bernard"></div><div class="sample-item invert-bernard"></div><div class="sample-item sepia-bernard"></div>Fiz uma animaçãozinha CSS junto com os Filters para vocês ficarem tão arrepiados quanto eu fiquei com a qualidade, segue o código CSS:
* {padding:0;margin:0; list-style:0;border:0;}.sample-item{ position:relative; margin: 20px; float:left; width:400px; height:400px; background: #333 url("http://bernarddeluna.com/wp-content/uploads/2012/09/551954_410427025687103_2021880040_n1.jpg"
) no-repeat;}.hue-bernard { -webkit-filter: hue-rotate(328deg); -webkit-animation: hue 3s infinite; -moz-animation: hue 3s infinite; -o-animation: hue 3s infinite; animation: hue 3s infinite;}@-webkit-keyframes hue { 0% { -webkit-filter: hue-rotate(1deg); } 100% { -webkit-filter: hue-rotate(359deg); }}@-moz-keyframes hue { 0% { -webkit-filter: hue-rotate(1deg); } 100% { -webkit-filter: hue-rotate(359deg); }}@-o-keyframes hue { 0% { -webkit-filter: hue-rotate(1deg); } 100% { -webkit-filter: hue-rotate(359deg); }}@keyframes hue { 0% { -webkit-filter: hue-rotate(1deg); } 100% { -webkit-filter: hue-rotate(359deg); }}.blur-bernard{ -webkit-filter: blur(15px); -webkit-animation: blur 3s infinite; -moz-animation: blur 3s infinite; -o-animation: blur 3s infinite; animation: blur 3s infinite;}@-webkit-keyframes blur { 0%, 100% { -webkit-filter: blur(0); } 50% { -webkit-filter: blur(15px); }}@-moz-keyframes blur { 0%, 100% { -webkit-filter: blur(0); } 50% { -webkit-filter: blur(15px); }}@-o-keyframes blur { 0%, 100% { -webkit-filter: blur(0); } 50% { -webkit-filter: blur(15px); }}@keyframes blur { 0%, 100% { -webkit-filter: blur(0); } 50% { -webkit-filter: blur(15px); }}.saturate-bernard{ -webkit-filter: saturate(20); -webkit-animation: saturate 3s infinite; -moz-animation: saturate 3s infinite; -o-animation: saturate 3s infinite; animation: saturate 3s infinite;}@-webkit-keyframes saturate { 0%, 100% { -webkit-filter: saturate(0); } 50% { -webkit-filter: saturate(20); }}@-moz-keyframes saturate { 0%, 100% { -webkit-filter: saturate(0); } 50% { -webkit-filter: saturate(20); }}@-o-keyframes saturate { 0%, 100% { -webkit-filter: saturate(0); } 50% { -webkit-filter: saturate(20); }}@keyframes saturate { 0%, 100% { -webkit-filter: saturate(0); } 50% { -webkit-filter: saturate(20); }}.invert-bernard{ -webkit-filter: invert(1); -webkit-animation: invert 3s infinite; -moz-animation: invert 3s infinite; -o-animation: invert 3s infinite; animation: invert 3s infinite;}@-webkit-keyframes invert { 0% , 100% { -webkit-filter: invert(0); } 50% { -webkit-filter: invert(1); }}@-moz-keyframes hue { 0%, 100% { -webkit-filter: invert(0); } 50% { -webkit-filter: invert(1); }}@-o-keyframes hue { 0% , 100% { -webkit-filter: invert(0); } 50% { -webkit-filter: invert(1); }}@keyframes hue { 0% , 100% { -webkit-filter: invert(0); } 50% { -webkit-filter: invert(1); }}.sepia-bernard{ -webkit-filter: sepia(1); -webkit-animation: sepia 3s infinite; -moz-animation: sepia 3s infinite; -o-animation: sepia 3s infinite; animation: sepia 3s infinite;}@-webkit-keyframes sepia { 0% , 100% { -webkit-filter: sepia(0); } 50% { -webkit-filter: sepia(1); }}@-moz-keyframes hue { 0%, 100% { -webkit-filter: sepia(0); } 50% { -webkit-filter: sepia(1); }}@-o-keyframes hue { 0% , 100% { -webkit-filter: sepia(0); } 50% { -webkit-filter: sepia(1); }}@keyframes hue { 0% , 100% { -webkit-filter: sepia(0); } 50% { -webkit-filter: sepia(1); }}Espero que gostem e não se esqueçam: usem com moderação!
Esta é a imagem que eu utilizei:
Segue o vídeo mostrando o resultado:
De 0 a 10, o quanto você recomendaria este artigo para um amigo?