Clip-Path vs Mask-Image en CSS: Aplicaciones Reales en Dos Landing Pages
Explora cómo apliqué clip-path y mask-image en dos proyectos web de mi portafolio. Son ejemplos prácticos cómo usar estas propiedades para recortar y diseñar elementos con estilo en CSS.
¿Qué es la propiedad css Clip-Path?
Lo que hace es mostrar parte de un elemento que debe mostrarse, la parte interna se muestra mientras que lo que esta por fuerta queda oculto. Se puede crear una ruta de recorte con varias formas básicas o un SVG además que permite animación.
Como lo apliqué.
Primero tengo que exportar el svg de Figma, tengo una extención llamada SVG Export, que de paso me optimiza el svg y me permite copiar directamente. El svg tiene que estar presente en mi html, para que pueda ser llamado una vez lo aplique en mi css.
.hero__img {
-webkit-clip-path: url(#hero-path);
clip-path: url(#hero-path);
z-index: -1;
}Algo importante que descubrí al aplicarlo fue que debía convertir mi SVG de absluto a relativo, ya que no se adaptaba al ancho de la pantalla y mi imagen se desbordaba.
<svg width="0" height="0">
<clipPath id="hero-path" clipPathUnits="objectBoundingBox"><path d="M0.926,0.061 c0,-0.034,-0.031,-0.061,-0.07,-0.061 H0.074 C0.033,0,0,0.029,0,0.065 v0.625 c0,0.034,0.031,0.061,0.07,0.061 h0.225 c0.041,0,0.074,0.029,0.074,0.065 v0.07 c0,0.034,0.031,0.061,0.07,0.061 h0.078 c0.016,0,0.03,0.004,0.042,0.011 c0.028,0.017,0.056,0.042,0.089,0.042 H0.926 c0.041,0,0.074,-0.029,0.074,-0.065 V0.273 c0,-0.034,-0.037,-0.06,-0.06,-0.088 A0.074,0.064,0,0,1,0.926,0.147 V0.061"></path></clipPath>
</svg>
Puedes colocar el svg en cualquier parte de tu html, yo lo suelo poner en el footer de esta manera.
¿Qué es la propiedad css Mask-Image?
Al usar esta propiedad css, te da la opción de usar una imagen como máscara. Es decir que puedes usar svg e incluso un gradiente ya que los gradientes son tratados como imagen y puedes conseguir efectos interesantes.
Aquí exporto mi máscara pero en formato .png y de color de relleno blanco, que cuado lo aplique será la parte visible de mi contenido.
.hero__rank-text {
-webkit-mask-image: url("../assets/images/hero/mask.png");
mask-image: url("../assets/images/hero/mask.png");
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
mask-position: top;
}Y de esta maner se aplica en mi css.