Cómo utilizar la propiedad Mask en CSS

Damián De Luca

4 semanas ago

La propiedad Mask en CSS es una opción que nos puede ayudar a resolver situaciones del diseño web. ¿Para qué sirve? Permite aplicar máscaras a elementos , controlando la visibilidad de ciertas áreas y logrando efectos visuales interesantes. Se usa comúnmente para recortar partes de una imagen o cualquier elemento basado en su forma, dejando visibles solo las partes que coinciden con la máscara aplicada.

En este artículo, aprenderás cómo utilizar mask para crear efectos visuales impresionantes, explorando sus sintaxis, valores comunes y ejemplos prácticos.

¿Qué es `mask` en CSS?

mask es una propiedad CSS que determina qué partes de un elemento deben ser visibles, definiendo una máscara que oculta ciertas áreas mientras deja otras visibles. Funciona de manera similar a clip-path, pero ofrece más flexibilidad al admitir imágenes, gradientes y vectores como máscaras.

Sintaxis básica

La propiedad mask puede aceptar varios valores, como imágenes, gradientes o formas SVG. A continuación, la sintaxis básica:

.element {
  mask: url('ruta/de/la/mascara.svg');
  mask-size: cover;
  mask-repeat: no-repeat;
}

Subpropiedades de `mask`

Al igual que muchas propiedades de CSS, mask tiene varias subpropiedades que puedes utilizar para personalizar el comportamiento de la máscara:

mask-image: define la imagen o el recurso SVG que se usará como máscara.
mask-size: controla el tamaño de la máscara (valores como contain, cover, o tamaños específicos como 50%).
mask-repeat: define si la máscara se repite (valores como repeat, no-repeat, space, o round).
mask-position: establece la posición de la máscara sobre el elemento.
mask-origin: especifica el área donde se aplica la máscara.
mask-composite: define cómo se combinan múltiples máscaras.

Tipos de máscaras

1. Imágenes como máscara

Las imágenes pueden utilizarse como una fuente de máscara, haciendo que solo las partes visibles de la imagen sean las que estén «mascaradas». Aquí tienes un ejemplo básico usando una imagen PNG:

.element {
  mask-image: url('mascara.png');
  mask-size: contain;
  mask-repeat: no-repeat;
}

2. Gradientes como máscara

Los gradientes también pueden aplicarse como máscaras. Por ejemplo, podremos usar un gradiente lineal para crear un efecto de desvanecimiento:

.element {
  mask-image: linear-gradient(to right, transparent, black);
}

Este código hará que el lado izquierdo del elemento sea completamente transparente, mientras que el lado derecho será opaco.

3. Máscaras SVG

SVG es una excelente opción para máscaras, ya que permite crear formas vectoriales detalladas y escalables. Aquí un ejemplo usando un archivo SVG:

.element {
  mask-image: url('mascara.svg');
  mask-size: 100px 100px;
}

Ejemplo práctico: texto con máscara de imagen

Una de las aplicaciones más llamativas de mask es crear un texto que esté recortado según una imagen. Aquí te dejo un ejemplo práctico:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #333;
      color: white;
      text-align: center;
      padding-top: 50px;
    }

    .texto-mascara {
      font-size: 100px;
      font-weight: bold;
      background-image: url('paisaje.jpg');
      -webkit-mask-image: url('paisaje.jpg');
      mask-image: url('paisaje.jpg');
      background-size: cover;
      mask-size: cover;
      mask-repeat: no-repeat;
      display: inline-block;
      width: 100%;
    }
  </style>
</head>
<body>

  <h1 class="texto-mascara">Texto con Máscara</h1>

</body>
</html>

En este ejemplo, el texto del encabezado tiene una máscara aplicada que muestra la imagen «paisaje.jpg» solo en las áreas del texto.

Para aumentar la compatibilidad de esta característica, especialmente con algunas versiones antiguas de navegadores, es posible recurrir a prefijos específicos de los proveedores. Por ejemplo, para algunas versiones de Safari y navegadores basados en WebKit, es posible agregar propiedades con -webkit-mask. En el ejemplo lo vemos reflejado con la línea: -webkit-mask-image: url('paisaje.jpg').

Mask en CSS: conclusión

La propiedad Mask en CSS ofrece una versatilidad increíble para crear efectos visuales avanzados sin la necesidad de gráficos complejos. Podemos usar imágenes, gradientes y vectores SVG como máscaras. Esto nos permite crear diseños interactivos y dinámicos.

Aunque mask puede parecer complejo al principio, una vez que entendemos sus fundamentos, se convierte en una herramienta esencial para agregar profundidad y creatividad a nuestros proyectos.

Si te interesa saber más sobre CSS y maquetación de sitios web déjame un comentario o escríbeme un mensaje.

¿Qué es mask en CSS?