Información sobre herramientas perfecta con recorte y enmascaramiento de CSS | Programar Plus

El recorte y el enmascaramiento han existido durante un tiempo en CSS e incluso tienen un soporte de navegador bastante decente. Recientemente trabajé en un proyecto que necesitaba usar una técnica de recorte para la información sobre herramientas que mostraba los enlaces anteriores en el texto.

Esa información sobre herramientas tiene dos diseños basados ​​en su contenido:

Un diseño es una información sobre herramientas que contiene texto sin formato sobre un fondo sólido.

El otro diseño permite que una imagen cubra todo el espacio.

Es posible que no piense que la información sobre herramientas de texto requiere 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 un color simple, realmente no hay necesidad de trucos CSS y demás.

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: clip-path y polígono

el css clip-path La propiedad nos permite definir un polígono personalizado con valores porcentuales para hacer la ruta que queremos.
Esta solución suele ser suficiente si la forma de su camino es lo suficientemente simple. En la demostración a continuación, estoy usando calc() valores para asegurarse 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: clip-path y SVG

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

Compruebe la demostración a continuación. ¿Ves algún problema con la ruta?

La flecha se estira en función de la proporción de la imagen. Dado que la pequeña muesca es parte de la forma del camino completo, se estira tanto como la parte del rectángulo del camino se estira en tamaño.

Idea 3: máscara-imagen

Ahora aquí está lo que descubrí con el CSS mask-image propiedad en CSS: ¡Puedes combinar capas de máscara! Piénsalo como un background-image en CSS. Puede aplicar múltiples degradados o imágenes en un solo elemento. Ahora, ¿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 a excepción de 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 puede estirarse 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 están libres de prefijos y las demostraciones usan 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, vamos a utilizar 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 la parte superior izquierda), pero la flecha debe colocarse en la parte inferior central.
  • 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

Pongámonos un poco elegantes y profundicemos 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 (mostrado en rojo)
  • un rectángulo horizontal (mostrado en azul)
  • un rectángulo vertical (mostrado en verde)
  • un SVG para la flecha (mostrado 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 la información sobre herramientas sin imágenes. Pero como dije al comienzo de este artículo, probablemente no necesite tanto CSS si solo tiene 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í mismo sobre Programar Plusque vale la pena consultar.

Artículo

el 6 de noviembre de 2016

Recorte y enmascaramiento en CSS

Artículo

el 7 de junio de 2017

Enmascaramiento vs. Recorte: Cuándo Usar Cada Uno

Artículo

el 2 de marzo de 2019

Composición de máscaras: el curso acelerado

Artículo

el 6 de marzo de 2018

Técnicas y efectos de CSS para texto knockout

Video

el 13 de mayo de 2020

#185: Jugando con Máscaras CSS

▶ Duración: 23:32


el 27 de octubre de 2015

33: Recorte y enmascaramiento

(Visited 3 times, 1 visits today)