CSS: Máscaras

Las máscaras en CSS son una herramienta muy útil para ocultar o mostrar partes de un elemento HTML. Como el nombre indica, las máscaras funcionan de una manera similar a las que usamos en la vida real, como sería una máscara facial que cubre partes de nuestra cara. En CSS se puede cubrir partes de otro elemento usando una imagen, un degradado u otro elemento.

Para aplicar máscaras existe una serie de propiedades CSS que cubren una amplia variedad de propósitos y aplicaciones, como recortar imágenes con formas no rectangulares, crear efectos de transparencia o generar efectos más complejos. La propiedad mask es una abreviatura (shorthand) que las unifica.

Las máscaras (mask) se diferencian de los recortes (clip-path) en que permiten ocultar o mostrar partes de un elemento, mientras que los recortes visuales solo pueden esconder partes de un elemento. Además, las máscaras tienen un nivel de personalización mucho mayor.

Lo más habitual en diseño web es utilizar como máscara una imagen vectorial SVG o un degradado, así se puede crear interesantes y bonitos efectos visuales sin tener que recurrir a herramientas externas de diseño gráfico.

Lista de propiedades descritas en este artículo:

Vamos a ver un ejemplo en el que recortamos un cuadrado de 50×50 píxeles utilizando como máscara una imagen en formato SVG que contiene el logotipo de este sitio web. Como resultado, el cuadrado cambiará de forma.

Código CSS:

