Información sobre herramientas perfectas con recorte y enmascaramiento de CSS

El recorte y el enmascaramiento existen desde hace un tiempo en CSS e incluso tienen un soporte de navegador bastante decente. Recientemente trabajé en un proyecto que necesitaba utilizar una técnica de recorte para la información sobre herramientas que mostraban los enlaces anteriores en el texto.

Esa información sobre herramientas tiene dos diseños según su contenido:

Quizás no creas que la información sobre herramientas de texto requiera ningún recorte. Se puede colocar un pseudoelemento en la parte inferior para agregar la pequeña muesca, ¿verdad? ¡Tienes toda la razón! Debido a que el fondo de la información sobre herramientas es de un color simple, realmente no hay necesidad de trucos de CSS y todo eso.

Pero al recortar la imagen en el segundo diseño es donde las cosas se ponen interesantes…

Este es el proceso de pensamiento que siguió mi mente cuando comencé la tarea.

Idea 1: ruta de clip y polígono

La clip-pathpropiedad CSS nos permite definir un polígono personalizado con valores porcentuales para realizar el camino que queremos.
Esta solución suele ser suficiente si la forma del camino es lo suficientemente simple. En la demostración a continuación, estoy usando calc()valores para asegurarme de que el clip responda completamente, mientras que el pequeño triángulo permanece del mismo tamaño sin importar cuán estirado esté el padre.

