Recortes transparentes: mask
La propiedad mask en CSS es una herramienta bastante potente que permite controlar la visibilidad de partes de un elemento de HTML.
Imagina que tienes una lámina transparente con áreas opacas y translúcidas. Al colocar esta lámina sobre una imagen, solo verás las partes de la imagen que coinciden con las zonas transparentes de la lámina. Así funciona mask: define áreas visibles e invisibles en un elemento.
A diferencia de clip-path, que simplemente recorta siguiendo un trayecto, mask permite gradientes de opacidad, con lo se pueden conseguir efectos sutiles donde partes del elemento se desvanecen gradualmente.
La máscara puede tener formas, puediendo construirse a partir de una imagen, con un gradiente de color CSS o incluso con una imagen SVG.
Al aplicar una máscara tipo imagen como jpg (sin transparencias) en modo luminance, el navegador interpreta los valores de luminosidad de la imagen de manera que las áreas blancas son totalmente transparentes mientras que las negras son opacas. Entre ambos colores se pueden establecer diferentes tonos de grises, o sea, de transparencia. Esto permite efectos visuales sofisticados que van más allá del simple recorte.
Si usas imágenes con canal alfa como imágnes png o webp transparentes, los negros son transparentes y los blancos o zonas sin color son opacas
Es importante tener en cuenta que mask afecta solo a la visibilidad, no a la forma o estructura del elemento. El elemento sigue ocupando su espacio original en el layout, aunque partes de él puedan ser invisibles. Esto puede ser crucial al diseñar interacciones y layouts responsives. Si tienes un bloque de 100x100 px y la máscara solo deja ver un cuadro de 20x20px, el bloque sigue ocupanto los 100x100 pixeles.
En resumen una máscara es como una ventana (mask) en una pared (el elemento HTML) con un cristal que puedes poner transperente o totalmente opaco.
Uso de la propiedad mask
Como ves una máscara mask no es más que una forma de mostrar una parte de un bloque con un cierto grado de transparencia, y todo se define mediante CSS. Este nombre, mask en realidad es una forma abreviada (la habitual shorthandd de CSS) de diferentes propiedades relacionadas, las más usadas
- mask-clip: Para el área afectada por la máscara.
- mask-image: Imagen usada para formar la máscara.
- mask-size: Controla el tamaño de la máscara (similar a background-image).
- mask-origin: Punto origen para posicionamiento de la máscara
- mask-position: Ajusta la posición de la máscara.
- mask-repeat: Define si la máscara se repite.
- mask-mode: Especifica cómo se interpreta la máscara (alpha o luminance).
- mask-composite: Para controlar como se mezclan máscaras superpuestas.
Quizás la propiedad fundamental es mask-image porque en el fondo una máscara es una imagen, puedes usar una imagen jpg (en modo luminance), imagen png con colores o areas transparentes, un gradiente o una imagen SVG (con un mask en su definición)
En este ejemplo vas a usar una imagen png para mostrar
<style>
.mask {
mask-image: url("imgs/patron.png");
mask-size: cover;
}
img {
width: 300px;
height: 300px;
margin: 0 auto;
}
.imgs {
display: flex;
justify-content: space-around
}
.centered{
text-align: center
}
</style>
</head>
<body>
<div class="imgs">
<img src="imgs/patron.png" alt="png mask">
<img src="imgs/desierto.webp" alt="jpg enmascarada">
</div>
<p>La primera imagen es la que se usa para crear la máscara y el resultado es</p>
<div class="centered">
<img src="imgs/desierto.webp" class="mask">
</div>
</body>
En este ejempo puedes ver la idea de lo que es una máscara: una imagen con espacios transparentes o translucidos, una ventana. En este ejemplo se ha usado una máscara con una imagen png. Como ves las areas negras son transparentes mientras que las transparentes quedan opacas. Si, lo se, suena raro, pero estás colocnado una máscara sobre el fono, no una imagen.
Pero las máscaras pueden hacer cosas mas interesantes, como viñetas usando degradados. en este ejemplo se usa como imagen de la máscra un gradiente radial:
<style>
.vigneta{
mask-image: radial-gradient(circle at center, black 50%, transparent 70%);
mask-size: cover;
}
img {
width: 200px;
height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<p>Una viñeta rectangular</p>
<div class="centered">
<img src="imgs/desierto.webp" class="vigneta">
</div>
</body>
En este otro ejemplo vamos a usar una imagen SVG para crear una máscara con un texto. Usamos un archivo SVG
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<text x="10" y = "50%" font-size="150" font-weight="900" font-family="Arial" fill="white">SOL>/text>
</svg>
<style>
.masktext{
mask-image: url("imgs/text2.svg");
mask-size: cover;
mask-repeat: no-repeat;
mask-position: center;
}
img {
width: 200px;
height: 200px;
margin: 0 auto;
}
.centered{
text-align: center
}
</style>
</head>
<body>
<p>Máscara con texto (SVG)</p>
<div class="centered">
<img src="imgs/desierto.webp" class="masktext">
</div>
</body>