En Octubre del 2011, Adobe propuso CSS Shaders como una forma de traer efectos cinematográficos a la web. Efectos como saturation, gamma, burn, fold, curl e incluso dissolve y explode podrían aplicarse con CSS a los elementos HTML normales. Esa propuesta ha evolucionado. Se ha debatido abiertamente, actualizado y finalmente se fusionó con la especificación de Efectos de Filtro CSS. Ahora está en camino a un navegador para estar cerca de ti. CSS Shaders ahora lleva el nombre de Filtros Personalizados CSS, que son igual de expresivos.
CSS FilterLab
CSS FilterLab es una herramienta basada en el navegador que te permite jugar con los filtros CSS, modificarlos, y ver los efectos en tiempo real (Ver figura 1). Puedes usar la herramienta para combinar múltiples filtros y animarlos para crear efectos cinematográficos.
Figura 1
En el momento de escribir, esto es realmente de última tecnología, así que solo unos pocos navegadores lo soportan. Así cuando abres CSS FilterLab en tu navegador, se mostrará un mensaje con las instrucciones sobre qué hacer para obtener la mejor experiencia. Tuvimos mucho cuidado para hacer que las instrucciones sean simples y fáciles de seguir.
Para empezar
Es fácil empezar a experimentar con CSS FilterLab. Una vez que abras el navegador, puedes empezar a añadir filtros desde el menú Añadir Filtro.
Puedes elegir aplicar filtros integrados o filtros personalizados:
- Filtros Integrados son los que vienen por defecto en el navegador. Contienen efectos de color básico como escala en grises, sepia, saturación o contraste.
- Filtros Personalizados toman efectos a un nivel completamente nuevo. Algunos ejemplos que se han construido incluyen efectos como burn, curl, fold, dissolve, explode, y muchos más. Los filtros personalizados no vienen con los navegadores, sino que están escritos por los desarrolladores mismos. Ellos hacen uso de Shaders, que son pequeños programas que permiten un control preciso sobre el color y la geometría. Shaders toma ventaja de la aceleración de hardware y son comúnmente utilizados en los efectos visuales para juegos. Pueden parecer ajenos a los desarrolladores de CSS, y por lo general requieren un buen conocimiento de las matemáticas.
Afortunadamente, CSS FilterLab viene con excelentes ejemplos de filtros personalizados con Shaders subyacentes. Un ejemplo es el doblez, que da a un elemento HTML el aspecto 3D de un pedazo de papel doblado (Ver Figura 2).
Figura 2
Los filtros que se han aplicado exponen sus controles de parámetros. Esto hace que sea muy fácil que puedas ajustarlas para conseguir el efecto que buscas. Además, múltiples filtros integrados o personalizados se pueden aplicar en conjunto para obtener resultados impresionantes.
Una vez que estés feliz con el resultado, guarda los cambios, como un cambio preestablecido. Esto te permite utilizar la configuración en otra ocasión.
Efectos de Animación
Los efectos no sólo pasan y ya. Vienen a ser, la transición de un estado a otro. Esto es lo que los hace expresivos.
CSS FilterLab viene con un conjunto básico de controles de animación que te ayudan a crear transiciones fluidas entre los valores de los parámetros del filtro.
Observa la línea de tiempo y controles en la parte inferior de la pantalla. Da clic en cualquier punto de la línea de tiempo, y entonces cambia los parámetros de los filtros activos. Esto crea un nuevo keyframe en la línea de tiempo. Pulsa el botón de play para ver ejecutarse la animación (Ver Figura 3).
Los keyframes pueden agregarse, arrastrándolos a lo largo de la línea de tiempo o eliminados para modificar la animación y obtener lo que deseas.
La duración de la animación puede ser cambiada desde el inicio, a la derecha de la línea de tiempo. Se mide en segundos.
Un tutorial breve para crear una animación fold con CSS FilterLab (0:19)
Sintaxis de código
CSS FilterLab permite crear diversos efectos visuales. Es importante saber que esto se hace con CSS plano, aunque CSS de vanguardia.
En Adobe, hemos trabajado duro, junto con nuestros socios, para llevar esta tecnología a la web abierta. No vamos a ocultarla detrás de una herramienta.
CSS FilterLab muestra el código exacto que se está utilizando para conseguir un efecto una animación. Los paneles de sintaxis CSS y sintaxis de animación CSS, justo encima de la línea de tiempo, muestran justo lo que se espera, Puedes copiar este código en tus proyectos para hacer uso de los efectos. Debes tener en cuenta que los filtros CSS están empezando a estar disponibles en los navegadores.
Creando nuevos filtros personalizados
Aquí es donde las cosas pueden convertirse en un reto. Sin embargo, si tu encuentras a las matemáticas complejas y escribes shaders particularmente atractivos, te alegrará saber que CSS FilterLab incluye un editor de shader.
Para crear un nuevo filtro personalizado, empieza por separar un filtro personalizado de los ya existentes en el menú Agregar Filtro. Te darás cuenta que tu filtro separado aparece en la segunda pestaña del menú. Da clic en el icono de “customize” (personalizar) y obtendrás el núcleo de un filtro personalizado.
Desde este punto, tú tienes el completo control sobre los parámetros utilizados, sus tipos, así como el fragmento de código. Tus cambios son automáticamente guardados y almacenados localmente, en el navegador.
Los shaders están escritos en OpenGL Shading Languaje(GLSL). El tema de escribir shaders está fuera del alcance de esta introducción, pero puedes aprender más de la documentación de GLSL. Asegúrate de leer acerca de los tipos, métodos y características del lenguaje para sacar lo mejor de tus shaders.
Figura 3
El panel de error destaca los problemas con tu código de shaders, en tiempo real. Esto es realmente útil porque te mantiene en el mismo contexto, mientras que desarrollas y previsualizas. También puedes ver los resultados de tu código de shaders en tiempo real.
Compartiendo e importando filtros personalizados
Comparte tus filtros personalizados mediante su publicación a partir de CSS FilterLab como un resumen en GitHub. Los controles para hacer esto se encuentran en el panel de control de shader.
Una vez publicado, comparte el enlace con los demás. Ellos van a poder importar el filtro personalizado en CSS FilterLab y utilizarlo en su propio contenido. Para importar un filtro personalizado ve al menú Agregar Filtro, elige Importar y utiliza la URL.
Código Abierto
Todo el código CSS FilterLab está disponible gratuitamente en GitHub bajo la licencia Apache v2. Estamos esperando tus comentarios y contribuciones al proyecto.
Si escribes shaders que te gustaría distribuir con CSS FilterLab, por favor, contribuye con el proyecto. Antes de revisar cualquier código, tomate un momento para familiarizarte con los lineamientos de contribución descritos en GitHub.
A dónde ir desde aquí
Los Filtros de CSS y los filtros personalizados, abren una gran cantidad de efectos creativos para contenido web. CSS FilterLab da solo una pista sobre lo que se está convirtiendo en posible. Pero el verdadero valor está en sus manos y en lo que se crea con esta tecnología.
Piensa un poco en las nuevas oportunidades para la interacción y expresiones de los filtros, manipulación de geometría y efectos cinematográficos pueden aportar a su trabajo. Piensa acerca de lo que esto significa para tu contenido en una gran pantalla, en un dispositivo móvil, y en muchos contextos nuevos.
Usa CSS FilterLab para aprender las capacidades de la web gráfica moderna y comparte tus pensamientos con nosotros. Nos gustaría saber que creas con ellos.
Alan Greenblatt de Adobe, ha creado un pequeño video tutorial de CSS FilterLab. Si estas interesado en aprender más, ese es un buen lugar para empezar.
También puedes encontrar más acerca de las contribuciones de Adobe para hacer mejor la web, para esto visita html.adobe.com.
Este artículo está publicado bajo licencia Creative Commons así como su versión original en Adobe Devnet, fue traducido y adaptado en nuestro blog por Margarita García.