10 asombrosos ejemplos de CSS, SVG y máscaras de lienzo en acción

Puedes hacer cosas asombrosas con las máscaras SVG. Esta técnica ha existido durante años, pero solo recientemente se abrió camino en el desarrollo web convencional.

Recorrí la web para encontrar las siguientes demostraciones de máscaras de recorte personalizadas y máscaras de lienzo/SVG. Estos ejemplos muestran hasta dónde puede impulsar las máscaras en la web y, en última instancia, lo que pueden ofrecer a los desarrolladores en el futuro.

1. Enmascaramiento de texto

Para ver un ejemplo limpio de enmascaramiento de texto en acción, consulte el lápiz de arriba. Utiliza el texto de la página real en HTML para que pueda modificar fácilmente este texto para leer lo que quiera.

Toda la magia sucede en CSS con propiedades como background-clip. Puede aplicarlos a prácticamente cualquier texto en cualquier página, pero no se mostrarán a menos que tenga un fondo claro.

El efecto de zoom también se crea puramente en CSS, lo que hace que este fragmento de código sea aún más impresionante.

2. Polígonos de máscara recortada

Tenga en cuenta que este bolígrafo usa JavaScript para las animaciones complejas, pero todo el enmascaramiento se maneja a través de un elemento de lienzo. Es una idea sorprendentemente compleja, por lo que tratar de seguir el código será difícil.

Pero el efecto de enmascaramiento de polígonos anterior es uno de los diseños más exclusivos que he visto. Toma formas diseñadas en CSS y usa JavaScript para crear estas formas como elementos de página para enmascarar una imagen de fondo.

Esto ejecuta una animación consistente y se ejecuta en un elemento Canvas impulsado por JS que se comporta como un contenedor para el contenido SVG/XML. ¡Cosas bastante locas, pero es divertido ver lo que pueden hacer las máscaras!

3. Enmascaramiento de imágenes

Este ejemplo de corte y secado muestra cómo se ve una máscara de imagen CSS. Puedes ver el antes y el después de la máscara de imagen de arriba creada por Vincent De Oliveira.

Tenga en cuenta que la máscara texturizada negra real es solo un archivo PNG. Pero se superpone sobre una imagen dinámicamente en CSS para crear un efecto de foto enmascarada.

Puede hacer esto con cualquier textura que desee siempre que se exporte con transparencia. Hay muchos detalles sobre la propiedad de la máscara y, si bien admite archivos .svg, es posible que le resulte más fácil comenzar con PNG.

4. Botones flotantes

¿Alguna vez pensó en personalizar los efectos de desplazamiento de su botón? Bueno, este fragmento de código demuestra que puedes hacerlo con un poco de creatividad y algo de enmascaramiento de CSS.

Una vez más, todo el código se ejecuta en una máscara de imagen predefinida y cada botón tiene su propio efecto de máscara. La parte más genial es la animación flotante que no solo muestra la máscara, sino que la anima a la vista.

Este es sin duda un fragmento de código experimental, pero se ve fenomenal en los navegadores WebKit y, con suerte, esta técnica podría convertirse en un elemento básico en unos pocos años.

5. Máscara de texto SVG

Aquí hay un ejemplo ligeramente diferente de un efecto de máscara de texto creado por el desarrollador Marco Barria.

En lugar de definir imágenes SVG personalizadas, el código en realidad usa un elemento SVG. Todavía está construido sobre contenido de texto HTML sin formato, pero se ejecuta con un filtro SVG dinámico.

Esto es un poco más técnico pero también otorga mucho más control al desarrollador. En lugar de jugar con Illustrator para crear archivos SVG, puede codificar SVG en línea directamente en su documento HTML.

6. Máscara de texto de lienzo

Con este ejemplo de lienzo de Calvin Davis, notará que usa HTML sin procesar para el contenido, pero el texto en sí no se puede seleccionar.

En su lugar, se representa en la página mediante un elemento Canvas que puede abstraer texto fuera del DOM. Esto hace que se comporte más como una imagen, por lo que verá este efecto donde el texto se enmascara sobre el fondo, pero no se siente como texto.

Es posible que a algunos diseñadores no les guste esto por la falta de usabilidad, por lo que si desea texto seleccionable, no me molestaría con esta configuración.

Pero es un buen ejemplo de lo lejos que puedes empujar la tipografía con formas de lienzo.

7. Gradiente animado

Otro efecto de texto realmente genial es este degradado animado creado por el desarrollador Svante Richter.

Utiliza todo el código SVG en la página HTML, por lo que crea máscaras dinámicamente. Esta configuración de SVG funciona tomando el control de toda la página y dándole un fondo degradado, luego enmascarando este fondo solo a través del texto.

Dado que el degradado puede animarse a través de CSS, parecerá que el texto es la única parte animada. Un efecto bastante bueno y es algo que podría considerar agregar a un sitio web experimental o página de destino.

8. Máscara de recorte animada

Esta animación de máscara de recorte abstracta utiliza burbujas impulsadas por JS generadas aleatoriamente para enmascarar una imagen. Utiliza un elemento de lienzo junto con máscaras de recorte animadas juntas para formar una mancha SVG cohesiva.

Puede que no parezca mucho, pero el desarrollador Neil McCallion escribió un código bastante bueno y el resultado final es definitivamente extraño.

El enmascaramiento ocurre principalmente en el elemento lienzo, pero se controla a través de JavaScript. Es una forma divertida de combinar dos imágenes con una animación SVG abstracta.

Nuevamente, esto puede no servir para muchos propósitos en un sitio web del mundo real, pero es un experimento genial para jugar con las máscaras.

9. Máscara SVG BG

Por otro lado, aquí hay un efecto de enmascaramiento que podría ejecutar en casi cualquier sitio web.

Esto utiliza un degradado de fondo junto con un encabezado de héroe para crear un efecto de enmascaramiento complejo que aún se combina perfectamente.

El desarrollador Ryna Rudenko empujó el sobre con este bolígrafo utilizando un elemento de lienzo sin procesar con la mayoría de los efectos de enmascaramiento en capas en el HTML.

Esta máscara no solo es práctica y utilizable en un encabezado grande, sino que también está muy bien diseñada y se ejecuta únicamente en HTML5 y CSS3. Un excelente ejemplo de los estándares web modernos puestos a buen uso.

10. Máscaras CSS y SVG

Esta galería completa de máscaras SVG realmente demuestra cuánto puede hacer con CSS puro.

Es una demostración que muestra un montón de diferentes técnicas de enmascaramiento que usan la misma foto, diferentes formatos. Además, cada ejemplo incluye códigos de muestra directamente en la página que puede probar usted mismo, aunque es igual de fácil copiar el código del editor de CodePen.

Pero este pequeño bolígrafo actúa más como una introducción guiada a los diferentes efectos de enmascaramiento de imágenes que puede hacer. Impresionante lugar para comenzar si desea sumergirse en SVG y máscaras con demostraciones simples.