Cómo Usar el Masking En Css

by Silvia Mazzetta Date: 28-09-2020 css css3 design diseñoweb


Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro efecto, entonces necesitas usar un enmascaramiento. Este post explica cómo usar la propiedad mask-image en CSS, lo que te permite especificar una imagen para usarla como una capa de máscara. Esto te da tres posibles opciones: usar un archivo de imagen como máscara, un SVG o un degradado.

 

Compatibilidad con los navegadores

 

La mayoría de los navegadores sólo tienen un soporte parcial para la propiedad de enmascaramiento CSS estándar. Necesitarás usar el prefijo -webkit- además de la propiedad estándar para conseguir la mejor compatibilidad con los navegadores. Consulta la web ¿Can I use?, para obtener información completa sobre la compatibilidad de los navegadores.

Si bien la compatibilidad con los navegadores mediante los prefijos es buena, cuando utilices la máscara para hacer visible el texto de la parte superior de una imagen, ten cuidado con lo que sucederá si la máscara no está disponible. Puede valer la pena utilizar mask-image  o  -webkit-mask-image para detectar el soporte para máscara de imagen y proporcionar un respaldo legible antes de agregar su versión enmascarada.

 
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
/* aquí el código que requiere una máscara
*/
}
 

Enmascarar 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 bajo esa área sea invisible. Sin embargo, usar un área semitransparente permitirá que parte de la imagen original se vea a través de ella.
Estos son algunos ejemplos:

1. Imagen original: un globo sin máscara.  

 
<div class="container">
<img src="https://www.ma-no.org/cache/galleries/contents-2032/balloons.jpg" alt="Balloon">
</div>
 
.container img {
height: 100%;
width: 100%;
object-fit: cover;
-webkit-mask-size: cover;
mask-size: cover;
}
 

2. Imagen tiene una que tiene una estrella blanca sobre un fondo totalmente transparente.



 
<div class="container">
<img class="uno" src="https://www.ma-no.org/cache/galleries/contents-2032/balloons.jpg" alt="Balloon">
</div>
 
.uno {
-webkit-mask-image: url('https://www.ma-no.org/cache/galleries/contents-2032/star-mask.png');
mask-image: url('https://www.ma-no.org/cache/galleries/contents-2032/star-mask.png'); 
}
 

3. La tercera imagen tiene una estrella blanca sobre un fondo degradado.



 
<div class="container">
<img class="dos" src="https://www.ma-no.org/cache/galleries/contents-2032/balloons.jpg" alt="Balloon">
</div>


 
.dos {
-webkit-mask-image: url('https://www.ma-no.org/cache/galleries/contents-2032/star-mask-gradient.png');
mask-image: url('https://www.ma-no.org/cache/galleries/contents-2032/star-mask-gradient.png');
}
 

En este ejemplo también estoy usando la propiedad mask-size con un valor cover . Esta propiedad funciona de la misma manera que el background-size . Puedes usar las palabras clave contain o puedes dar un tamaño al fondo usando cualquier unidad de longitud válida, o un porcentaje.

También puedes repetir la máscara de la misma manera que puedes repetir una imagen de fondo, para utilizar una imagen pequeña como patrón de repetición.

 

Enmascarar con SVG

 

En lugar de usar un archivo de imagen como máscara, podrías usar SVG. Hay un par de maneras de conseguirlo. 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 puede aplicarse a cualquier elemento HTML, no sólo a una imagen. Desafortunadamente Firefox es el único navegador que soporta este enfoque.

Sin embargo, no todo está perdido, ya que para el escenario más común de enmascarar una imagen, podemos incluir la imagen en el SVG.

 
<div class="container">
<svg 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>
<image mask="url(#mask)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://cdn.glitch.com/04eadd2b-7dd4-43fc-af3d-cff948811986%2Fballoons.jpg?v=1597755892826" width="400" height="300"></image>
</svg>
</div>
 
img { 

max-width: 100%; display: block; } 
.container { width: 400px; height: 300px; margin: 1em auto;} 
 

Enmascarar con un degradado

 

Usar un degradado CSS como máscara es una forma elegante de conseguir un área enmascarada sin necesidad de tomarse la molestia de crear una imagen o SVG.

