El enmascaramiento de CSS te brinda la opción de usar una imagen como capa de máscara. Esto significa que puedes usar una imagen, un SVG o un gradiente como máscara para crear efectos interesantes sin un editor de imágenes.
Cuando recortas un elemento con la propiedad clip-path, el área recortada se vuelve invisible.
Si, en cambio, quieres hacer que parte de la imagen sea opaca o aplicarle algún otro efecto, debes usar el enmascaramiento.
En esta publicación, se explica cómo usar la propiedad mask-image en CSS, que te permite especificar una imagen para usarla como capa de máscara.
Esto te brinda tres opciones. Puedes usar un archivo de imagen como máscara, un SVG o un gradiente.
Compatibilidad del navegador
Si bien el enmascaramiento de CSS está disponible en Baseline, la mayoría de las funciones de mask-image están disponibles en versiones anteriores del navegador con el prefijo -webkit-mask-image.
En los siguientes ejemplos, se muestra cómo usar ambas propiedades en conjunto para obtener la mejor compatibilidad con los navegadores.
Enmascara con una imagen
La propiedad mask-image funciona de manera similar a la propiedad background-image.
Usa un valor url() para pasar una imagen.
La imagen de la máscara debe tener un área transparente o semitransparente.
Un área completamente transparente hará que la parte de la imagen debajo de esa área sea invisible. Sin embargo, si usas un área semitransparente, se mostrará parte de la imagen original. Puedes ver la diferencia en el siguiente CodePen.
- La primera imagen es la imagen original de los globos sin máscara.
- A la segunda imagen se le aplicó una máscara con una estrella blanca sobre un fondo completamente transparente.
- La tercera imagen tiene una estrella blanca sobre un fondo con transparencia de gradiente.
En este ejemplo, también se usa la propiedad mask-size con un valor de cover.
Esta propiedad funciona de la misma manera que background-size.
Usa las palabras clave cover y contain, o bien asigna un tamaño al fondo con cualquier unidad de longitud válida o un porcentaje.
También puedes repetir la máscara de la misma manera que repetirías una imagen de fondo para usar una imagen pequeña como un patrón repetitivo.
Enmascaramiento con SVG
En lugar de usar un archivo de imagen como máscara, puedes usar SVG.
Existen varias formas de hacerlo.
El primero es tener un elemento <mask> dentro del SVG y hacer referencia al ID de ese elemento en la propiedad mask-image.
.container img {
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
La ventaja de este enfoque es que la máscara se puede aplicar a cualquier elemento HTML, no solo a una imagen.
En el caso más común de enmascarar una imagen, puedes incluirla en el SVG.
El primer enfoque es el modelo de referencia recientemente disponible, incluida la imagen en el SVG, que es compatible con los navegadores más antiguos que admiten la versión con prefijo -webkit.
Máscara con un gradiente
Usar un gradiente de CSS como máscara es una forma elegante de lograr un área enmascarada sin tener que molestarse en crear una imagen o un SVG.
Un gradiente lineal usado como máscara puede garantizar que la parte inferior de una imagen no sea demasiado oscura debajo de un subtítulo, por ejemplo.
Puedes usar cualquiera de los tipos de gradientes admitidos y ser tan creativo como quieras. En el siguiente ejemplo, se usa un gradiente radial para crear una máscara circular que se ilumina detrás del subtítulo.
Varias máscaras
Al igual que con las imágenes de fondo, puedes especificar varias fuentes de máscaras y combinarlas para obtener el efecto que deseas. Esto es especialmente útil si deseas usar un patrón generado con gradientes de CSS como máscara. Por lo general, usan varias imágenes de fondo y, por lo tanto, se pueden traducir fácilmente en una máscara.
A modo de ejemplo, hay un patrón de tablero de ajedrez en estos patrones con degradados de CSS. El código, que usa imágenes de fondo, se ve de la siguiente manera:
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Para convertir esto, o cualquier otro patrón diseñado para imágenes de fondo, en una máscara, deberás reemplazar las propiedades background-* por las propiedades mask relevantes, incluidas las que tienen el prefijo -webkit.
-webkit-mask-image:
linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
-webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Se pueden crear efectos muy atractivos aplicando patrones de gradientes a las imágenes. Para probar otras variaciones, crea una bifurcación del siguiente CodePen.
Junto con el recorte, las máscaras de CSS son una forma de agregar interés a las imágenes y a otros elementos HTML sin necesidad de usar una aplicación de gráficos.