.tooltip {  clip-path: polygon(    0% 0%, // Top left point    100% 0%, // Top right point    100% calc(100% - 10px), // Bottom right point    calc(50% + 10px) calc(100% - 10px), // Center right of the triangle    50% 100%, // Tip of the triangle    calc(50% - 10px) calc(100% - 10px), // Center left of the triangle    0% calc(100% - 10px) // Bottom left point  );}

Esta solución es muy limpia pero, en mi caso, no es lo suficientemente buena ya que no tengo una muesca triangular recta, sino una forma personalizada.

Idea 2: ruta de clip y SVG

Usar una ruta SVG parecía una buena solución. Primero, exporta su ruta de recorte SVG y luego la usa en su CSS con el url(#clipPathId)valor.

Consulte la demostración a continuación. ¿Ves algún problema con el camino?

La flecha se estira según la proporción de la imagen. Dado que la pequeña muesca es parte de toda la forma del camino, está tan estirada como la parte rectangular del camino se estira en tamaño.

Idea 3: imagen-máscara

Ahora esto es lo que descubres con la mask-imagepropiedad CSS en CSS: ¡puedes combinar capas de máscara! Piénselo como background-imageen CSS. Puede aplicar múltiples degradados o imágenes en un solo elemento. Ahora bien, ¿qué pasa si combinas todas esas capas para generar la máscara final que necesitas?

Esto es exactamente lo que vamos a hacer aquí con dos capas:

1. Un rectángulo grande que cubre todo el bloque excepto por una franja en la parte inferior (que se muestra en verde)
2. Una imagen de la flecha (mostrada en rosa)

Con esa solución, el rectángulo se puede estirar de acuerdo con las dimensiones de nuestra información sobre herramientas y la flecha siempre mantendrá su tamaño fijo.

Todo el código y las demostraciones a continuación no tienen prefijos y las demostraciones utilizan Autoprefixer. En el momento en que escribo este artículo, Edge, Chrome y Safari requieren prefijos.

Tal como lo haríamos con las propiedades de fondo, usaremos tres propiedades de máscara diferentes para definir nuestras dos capas:

• mask-image: Esta propiedad nos permite dibujar el rectángulo con un fondo lineal y la flecha con un SVG en línea.
• mask-position: El rectángulo no necesita una posición (ya que comienza desde arriba a la izquierda), pero la flecha debe estar ubicada en el centro-abajo.
• mask-repeat: Necesitamos evitar repetir ambas capas; de lo contrario, el degradado lineal cubriría todo el elemento cuando se repita.

.tooltip {  mask-image:    linear-gradient(#fff, #fff), /* Rectangle */    url('data:image/svg+xml;utf8,'); /* Bottom arrow mask-position: */    0 0, /* Rectangle */    50% 100%; /* Bottom arrow */  mask-size:    100% calc(100% - 18px), /* Rectangle */    38px 18px; /* Bottom arrow */  mask-repeat: no-repeat;}

¡Tada! Cambie las dimensiones de la información sobre herramientas o reemplace la imagen y la flecha inferior mantendrá su proporción original.

Formas más complejas

Vamos a afinarnos un poco y profundizar más con esta técnica. Me inspiré en la aplicación iMessage en iOS e intenté reproducir la misma información sobre herramientas con esta técnica de enmascaramiento.

Tuve que dibujar más capas para que mi máscara representara cada esquina redondeada:

• cuatro círculos, uno para cada esquina (se muestra en rojo)
• un rectángulo horizontal (mostrado en azul)
• un rectángulo vertical (que se muestra en verde)
• un SVG para la flecha (que se muestra en amarillo)

El código completo será un poco más largo ya que tenemos más capas para dibujar, pero la lógica sigue siendo la misma. Las esquinas se dibujan utilizando cuatro degradados radiales. Para llenar el rectángulo, necesitamos dos rectángulos (uno vertical y otro horizontal) como se muestra arriba. Y finalmente, nuestra pequeña flecha que usa un SVG en línea.

.tooltip {  --radius: 25px;  mask-image:    radial-gradient(#fff (var(--radius) - 1), #fff0 var(--radius)), /* Top left corner */    radial-gradient(#fff (var(--radius) - 1), #fff0 var(--radius)), /* Top right corner */    radial-gradient(#fff (var(--radius) - 1), #fff0 var(--radius)), /* Bottom left corner */    radial-gradient(#fff (var(--radius) - 1), #fff0 var(--radius)), /* Bottom right corner */    linear-gradient(#fff, #fff), /* Horizontal gradient */    linear-gradient(#fff, #fff), /* Vertical gradient */    url('data:image/svg+xml;utf8,'); /* Bottom right icon */  mask-position:     0 0, /* Top left corner */    100% 0, /* Top right corner */    0 100%, /* Bottom left corner */    100% 100%, /* Bottom right corner */    0 var(--radius), /* Horizontal gradient */    var(--radius) 0, /* Vertical gradient */    100% 100%; /* Bottom right icon */  mask-size:    (var(--radius) * 2) (var(--radius) * 2),  /* Top left corner */    (var(--radius) * 2) (var(--radius) * 2),  /* Top right corner */    (var(--radius) * 2) (var(--radius) * 2),  /* Bottom left corner */    (var(--radius) * 2) (var(--radius) * 2),  /* Bottom right corner */    100% calc(100% - #{var(--radius) * 2}), /* Horizontal gradient */    calc(100% - #{var(--radius) * 2}) 100%, /* Vertical gradient */    (39px / 2) (25px / 2); /* Bottom right icon */  mask-repeat: no-repeat;}

Como puede ver, podemos crear una versión con la flecha a la izquierda o a la derecha usando una versión invertida de la flecha y colocándola en una esquina diferente. El truco también funciona bien en información sobre herramientas sin imágenes. Pero como dije al principio de este artículo, probablemente no necesites tanto CSS si solo tienes un fondo simple para diseñar.

---

Si desea obtener más información sobre el recorte y el enmascaramiento en CSS, hay muchos otros artículos excelentes aquí sobre CSS-Tricks que vale la pena consultar.

Recorte y enmascaramiento en CSS

ruta de clip máscara-imagen información sobre herramientas Chris Coyier

Enmascaramiento versus recorte: cuándo usar cada uno

ruta de clip máscara-imagen información sobre herramientas Sarah Drasner

Composición de máscaras: el curso intensivo

ruta de clip máscara-imagen información sobre herramientas Ana Tudor

Técnicas y efectos CSS para texto knockout

ruta de clip máscara-imagen información sobre herramientas Preethi

#185: Jugar con máscaras CSS

ruta de clip máscara-imagen información sobre herramientas Chris Coyier

33: Recorte y enmascaramiento

ruta de clip máscara-imagen información sobre herramientas Chris Coyier

Herramientas de recorte y enmascaramiento en CSS

Recorte y enmascaramiento en CSS: El recorte y enmascaramiento son técnicas fundamentales para manipular la apariencia visual de elementos HTML mediante el uso de propiedades CSS específicas. Estas técnicas permiten ocultar partes de elementos, modificar su forma y crear efectos visuales complejos sin alterar el flujo del documento HTML.

Propiedades de recorte: CSS ofrece varias propiedades para el recorte y la enmascaramiento de elementos:

1. clip-path: Permite definir una forma personalizada mediante puntos de control para recortar un elemento.

.element {
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%);
}

mask-image y mask-type:

Utilizados conjuntamente, permiten aplicar una imagen como máscara en un elemento, controlando qué partes se muestran o se ocultan.

.element {
mask-image: url('mask.svg');
mask-type: luminance;
}

overflow y text-overflow:

Controlan cómo se maneja el desbordamiento de contenido dentro de un elemento, permitiendo ocultar el contenido sobrante o mostrarlo de manera controlada.

.element {
overflow: hidden;
text-overflow: ellipsis;
}

Aplicaciones prácticas: Estas técnicas son especialmente útiles para crear efectos visuales avanzados como recortar imágenes en formas complejas, ocultar partes de elementos deseados, o incluso crear animaciones y transiciones suaves utilizando keyframes y transformaciones.

Compatibilidad y consideraciones: Aunque las propiedades de recorte y enmascaramiento han ganado una amplia compatibilidad en los navegadores modernos, es importante realizar pruebas cruzadas para garantizar una experiencia consistente en diferentes plataformas y dispositivos.

Preguntas frecuentes

¿Cuándo debería utilizar clip-path en lugar de otras técnicas de recorte?

Clip-path es ideal cuando se necesitan formas personalizadas y complejas para recortar elementos, como formas geométricas específicas o máscaras detalladas. Proporciona flexibilidad en la creación de formas mediante puntos de control definidos, permitiendo efectos visuales precisos y únicos.

¿Cuál es la diferencia entre mask-image y clip-path?

Clip-path recorta un elemento basado en una forma definida mediante puntos de control, mientras que mask-image aplica una imagen como máscara para definir qué partes del elemento son visibles o invisibles. Mask-image permite utilizar imágenes complejas como máscaras, ofreciendo una mayor variedad de efectos visuales.