Imagen de trabajo Mascarilla Magic con Houdini

Sep 13, 2025

Cómo

An image showing the outlines of a circle, square and triangle used as CSS masks for images of a seascape.

[dieciséis]

Si está interesado en aprender más sobre Houdini, asegúrese de asistir a Generar New York (24-25 de abril). En la conferencia, puede atrapar a Sam Richard, ingeniero asociado de Enterprise en Google, discutiendo cómo Houdini puede mejorar enormemente la flexibilidad, el poder, el rendimiento y la mantenabilidad de los patrones de diseño. Para reservar su boleto a esta galardonada conferencia para diseñadores web, visite generateconf.com .

Como desarrolladores, a veces tomamos CSS por sentado. Al cambiar un par de propiedades, podemos cambiar el aspecto de un sitio web completo. Los vendedores del navegador están haciendo mucho trabajo en nuestro nombre para llegar a ese punto.

Pero a medida que salga las características de CSS nuevas, puede pasar un tiempo hasta que lleguemos a usarlos para los sitios de producción. Los usuarios con navegadores antiguos quedarán atrapados con un conjunto de estilos de degradado, progresivamente mejorado progresivamente que no se ven tan bien como los de los navegadores modernos.

19 ejemplos de animación de CSS fresco para recrear

Houdini está listo para cambiar todo eso. Es una colección de proyectos de especificaciones que brinda a los desarrolladores acceso a parte de la magia detrás de la escena proporcionada por CSS. Una vez que se completen todas las especificaciones, los desarrolladores podrán usar JavaScript para determinar cómo se realizan aspectos tales como cálculos de diseño y estilo.

¿De qué es capaz de Houdini?

Houdini es una colección de API y especificaciones diseñadas para disminuir la fricción entre JavaScript y CSS. Al exponer algunas de las magias que los navegadores realizan a los desarrolladores, podemos realizar ajustes a la página que funciona mejor para nuestro uso específico.

Fijo en medio de estos avances es el concepto de un trabajo, una clase ligera y altamente especializada enfocada en acciones específicas, como las animaciones. Son similares a los trabajadores web, que se ejecutan lejos del hilo principal y mantienen la página de respuesta. Estos pueden ampliarse en el futuro, ya que las necesidades de los desarrolladores evolucionan.

Si bien algunas de estas API están todavía en sus primeras etapas, varias ahora han aterrizado tanto en Chrome como en Opera, a partir de V66 y V53, respectivamente. La API de pintura CSS permite a los desarrolladores crear imágenes en JavaScript para usar dondequiera que una imagen se use normalmente en CSS, mientras que el modelo de objeto Typed CSS expone a los objetos CSS a su JavaScript, en lugar de solo cadenas. El apoyo en Safari para que estas API se encuentran actualmente en desarrollo, varias API adicionales se encuentran en el camino en Chrome y las diversas API de Houdini están funcionando a través del proceso de especificación W3C, con la API de pintura ya llegó a la recomendación de candidato.

Los borradores de las API están cambiando constantemente y los presentes en este momento pueden no parecerse a lo que eventualmente aterriza en los navegadores. Mantener vigilado ishoudinireadyyet.com Para mantenerse por delante de las últimas mejoras.

¿Quieres algo más sencillo? Probar un Creador de sitios web . Sin embargo, de cualquier manera, tu Alojamiento web El servicio necesita trabajar para usted.

Usa Houdini para remodelar las máscaras de la imagen.

Por el momento, incluso la API de pintura CSS de Houdini es capaz de lograr mucho. Por ejemplo, podemos combinarlo con máscaras de imágenes para remodelar los elementos a pedido.

Para mostrar cómo podría funcionar esto, navegue hasta Filesilo Para acceder a los archivos relevantes (también, asegúrese de que sus archivos sean fácilmente accesibles en la derecha almacenamiento en la nube ).

01. Aplicar enmascarar CSS

An image showing three images of seascapes, awaiting the application of a CSS mask.

Antes de comenzar a crear el trabajo, configure un servidor local. Luego necesitamos establecer la máscara en cada imagen. Mientras que la propiedad CSS necesitaba es máscara , todavía está prefijado en Chrome. Esto significa que también necesitamos el Webkit Prefijo junto a él.

Abrir Estilos / máscara.css y actualizar los estilos para el enmascarado clase. Parte del efecto es revelar plenamente la imagen cuando el usuario se cierne sobre él. Agrega un revelar Propiedad personalizada al elemento en ese caso.

 .Masked {
  [...]
  -Webkit-Mask-Image: Pintura (máscara);
  Máscara-imagen: Pintura (máscara);
}
.Masked: Hover, .masked: foco {
  --Mask-revele: VERDADERO;
}

02. Aplicar la propiedad de la máscara.

Las propiedades personalizadas no necesitan estar en el elemento raíz para ser recogido por la API. Se pueden aplicar al elemento que se está pintando a, lo que anulará a cualquier selector con una especificidad más baja.

Ahora vamos a aplicar un especial Forma de máscara Propiedad personalizada a tres clases de formas. Esto le dice al worklet qué forma para renderizar.

 .masked.square {
  - Marsk-Forma: cuadrado;
}
.masked.circle {
  - Marsk-Forma: Círculo;
}
.masked.triangle {
  - Marsk-Forma: Triángulo;
}

03. Definir qué forma usar

Abierto Scripts / Mask.js . Esto ya se ha completado con algunas de las lógicas para crear las formas. Todavía tenemos que atarlo junto con las clases que acabamos de escribir.

los Forma de máscara La propiedad personalizada define la forma que se va a utilizar. Tenemos un círculo, un cuadrado o un triángulo para elegir. Si alguien elige una forma diferente o ninguna forma, por defecto de una forma de círculo. Recorte los espacios dejados por el formato CSS.

 Deje que Forma = 'Círculo';
if (Properties.Get ('- Forma de máscara') & amp; & amp;
  ['Cuadrado', 'triángulo', 'círculo']
  .incluye (propiedades.get (
  '- forma de mancha'). Tostring (). Recorte ())) {
  Forma = Properties.Get (
  '- Mask-Forma'). Tostring (). Recorte (); }

04. Decidir si revelar

De forma predeterminada, las máscaras proporcionan el esquema de la forma definida. Cuando el usuario se cierne sobre ellos, el revelar La propiedad personalizada se hace realidad, por lo que debería completar la forma.

Los tipos de propiedad personalizados vienen en un punto posterior, lo que significa para ahora un cierto El valor se pasará como una cadena. Haga coincidir con la cadena y establecer una nueva variable si está configurada.

 Deja que revele = falso;
if (Properties.Get ('- Mask-revele') & amp; & amp;
  propiedades.get ('- máscara-revelar')
  .Tostrando (). Recorte () == 'verdadero') {
  revelar = verdadero; }

05. Encuentra la longitud más pequeña.

Finalmente, queremos que las formas tengan lados de igual longitud. Esto significa que debemos encontrar el más pequeño de la anchura o altura de la imagen y usar esa longitud para calcular las formas.

Definir el longitud máxima Variable para decirle al resto del código de qué tamaño para hacer las formas. Ajuste el ancho de la línea del contexto a una proporción de este tamaño para evitar que las cosas se escalen.

 const maxlength =
  Math.min (Geom.Width, Geom.Height);
ctx.linewidth = maxlength / 25;

Este artículo fue publicado originalmente en Creative Web Design Magazine Diseñador web . Suscríbete al diseñador web .

¿Quieres recoger más trucos de Houdini?

An image of generate New York speaker Sam Richard, promoting his talk 'Design System Magic with Houdini'. Generate New York runs from April 24 - 25.

¿Interesado en aprender más sobre cómo Houdini puede agregar más OOMPH a sus diseños? Sam Richard, Enterprise Partner Engineer en Google dará su magia del sistema de diseño con Houdini en Generar New York el 25 de abril, en el que le enseñará cómo puede ayudarlo a resolver problemas de diseño de diseño comunes y mejorar enormemente la flexibilidad, el poder, Rendimiento y mantenimiento de estos patrones.

Generar carreras de Nueva York desde el 24 al 25 de abril. Obtenga sus boletos ahora !

Artículos relacionados:

Generar Nueva York está de vuelta para 2019
14 de las mejores API de JavaScript
10 nuevas herramientas de diseño web para abril de 2019

Imagen de trabajo Mascarilla Magic con Houdini

¿De qué es capaz de Houdini?

Usa Houdini para remodelar las máscaras de la imagen.

01. Aplicar enmascarar CSS

02. Aplicar la propiedad de la máscara.

03. Definir qué forma usar

04. Decidir si revelar

05. Encuentra la longitud más pequeña.

¿Quieres recoger más trucos de Houdini?

Cómo - Artículos más populares

Cómo dibujar una rosa: consejos para principiantes y avanzados

Cómo crear pinturas aéreas de Plein Digital

Crea un humano digital real

Comience con la impresión de monotipos

Pinte una naturaleza muerta expresiva en acrílicos

Cómo pintar miniaturas deliciosas

Cómo trabajar con video HTML

Construye una interfaz MAYA personalizada

Categorías