El equipo de la plataforma Web de Adobe está trabajando en impulsar lo que es posible en la web en términos de diseño, tipografía y efectos visuales. Trabaja junto con la W3C, proveedores de navegadores y otros, en especificar e implementar cosas como tipografía avanzada, efectos de filtro 2D y 3D, diseños de estilo de revista y mucho mas.
Una característica que ha estado disponible desde hace mucho tiempo en herramientas gráficas pero no en la web, es el blending. El blending es soportado a través de muchas herramientas gráficas de diseño, lo cual es usado muy comúnmente. Hay muchos libros sobre el tema y un sin número de tutoriales en la web con trucos y consejos para crear efectos interesantes. Son soportados en formatos como PDF y en herramientas como Photoshop lo cuál hace mucho sentido para traerlas al mundo del HTML.
Junto con Canon se elaboró una propuesta que describe un par de simples adiciones a CSS para agregar el blending al modelo de procesamiento del navegador. La especificación ha sido presentada al grupo de trabajo FX de la W3C así como a los grupos de trabajo de SVG y CSS. Se le dará seguimiento a la recomendación de la W3C la cual dará lugar a la adopción generalizada por los proveedores de navegadores.
Desde que se propuso la función, se ha tenido gran retroalimentación de las comunidades de desarrolladores y diseñadores. Están muy familiarizados con la característica e inmediatamente vieron cómo podían usarlo para hacer contenido más interesante.
Este artículo muestra de como podrás especificar el blending en tus páginas web, junto con algunos ejemplos de código.
¿Qué es blending?
Para aquellos que no están familiarizados con el concepto, blending determina cómo una capa puede heredar el color de los elementos que están por debajo. En el nivel básico, se toma el color del elemento y lo mezclamos con el color que está detrás del elemento. El nombre del modo blend especifica la fórmula matemática que hace la “mezcla”.
Tomemos como muestra el siguiente ejemplo de dos imágenes que son combinadas sin blending:
Como puedes ver no hay interacción entre las dos imágenes.
Ahora, si aplicamos el modo blend overlay al sol, obtenemos el siguiente resultado:
Observa como los colores del sol se vuelven a calcular así que la oscuridad y luminosidad del fondo de la imagen se conservan.
Si te interesa cómo las personas usan esta característica para crear increíbles obras de arte, haz una búsqueda web para “Tutorial de Blending de Photoshop” y encontrarás muchos artículos y videos en YouTube.
Cómo aplicar blend a los elementos de tu página web
En este ejemplo, tenemos una página web sencilla con 3 botones estilizados:
El código HTML y CSS lucirá como:
HTML
1 2 3 4 5 6 |
<h2>texturing and blending</h2> <ul id="textured-menu"> <li>Home</li> <li>About</li> <li>Products</li> </ul> |
CSS
1 2 3 4 5 6 7 8 9 |
#textured-menu li { width: 200px; height: 200px; padding-top: 65px; text-align: center; border-radius: 100px; margin: 10px; … } |
Ahora tenemos tres botones en una página web.
En el mundo actual, hay que crear una imagen en un programa como Photoshop para imitar este efecto. Los principales inconvenientes de este enfoque son el incremento del tiempo de descarga para el usuario y el alto costo de mantenimiento para el cliente, ya que se tendría que rediseñar esto cada vez que haya un cambio. También, si las imágenes son redimensionadas debido a una pequeña pantalla, el texto y el contorno quedarían pixelados.
Con la propuesta de blending de CSS, será mucho más simple de implementar esto. Todo lo que se necesita hacer es especificar el modo blending en el elemento donde quieres ver el efecto. En este caso, se agregaría lo siguiente a la sintaxis CSS del botón:
1 2 3 |
#textured-menu li { blend-mode: color-burn; } |
Y obtendrás el siguiente efecto:
El fondo es ahora visible a través del botón. El navegador aún sabe que el botón es un espacio con el texto, así que es procesado sin artefactos y el texto aún es seleccionable.
El atributo “blend-mode” puede ser aplicado a cualquier elemento HTML o SVG. Tomará la completa representación de este elemento y lo fusionara con su fondo.
Blending es totalmente compatible con todas las demás características como opacidad, animaciones y transiciones. Por ejemplo, si usas una transición CSS en el color:
1 2 3 4 |
#textured-menu li:hover { background-color: red; transition: background-color 0.15s linear; } |
El navegador calcula automáticamente todos los pasos intermedios durante la fase de transición.
Además del modo blend de CSS, la especificación propuesta también agrega soporte para grupos isolated y knockout. Estas son dos características avanzadas que te permiten controlar con precisión qué elementos blend se fusionan con los demás.
Como utilizar blending para mejorar el aspecto de sus sombras
Actualmente, box shadows y text shadows de CSS, son dibujados sobre el fondo lo cual no es siempre deseado. Alfa puede ser usado para evitar esto, pero hará que la sombra luzca deslavada y produzca artefactos. Las aplicaciones de edición como Photoshop dan la posibilidad de combinar la sombra porque produce un efecto más agradable.
Por ejemplo, la siguiente imagen es una sombra verde con 75% de opacidad.
CSS
1 2 3 |
p { text-shadow: rgba(0,1,0,.75) 20px 54px; } |
Si removemos la opacidad y aplicamos multiply en un modo blend, obtendremos el siguiente resultado:
Observa como el color de la sombra cambia según el fondo. Este cambio produce una sombra más natural.
El CSS cambiaría de la siguiente manera:
CSS
1 2 3 4 |
p { text-shadow: green 20px 54px; text-shadow-blend-mode: overlay; } |
Hay una propiedad similar de CSS “box-shadow-blend-mode” que controla cómo se comportan las sombras en las cajas.
Blending dentro de las cajas CSS
El modelo de cajas CSS y la especificación de fondo CSS3 definen un conjunto de contenido y que a veces quieres fusionar este contenido.
Por ejemplo, es posible que desee combinar el color de un elemento de texto con la imagen de fondo:
Hay una propiedad similar de CSS “box-shadow-blend-mode” que controla cómo se comportan las sombras en las cajas. La sintaxis CSS tendría un aspecto similar al siguiente:
CSS
1 2 3 4 5 6 |
p { color: white; foreground-blend-mode: overlay; background-color: hsl(34, 53%, 82%); background-image: … );} |
Ver la Galería de Patrones de CSS3 para la sintaxis completa de la propiedad background-image (creado por Divya Manian).
foreground-blend-mode especifica la fusión del texto o elementos anidados. Para especificar la combinación de imágenes de fondo, introducimos background-blend-mode la cual toma una lista de modos blending. Cada elemento de la lista corresponde a una imagen de fondo.
¿Dónde puedo aplicar blending?
La siguiente tabla describe qué palabra clave CSS controla blending dentro del modelo de cajas CSS:
Element |
CSS Keyword |
CSS box’s text or children |
foreground-blend-mode |
text drop shadow |
text-shadow-blend-mode |
CSS box’s background images |
background-blend-mode |
CSS box’s shadow |
box-shadow-blend-mode |
Complete CSS box |
blend-mode |
¿Qué es lo que viene para blending CSS?
Adobe y Canon llevaron la propuesta a los grupos de trabajo de CSS y SVG, y fue aceptada por ambos. Esto significa que el documento es ahora oficialmente un “Borrador de Trabajo”. Este será revisado por la comunidad web (lo cual te incluye!). Se incorporarán comentarios y esperemos que podamos progresar su estatus próximamente a “Candidato Recomendación”.
Al mismo tiempo, estamos trabajando con los proveedores de navegadores para ver si detectan cualquiera de las principales fallas arquitectónicas.
Para estudiar la viabilidad implementamos blending en FireFox y Chromium. Creemos que nuestra primera implementación fue suficientemente buena para la experimentación inicial así que la publicamos en una compilación privada de Chromium. De acuerdo con la práctica común las propiedades de blending en esta compilación llevan el prefijo “-webkit-”. Nosotros te alentamos a probarlas y ver si te gustan los resultados.
A donde ir desde aquí
Usa los siguientes recursos para aprender sobre lo más reciente de blending en CSS:
- Composición CSS y Borrador del Editor de Fusión
- Efectos CSS – SVG del grupo de trabajo de la W3C (FX TF).
- Especificación de Composición de SVG.
Este artículo esta 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 @gr_maggi.
pero esto funciona solo en chrome y mozilla o tambien para explorer.
No funciona para ningún browser todavía, pero va a llegar a ser una característica en un futuro. Si quieres probarla hay que descargar el Chromium en versión de desarrollo que cita el artículo.