Existe una familia de propiedades CSS poco conocidas que permiten crear máscaras de composición, mediante las cuales, utilizando imágenes o formas "compatibles", puedes establecer máscaras que recortarán o establecerán formas compuestas aplicadas a elementos de nuestro HTML.
Para crear estas máscaras utilizaremos las siguientes propiedades:
Propiedad | Descripción |
---|---|
mask-image |
Indica una imagen, gradiente o forma SVG para usar como máscara. |
mask-mode |
Indica si usar canales alfa o de luz como máscara. |
mask-repeat |
Indica cómo se repetirá una máscara con tamaño y posición. |
mask-position |
Indica la posición donde debe empezar la máscara. |
mask-clip |
Indica el área al que afectará la máscara. |
mask-origin |
Indica como posicionar el área que afectará a la máscara. |
mask-size |
Permite darle un tamaño específico a la máscara. |
mask-composition |
Si hay múltiples máscaras, define como aplicas composición. |
mask |
Propiedad de atajo para hacer todo lo anterior. |
Ten en cuenta que las máscaras aún son una característica no soportada por completo en ciertos navegadores, por lo que puede que no tengan soporte o tengas que usar prefijos como
-webkit-
antes de las propiedades.
La propiedad principal de las máscaras CSS es mask-image
, la cuál se puede pensar en ella como un análogo a background-image
con las imágenes de fondo. En su caso, mask-image
establece una imagen a modo de máscara, y aunque hablamos de imagen, realmente nos referimos a varios tipos de elementos:
Propiedad | Valor |
---|---|
mask-image |
none | url( image) | url( svgfile#id) |
id
Veamos un ejemplo con código CSS:
.element {
width: 600px;
height: 400px;
background: url(gato.jpg) left / cover;
mask-image: radial-gradient(circle 250px at 40% 50%, black 75%, transparent 76%);
}
Puedes probar a hacer cambios en un CodePen para ver como funciona. Con la propiedad de atajo background
establecemos una imagen de fondo con background-image
, colocamos con background-position
y damos tamaño con background-size
, además de dar tamaño de alto y ancho con width
y height
.
Con la propiedad mask-image
creamos una máscara negra basada en un gradiente como la de la imagen. Esta máscara se aplicará al elemento y su imagen de fondo, de modo que la parte en negro oculta y la parte transparente deja ver la imagen:
Esto es una fantástica forma de enmascarar nuestras imágenes y darle formas flexibles y potentes mediante código. Recuerda que puedes utilizar no sólo gradientes radiales, sino otro tipos de gradientes, imágenes con transparencia o formas personalizadas mediante SVG.
Recuerda que al igual que con
background-image
, es posible indicar múltiples máscaras de imágenes, simplemente separando por coma. Si lo haces, recuerda que las propiedades relacionadas utilizarán el valor para todas las máscaras, o respetarán el orden en el caso de separar por comas.
Mediante la propiedad CSS mask-mode
podemos cambiar el modo en el que se crea la máscara. La propiedad tiene los siguientes valores posibles:
Propiedad | Valor |
---|---|
mask-mode |
match-source | alpha | luminance |
En el caso de utilizar un modo alpha
, la máscara utilizará los valores alfa de la máscara para utilizarlos como transparencia. Sin embargo, si configuramos el valor luminance
utilizará los valores con más brillo para utilizarlos como transparencia.
El valor, match-source es el valor que trae por defecto.
La propiedad mask-repeat
se entiende fácil si hacemos el simil con la propiedad background-repeat
de la familia de propiedades de imágenes de fondo, ya que funciona exactamente igual. Los valores disponibles son los siguientes:
Propiedad | Valor | Más info |
---|---|---|
mask-repeat |
repeat | repeat-x | repeat-y | no-repeat | space | round |
Ver background-repeat |
Por defecto, la máscara de imagen establecida se repetirá en el eje x y en el eje y, ya que tiene establecido el valor repeat. Utilizaríamos repeat-x
si queremos que se repita solo en horizontal, repeat-y
para repetir en vertical o no-repeat
para que no se repita en ningún eje.
Por último, los valores space
o round
definen como quieres que ajuste el espacio sobrante.
La propiedad mask-position
permite colocar la máscara de imagen y desplazarla una cierta cantidad de espacio. Por defecto, el valor indicado es 0% 0%, por lo que se colocará lo más a la izquierda y arriba posible. Sin embargo, podemos cambiar los valores a:
left
, center
o right
para el eje xtop
, center
o bottom
para el eje yObviamente, también puedes combinarlos.
Propiedad | Valor | Más info |
---|---|---|
mask-position |
0% 0% | x y | Ver background-position |
Si tienes más dudas, echa un vistazo a la propiedad background-position
, en el tema de imágenes de fondo, ya que funciona de forma muy parecida.
La propiedad mask-clip
se puede usar para indicar el área que será afectada por una máscara. Por defecto, el valor establecido es border-box, que incluye contenido, relleno y borde (ver tema de modelo de cajas). Sin embargo, se pueden utilizar otros valores:
Propiedad | Valor | Más info |
---|---|---|
mask-clip |
border-box | no-clip | content-box | padding-box | fill-box | stroke-box | view-box |
Ver background-clip |
Entre esos otros valores se encuentran:
padding-box
: El área incluye padding y contenido (excluye borde).content-box
: El área incluye sólo contenido (excluye padding y borde).no-clip
: El contenido no es recortado.margin-box
: El área incluye márgenes.El resto de valores, se utilizan específicamente en ficheros SVG:
view-box
: El área incluye el viewbox (lienzo).fill-box
: El área incluye el contenido del SVG.stroke-box
: El área incluye los trazos (bordes) del SVG.Con prácticamente los mismos valores que la propiedad anterior, la propiedad mask-origin
permite indicar el origen del área de la máscara de imagen. Con los siguientes valores puedes marcar como se comportará el área respecto a su posición de origen:
Propiedad | Valor | Más info |
---|---|---|
mask-origin |
border-box | content-box | padding-box | fill-box | stroke-box | view-box |
Ver background-origin |
Si tienes dudas, consulta las propiedades background-clip y background-origin, en el apartado de fondos de imágenes.
La propiedad mask-size
nos permite indicar el tamaño que tendrá la máscara indicada. Observa que puedes indicar dos valores, que corresponden al tamaño de ancho y al tamaño de alto. Puedes indicar valores como:
Propiedad | Valor | Más info |
---|---|---|
mask-size |
auto auto | |
Ver background-size |
El significado de cada valor es el siguiente:
Veamos un ejemplo:
body {
background: repeating-linear-gradient(-25deg, purple 0, blueviolet 25%);
}
.element {
width: 300px;
height: 300px;
padding: 25px;
background: linear-gradient(rgb(0,0,0, 0.75), deeppink);
border: 4px solid #000;
-webkit-mask-image: url("mask.svg#mask");
-webkit-mask-position: 32px 32px;
-webkit-mask-repeat: round;
-webkit-mask-size: 64px 64px;
}
Observa que en este caso, estamos indicando los prefijos -webkit-
para que funcione en Chrome. Estamos usando como máscara el fichero externo mask.svg
, donde tendremos un elemento con id="mask"
que es el trayecto que usaremos para usar de máscara. Además, marcamos una posición para colocar la máscara, la repetimos redondeando el espacio sobrante y le damos un tamaño concreto de 64x64
.
La propiedad mask-composite
te permite indicarle al navegador como se va a componer la máscara de imagen en el caso de tener múltiples máscaras definidas. Observa que entre los valores disponibles se encuentran los siguientes:
Propiedad | Valor |
---|---|
mask-composite |
add | subtract | intersect | exclude |
El valor add es el valor por defecto, por lo que por norma general, se suman (superponen) las máscaras. Estos métodos de composición se utilizan aplicándose a la máscara actual y al resto de máscaras inferiores a ella.
Valor | Descripción |
---|---|
add |
Superpone o suma la máscara actual sobre el resto de máscaras inferiores (source over) |
subtract |
La máscara actual resta el contenido del resto de máscaras inferiores (source out) |
intersect |
Se queda con la parte común de la máscara actual y las inferiores (source in) |
exclude |
Se queda con la parte no común de la máscara actual e inferiores (xor) |
Así pues, con add
podríamos superponer varias máscaras, con subtract
restar el contenido de una máscara al contenido del resto, con intersect
quedarse con la intersección (parte común) de la máscara actual y el resto de máscaras inferiores y con exclude
quedarse con lo contrario a la intesección (*parte no común).
mask
Por último, la propiedad mask
nos permitirá abreviar todas las propiedades relacionadas con las máscaras CSS, en una sola propiedad de atajo o shorthand. Recuerda que si no necesitas indicar algún valor, puedes omitirlo y se utilizará el valor por defecto:
.element {
/* <mask-image> <mask-position> / <mask-size> <mask-repeat> <mask-origin> <mask-clip> <mask-composite> <mask-mode> */
mask: url("mask.svg#path") 25% 25% / 200px 250px repeat-x border-box border-box add match-source;
}
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev