Enmascarado CSS

Optional Advanced acaba de verter columnas de periódico. Esta sesión es otra herramienta opcional: máscaras. Pones una plantilla sobre una caja. Donde la plantilla es sólida ves la foto o el color. Donde está vacía, esa caja desaparece. No partes un artículo en flujos ni deslizas teselas de iconos en una hoja sprite.

Respuesta directa

El enmascarado CSS oculta partes de un elemento con mask-image — PNG, SVG o degradado. Piensa en pintura en spray a través de un recorte. mask-size, mask-repeat y mask-position se comportan como la capa de fondo: cover, no-repeat, center. mask-mode elige alfa (transparencia del archivo) o luminancia (claro frente a oscuro). Usa máscara cuando el borde debe difuminarse. Usa clip-path para un corte duro (círculo o polígono). Etiquetas y botones se quedan del todo visibles.

Por qué una máscara no es columna ni sprite

Varias columnas fragmentan un flujo de texto. Una hoja sprite recorta un mapa de bits con background-position para que muchos iconos compartan archivo. La máscara no hace ni lo uno ni lo otro. El elemento sigue ocupando su caja. El ancho y el alto de diseño no se encogen. Solo cambia qué píxeles de esa caja se pintan. Los filtros (blur(), grayscale()) cambian el aspecto de cada píxel visible; la máscara decide cuáles quedan.

Un PNG como plantilla

mask-image acepta url(...) igual que background-image. Un PNG de máscara típico es blanco (u opaco) donde quieres la foto, y transparente donde quieres un agujero:

La foto sigue siendo fondo (o un <img> con la misma máscara). El PNG de mancha es solo la plantilla. Si falta el archivo, el elemento entero puede desaparecer — guarda un estilo sin máscara o prueba la URL.

Fundido con degradado

No hace falta un segundo archivo. Una máscara en degradado es el fundido de siempre al pie de una tarjeta:

El negro (o totalmente opaco) conserva el contenido; transparent abre un agujero. El degradado vive en CSS, así que no hay petición HTTP extra — a diferencia de una hoja de iconos sprite. Esto no es opacity en toda la tarjeta: el texto de la zona sólida sigue nítido; solo se disuelve la región enmascarada.

Tamaño, repetición y posición

Trata la máscara como una capa de fondo que nunca ves como imagen:

mask-size: cover llena la caja; contain guarda la proporción de la plantilla; las longitudes fijan una forma pequeña. repeat tesela la plantilla (raro y fácil de abusar). Existe el atajo mask, pero al principio las propiedades largas son más tranquilas hasta que la capa se sienta como background.

Alfa frente a luminancia

mask-mode responde: «¿Leo transparencia o brillo?»

alpha (a menudo el valor por defecto en PNG con transparencia) usa el canal alfa. luminance usa claro y oscuro: el blanco suele mostrar, el negro ocultar — útil cuando la plantilla es una foto gris, no un PNG transparente. Si una máscara JPEG «no hace nada», casi seguro faltaba luminance. En SVG, <mask> tiene mask-type; en cajas HTML empieza por mask-mode.

Recorte duro frente a máscara suave

clip-path corta una geometría: círculo, inset, polígono. El borde es nítido. Una máscara puede ser suave. No son dos nombres de la misma propiedad:

Avatares y tickets suelen querer clip-path. Un póster que se disuelve en la página quiere una máscara en degradado. Se pueden combinar, pero un trabajo por propiedad es más calmo. overflow: hidden con border-radius es la tercera herramienta: recorta descendientes a la caja de padding. La máscara pinta el propio elemento, fondo incluido, sin redondear la caja de diseño.

Safari y el prefijo WebKit

Algunas versiones de Safari aún quieren -webkit-mask-image (y compañía) junto a las propiedades estándar:

Pon la línea con prefijo y la estándar. No envíes solo prefijo para siempre. @supports puede envolver extras; el hábito es probar el fundido en Safari, no solo en Chromium.

Máscara vs clip vs overflow vs sprites

Optional Advanced ya usó sprites para iconos y columnas para prosa. La máscara es la plantilla. Mezclar las tres en el mismo héroe da una foto recortada como sprite y partida como columna.

Qué no enmascarar

No uses una máscara para «arreglar» un diseño revuelto. Si un botón o una etiqueta quedan bajo el fundido, nadie lee ni pulsa. Un lector de pantalla puede anunciar el texto mientras quien ve no ve nada — es un fallo, no una función. El contraste sigue importando en la parte visible. Fotos decorativas, tarjetas e iconos son el objetivo habitual; los campos de acceso no.

Si un hijo se sale de la tarjeta, overflow (o un hijo más pequeño) es el arreglo de diseño. Si hay doce archivos HTTP de iconos, un sprite o un set SVG es el arreglo de recursos. La máscara no sustituye a ninguno.

Pruébalo tú

1. Dale a una caja de color mask-image: linear-gradient(to bottom, #000 50%, transparent) y mira cómo se disuelve el pie.
2. Cambia a una plantilla SVG o PNG pequeña; pon mask-size y mask-position: center.
3. Prueba mask-mode: luminance en un JPEG gris frente a alpha en un PNG transparente.
4. Compara el mismo círculo con clip-path: circle(50%) — nota el borde duro.
5. Añade -webkit-mask-image con el mismo degradado. No enmascares un formulario.

Errores frecuentes

• Usar la máscara como diseño de página o como overflow: hidden
• Olvidar mask-size y dejar una plantilla minúscula en la esquina
• Esperar agujeros de un JPEG sin mask-mode: luminance
• Saltar -webkit-mask-image y culpar a «las máscaras CSS» en Safari
• Tratar clip-path y mask-image como lo mismo
• Enmascarar etiquetas, pies de foto o botones hasta matar contraste y clics
• Confundirlo con sprites (desplazamientos de tesela) o varias columnas (flujos de texto)

Resumen

• Una máscara es una plantilla sobre un elemento: mostrar aquí, ocultar allá
• mask-image toma una url o un degradado; tamaño, repetición y posición imitan el fondo
• mask-mode: alfa frente a luminancia
• clip-path es un corte geométrico duro; las máscaras pueden fundirse
• Prefijo para Safari; nunca enmascares la interfaz esencial
• Optional Advanced sigue con interfaz de usuario (user-interface)