.contenedor {
  background: linear-gradient(#ff7f2a, teal);
  display: inline-block;
  height: 50px;
  width: 50px;
}

.mascara {
  mask-image: url("/favicon.svg");
  mask-size: 50px;
}

Resultado:

En el ejemplo se observa como en la figura de la izquierda no se aplica ninguna máscara; y en el medio se muestra la máscara que se desea aplicar. Como resultado, la figura de la derecha tiene la forma de la máscara y conserva el color de fondo degradado de la figura de la izquierda.

El soporte de máscaras en los navegadores no es completo. Se recomienda utilizar los prefijos -webkit-* en las propiedades CSS de este artículo para garantizar la aplicación de máscaras.

La propiedad ‘mask-image’

La propiedad mask-image permite indicar una imagen o un degradado que se utilizará como máscara. La imagen de máscara establece las partes del elemento que serán visibles y las partes que quedarán ocultas.

Como valor admite una imagen con transparencia o vectoriales SVG mediante la función url(), indicando una ruta válida que puede ser relativa o absoluta. También se puede indicar un degradado con cualquier función para crear degradados con CSS. El valor por defecto es none.

Es posible indicar varias imágenes separándolas con una coma (,). En tal caso, la región visible resultante será fruto de la combinación de las regiones visibles de cada una de las máscaras que se haya indicado.

Vamos a crear un ejemplo con una imagen en formato JPG a la que le aplicaremos una máscara que es una estrella vectorial dibujada con Inkscape.

Código CSS:

.mascara-imagen {
  mask-image: url("/images/css/ast.svg");
  mask-repeat: no-repeat;
  mask-size: 100px;
}

Resultado:

Tal y como se puede ver, se ha aplicado una máscara con forma de estrella sobre una imagen JPG que contiene estrellas.

La propiedad ‘mask-mode’

La propiedad mask-mode permite indicar si como máscara se debe usar el canal alfa (transparencia) o los píxeles más brillantes de la imagen. Se trata de una propiedad muy útil cuando se trabaja con máscaras compuestas o varias imágenes, y determina cómo se fusionan con el contenido subyacente.

Esta propiedad admite como valor una serie de palabras clave para controlar el comportamiento de la máscara. Son las siguientes:

Con el valor alpha, la máscara usará la transparencia de los píxeles para ocultar partes del elemento. En cambio, con el valor luminance, los píxeles con más luz serán más opacos y los más oscuros serán más transparentes.

Vamos a crear un ejemplo a partir de la imagen de estrellas. A la imagen le aplicaremos como máscara el degradado siguiente: arriba, un color azul oscuro; al medio, un color naranja luminoso; y finalmente, abajo, transparente.

Código CSS del degradado:

.mascara-modo0 {
  background:
    linear-gradient(
      blue,
      #ff7f2a,
      transparent);
}

Imágenes que vamos a fusionar:

Código CSS de las máscaras:

.mascara-modo1 {
  mask-image:
    linear-gradient(
      blue,
      #ff7f2a,
      transparent);
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-size: 100px;
}

.mascara-modo2 {
  mask-image:
    linear-gradient(
      blue,
      #ff7f2a,
      transparent);
  mask-mode: luminance;
  mask-repeat: no-repeat;
  mask-size: 100px;
}

Resultado:

En la imagen de la izquierda se utiliza el modo alpha, por lo que al aplicar la máscara se vuelve transparente en la parte del degradado transparente. En la imagen de la derecha se usa el modo luminance: el azul y el transparente esconden la imagen, mientras que el color luminoso la muestra.

La propiedad ‘mask-repeat’

La propiedad mask-repeat permite controlar la repetición de la máscara. De hecho, funciona de forma similar a la propiedad background-repeat, para los fondos. La máscara se puede repetir en el eje horizontal, en el vertical, en ambos, o puede no repetirse. Por tanto, se trata de una propiedad muy versátil.

Lista de valores de mask-repeat:

Vamos a ver un ejemplo en el que repetiremos la máscara en forma de estrella tanto en el eje horizontal como en el eje vertical.

Código CSS:

.mascara-repite {
  mask-image: url("/images/css/ast.svg");
  mask-repeat: repeat;
  mask-size: 50px;
}

Resultado:

La propiedad ‘mask-position’

La propiedad mask-position permite controlar la posición de la máscara. Para determinar la posición de la máscara se parte de la esquina superior izquierda como referencia, que es el punto de origen. El valor por defecto es 0% 0%.

Esta propiedad admite uno o dos valores numéricos en unidades de longitud, relativas o absolutas. Si se indica un solo valor aplicará para la posición tanto en el eje horizontal como en el vertical. Si, en cambio, se indica dos valores, el primero indica el eje horizontal y el segundo indica el eje vertical.

Si el valor del eje horizontal es positivo, la máscara se desplaza hacia la derecha, y si es negativo lo hace hacia la izquierda. Si el valor del eje vertical es positivo, la máscara se desplaza hacia abajo, y si es negativo lo hace hacia arriba. No es muy intuitivo al no concordar con una cuadrícula cartesiana.

Además, también es posible utilizar una serie de palabras clave como valor. Para el primer valor (eje horizontal) se puede usar left, center y right, mientras que para el segundo valor (eje vertical) se puede usar top, center y bottom. Estas palabras clave se pueden combinar con los valores numéricos.

Estas palabras clave tienen su equivalencia en valores numéricos relativos (porcentajes). A continuación se muestran las equivalencias:

En el siguiente ejemplo ubicaremos la máscara con forma de estrella al centro de la caja de la imagen y a 10 píxeles de su borde superior.

Código CSS:

.mascara-posiciona {
  mask-image: url("/images/css/ast.svg");
  mask-position: center 10px;
  mask-repeat: no-repeat;
  mask-size: 50px;
}

Resultado:

La propiedad ‘mask-origin’

La propiedad mask-origin permite modificar el punto de origen de la región de la máscara, que por defecto está en la esquina superior izquierda del límite del relleno. En este sentido, su valor por defecto es equivalente a la palabra clave border-box. Este punto de origen se utiliza en la propiedad mask-position.

Como valor utiliza una serie de palabras clave que son como las de la propiedad anterior, aunque cambia su descripción. Veamos la lista:

Vamos a crear un ejemplo de un elemento que tiene un relleno de 10 píxeles y un borde de otros 3 píxeles. En este ejemplo posicionamos dos círculos centrados horizontalmente: uno arriba y el otro abajo.

El círculo de arriba usa el valor por defecto (border-box), por tanto se posiciona encima del relleno y del borde. En cambio el de abajo usa el valor content-box, por lo que sus límites se encuentran en el área del contenido.

Código CSS:

.mascara-origen {
  mask-image:
    url("/images/css/sun.svg"),
    url("/images/css/sun.svg");
  mask-origin: border-box, content-box;
  mask-position: center top, center bottom;
  mask-repeat: no-repeat, no-repeat;
  mask-size: 50px, 50px;
}

Resultado:

En este ejemplo hemos usado múltiples máscaras, separando con una coma (,) los valores de cada propiedad.

La propiedad ‘mask-clip’

La propiedad mask-clip permite indicar la región de la caja a recortar por la máscara. Se puede indicar cada uno de los límites de la caja: el contenido, que se encuentra en el interior; el espacio de relleno que queda a su alrededor; luego hay los bordes que lo envuelven; y finalmente los cuatro márgenes exteriores. Por defecto se usa los bordes, equivalente al valor border-box.

Lista de valores de mask-clip:

De nuevo, creamos un ejemplo con dos máscaras centradas horizontalmente. La de arriba usa la región de la caja por defecto: el límite del borde (border-box). La de abajo usa la región del contenido (content-box).

Código CSS:

.mascara-recortar {
  mask-clip: border-box, content-box;
  mask-image:
    url("/images/css/sun.svg"),
    url("/images/css/sun.svg");
  mask-position: center top, center bottom;
  mask-repeat: no-repeat, no-repeat;
  mask-size: 50px, 50px;
}

Resultado:

Tal y como se puede ver, la máscara de abajo ha quedado recortada en el límite de la región que delimita el contenido.

La propiedad ‘mask-size’

La propiedad mask-size permite indicar el tamaño de la máscara en un espacio bidimensional. Por tanto, sirve tanto para indicar la anchura (eje horizontal) de la máscara como para indicar su altura (eje vertical).

Esta propiedad admite uno o dos valores numéricos que deben ir indicados en unidades de longitud, relativas o absolutas. Con un solo valor se indica la anchura de la máscara. El segundo valor es para indicar la altura.

El valor por defecto es auto, que aplicará el tamaño automáticamente a ambos ejes. También existe la posibilidad de usar algunas palabras clave que, de forma automática, permiten realizar un ajuste automático.

Vamos a ver un ejemplo con dos máscaras de distinto tamaño. La de arriba tiene un tamaño de 25 píxeles, mientras que la de abajo mide el doble.

Código CSS:

.mascara-dim {
  mask-image:
    url("/images/css/sun.svg"),
    url("/images/css/sun.svg");
  mask-position: center 5px, center 45px;
  mask-repeat: no-repeat, no-repeat;
  mask-size: 25px, 50px;
}

Resultado:

La propiedad ‘mask-composite’

Cuando se utiliza múltiples máscaras a la vez puede ser muy interesante realizar ciertas operaciones lógicas que permitan obtener otro tipo de resultados, como sería una suma de capas, una resta, una intersección o una exclusión. Esto se puede realizar mediante el uso de la propiedad mask-composite.

Esta propiedad admite como valor una serie de palabras clave que permiten indicar las operaciones lógicas mencionadas.

Vamos a ver cada uno de estos cuatro ejemplos usando dos máscaras, una con forma circular y otra con forma de estrella.

Código CSS:

.mascaras {
  mask-image:
    url("/images/css/sun.svg"),
    url("/images/css/ast.svg");
  mask-position: center top, center 15px;
  mask-repeat: no-repeat, no-repeat;
  mask-size: 50px, 55px;
}

.mascara-suma {
  mask-composite: add;
}

.mascara-resta {
  mask-composite: subtract;
}

.mascara-int {
  mask-composite: intersect;
}

.mascara-exc {
  mask-composite: exclude;
}

Resultado:

La propiedad ‘mask’

La propiedad mask es una abreviatura (shorthand) que permite indicar de una forma sintetizada y resumida los atributos de las propiedades sobre máscaras descritas en este artículo. Los valores deben seguir un orden. En caso de faltar una propiedad, se usará automáticamente el valor por defecto.

1. mask-image
2. mask-position
3. mask-size
4. mask-repeat
5. mask-origin
6. mask-clip
7. mask-composite
8. mask-mode

En el caso de mask-size, se introduce justo después de mask-position, separándolos con una barra inclinada (/).

Por ejemplo:

.mascara {
mask:
  url("/images/css/ast.svg")
  2px 5px / 150px 150px
  no-repeat
  content-box
  content-box
  exclude
  match-source;
}