El enmascaramiento de CSS te da la opción de usar una imagen como una 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.
En cambio, si quieres que una parte de la imagen sea opaca o quieres 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 usar como capa de máscara.
Esto te da tres opciones. Puedes usar un archivo de imagen como máscara, SVG o gradiente.
Compatibilidad del navegador
La mayoría de los navegadores solo admiten parcialmente la propiedad de enmascaramiento de CSS estándar.
Deberás usar el prefijo -webkit-, además de la propiedad estándar, para lograr la mejor compatibilidad con el navegador.
Consulta ¿Puedo usar máscaras de CSS? para obtener información completa sobre la compatibilidad del navegador.
Si bien la compatibilidad con navegadores con la propiedad con prefijo es buena,
Cuando se usa el enmascaramiento para que el texto sobre una imagen sea visible, se ocupará de lo que sucederá si el enmascaramiento no está disponible.
Puede valer la pena usar consultas de funciones para detectar la compatibilidad con mask-image o -webkit-mask-image
y proporcionar un resguardo legible antes de agregar la versión enmascarada.
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
/* code that requires mask-image here. */
}
Enmascara con una imagen
La propiedad mask-image funciona de manera similar a la propiedad background-image.
Usa un valor de url() para pasar una imagen.
La imagen de su máscara debe tener un área transparente o semitransparente.
Un área completamente transparente hará que la parte de la imagen debajo de ella se vuelva invisible. No obstante, usar un área semitransparente permitirá que se muestre parte de la imagen original. Puedes ver la diferencia en el Glitch a continuación. La primera imagen es la imagen original de 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 una transparencia de gradiente.
En este ejemplo, también uso la propiedad mask-size con un valor de cover.
Esta propiedad funciona de la misma manera que background-size.
Puedes utilizar las palabras clave cover y contain o asignar un tamaño al fondo con una unidad de longitud válida o un porcentaje.
Puede repetir la mascarilla del mismo modo que una imagen de fondo para usar una imagen pequeña como patrón repetitivo.
Enmascaramiento con SVG
En lugar de usar un archivo de imagen como máscara, puedes usar SVG.
Esto se puede lograr de varias formas.
La primera es tener un elemento <mask> dentro del SVG y hacer referencia al ID de ese elemento en la propiedad mask-image.
<svg width="0" height="0" viewBox="0 0 400 300">
<defs>
<mask id="mask">
<rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
<circle fill="#FFFFFF" cx="150" cy="150" r="100" />
<circle fill="#FFFFFF" cx="50" cy="50" r="150" />
</mask>
</defs>
</svg>
<div class="container">
<img src="balloons.jpg" alt="Balloons">
</div>
.container img {
height: 100%;
width: 100%;
object-fit: cover;
-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. Lamentablemente, Firefox es el único navegador que admite este enfoque.
Sin embargo, no todo está perdido, en el escenario más común de enmascarar una imagen, podemos incluir la imagen en el SVG.
Enmascara con un gradiente
Usar un gradiente de CSS como máscara es una forma elegante de lograr un área enmascarada sin tener que tomarte la molestia de crear una imagen o SVG.
Un gradiente lineal simple usado como máscara podría garantizar que la parte inferior de una imagen no esté demasiado oscura debajo de una leyenda, por ejemplo.
Puedes usar cualquiera de los tipos de gradientes compatibles y desarrollar todo lo que quieras. En el siguiente ejemplo, se usa un gradiente radial para crear una máscara circular que se ilumina detrás de la leyenda.
Usa varias máscaras
Al igual que con las imágenes de fondo, puedes especificar varias fuentes de enmascaramiento, combínalos para lograr el efecto que quieres. Esto es particularmente útil si quieres usar como máscara un patrón generado con gradientes de CSS. Por lo general, estos usarán varias imágenes de fondo, por lo que se pueden traducir fácilmente a una máscara.
A modo de ejemplo, encontré un buen patrón de tablero de ajedrez en este artículo. 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 este patrón, o cualquier otro diseñado para imágenes de fondo, en una máscara,
Deberás reemplazar las propiedades de background-* con las de mask relevantes,
incluidos los 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 realizar efectos muy buenos si se aplican patrones de gradiente a las imágenes. Haz un remix de Glitch y prueba otras variaciones.
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.
Foto de Julio Rionaldo en Unsplash.