Un simple degradado lineal usado como máscara podría asegurar que la parte inferior de una imagen no sea demasiado oscura debajo de un pie de foto, por ejemplo.

 
<figure class="container">
<img src="https://www.ma-no.org/cache/galleries/contents-2032/balloons.jpg" alt="balloons">
<figcaption>Balloons</figcaption>
</figure>
 
img { max-width: 100%; display: block; } 

.container { max-width: 400px; hight: 300px; margin: 1em auto; position: relative; border:1px solid #ccc}
.container img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to top, transparent 5%, black 100%); mask-image: linear-gradient(to top, transparent 5%, black 100%); } 
.container figcaption { position: absolute; bottom: 1em; right: 1em; font-size: 150%; color: #333; }
 

Puedes usar cualquiera de los tipos de gradientes soportados, y ser tan creativo como quieras.

El siguiente ejemplo utiliza un gradiente radial para crear una máscara circular para iluminar detrás del pie de foto.

 
<figure class="container">
<img src="https://www.ma-no.org/cache/galleries/contents-2032/balloons.jpg" alt="balloons">
<figcaption>Balloons</figcaption>
</figure>
 
img { 
 max-width: 100%; display: block;} 

.container {
max-width: 400px;
hight: 300px;
margin: 1em auto;
position: relative;
border:1px solid #ccc;
}
.container img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: radial-gradient(circle at 80% 70%, rgba(255,255,255,.1) 0%, rgba(0,0,0,1) 40%); mask-image: radial-gradient(circle at 80% 70%, rgba(255,255,255,.1) 0%, rgba(0,0,0,1) 40%);
 -webkit-mask-size: 400px 300px; }
.container figcaption { position: absolute; bottom: 1em; right: 1em; font-size: 150%; 
color: #333; 

  } 
 

Usar múltiples máscaras

 

Al igual que con las imágenes de fondo, puedes especificar múltiples fuentes de máscara, combinándolas para obtener el efecto que deseas. Esto es particularmente útil si quieres usar un patrón generado con gradientes CSS como tu máscara. Estos típicamente usarán múltiples imágenes de fondo y por lo tanto pueden ser traducidos fácilmente en una máscara.

Aquí podéis encontras unos ejemplos de patrones generados con gradientes en CSS. El código,que usa imágenes de fondo, se ve así

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, tendrás que sustituir las propiedades de background-* por las propiedades de la máscara correspondiente, incluyendo los prefijos del -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;
 

Hay algunos efectos muy bonitos que se pueden hacer aplicando patrones de gradientes a las imágenes.

Junto con el clipping (recorte), las máscaras CSS son una forma de añadir interés a las imágenes y otros elementos HTML sin necesidad de utilizar una aplicación gráfica.




 

Photo by Julio Rionaldo on Unsplash.

Technology vector created by pikisuperstar - www.freepik.com
 
by Silvia Mazzetta Date: 28-09-2020 css css3 design diseñoweb visitas : 1468  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 6 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products. 

 
 
 

Artículos relacionados

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Modo oscuro persistente con CSS y JS

Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre…

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

Cómo superponer múltiples imágenes usando CSS?

CSS significa Hoja de Estilo en Cascada. Es un lenguaje de hojas de estilo que define la presentación del documento en un lenguaje de marcado como HTML. La hoja de estilo…

¿Cuál es la diferencia entre Flexbox y Grid?

Vamos directos al grano e intentemos responder a esta pregunta con explicaciones sencillas. Hay muchas similitudes entre Flexbox y Grid, empezando por el hecho de que se utilizan para el diseño…

Transiciones y Transformaciones CSS : guia básica con ejemplos

Desde el lanzamiento de CSS3, las transiciones permiten a los diseñadores web y desarrolladores web front-end crear animaciones sin necesidad de usar JavaScript. A partir de este mismo año 2019, las…

Cómo hacer animaciones en CSS3

Las animaciones CSS son una alternativa más poderosa que las transiciones. En vez de confiar en el secuencia de un estado inicial a un estado final, las animaciones pueden tener…

Guía de Flexbox: las bases

En este artículo aprenderemos a manejar los elementos de nuestra web de una manera más eficiente y eficaz, gracias a la propiedad Flexbox. Pero cuidado, no estamos hablando de una simple…

Grid CSS: la unidad fraccionaria

La unidad fraccionaria (fr) es una nueva forma de medición en CSS, asociada en gran medida a la Grid CSS. Finjamos que nos olvidamos de la Grid CSS o de las…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración