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 comocontain,cover, o tamaños específicos como50%).mask-repeat: define si la máscara se repite (valores comorepeat,no-repeat,space, oround).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.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta