Recientemente, busqué inspiración de codificación, sin talento artístico. Mi enfoque? Replicando creaciones visualmente atractivas por parte de otros, centrándose en un código limpio y conciso. ¡Estos botones de fantasmas dulces me llamaron la atención!

parecían perfectos para un proyecto rápido. En quince minutos, logré esto en Chromium:

Esta técnica merece compartir. Este artículo detalla mi proceso y explora enfoques alternativos.

configuración inicial

un elemento de botón simple forma la base, incorporando un atributo data-ico para la inserción de emoji y una propiedad CSS personalizada, -slist , para la lista de parada en el atributo de estilo.

boo!

Finalización posterior al archivo, descubrí las significativas limitaciones de recorte a texto de Safari. Falla en los elementos del botón, display: flex (y posiblemente grid) elementos y texto de elementos infantiles. En consecuencia, las técnicas descritas aquí son incompatibles con Safari. La solución implica anidar un dentro del botón, aplicando todos los estilos de botón a , y asegurando que cubra la caja de borde del padre. Para los usuarios de Linux que carecen de acceso físico de dispositivo Apple, recomiendo Epiphany (¡gracias, Brian!).

El CSS utiliza un pseudo-elemento :: After para el icono y un diseño de cuadrícula para la alineación de texto/icono. Borde, relleno, fronterizo-radio, el -slist list de parada para el gradiente diagonal, y también se aplican el estilo de fuente.

button {
  display: grid;
  grid-auto-flow: column;
  grid-gap: .5em;
  border: solid .25em transparent;
  padding: 1em 1.5em;
  border-radius: 9em;
  background: 
    linear-gradient(to right bottom, var(--slist)) 
      border-box;
  font: 700 1.5em/ 1.25 ubuntu, sans-serif;
  text-transform: uppercase;

  &::after { content: attr(data-ico) }
}

aclaración en el código anterior: backgro con broty-origin y en segundo plano están configurados en border-box . en segundo plano-oragin posiciona el punto de posposición de fondo 's 0,0 en la izquierda superior del cuadro especificado, determinando la referencia para en segundo plano . border-box asegura que el gradiente abarque toda la caja de borde. El predeterminado padding-box daría como resultado el gradiente solo que cubre el área de relleno.

solución específica de cromo (no estándar)

Este método emplea tres capas de máscara y composición. Se puede encontrar una actualización en la composición de la máscara en [Curso de enlace al choque]. Solo el canal alfa importa en capas de máscara CSS; Los canales RGB no afectan el resultado.

Comenzamos con dos capas: una capa completamente opaca que cubre la caja de borde (alfa = 1 en todas partes) y una segunda capa completamente opaca, restringida a la caja de relleno (alfa = 1 dentro de la caja de padding, 0 afuera).

Visualice cajas de diseño como rectángulos anidados. La capa inferior es completamente opaca a través de la caja de borde. La capa superior es opaca dentro de la caja de relleno y transparente en el área de la frontera. El redondeo de la esquina está determinado por border-radio (y border-width para la caja de padding).

Estas capas se componen usando excluir operación (o xor en webkit). El resultado: alfa = 0 dentro de la caja de padding (ambas capas tienen alfa = 1), y alfa = 1 en el área del borde (primera capa alfa = 1, segunda capa alfa = 0).

el código:

button {
  /* same base styles */
  --full: linear-gradient(red 0 0);
  -webkit-mask: var(--full) padding-box, var(--full);
  -webkit-mask-composite: xor;
  mask: var(--full) padding-box exclude, var(--full);
}

Detalles: los gradientes rojos se utilizan para la brevedad. Los gradientes se utilizan para ambas capas debido a las limitaciones del clip de fondo. Se incluye el estándar máscara-compuesto , con la versión no estándar anulada.

Esto produce un borde de gradiente pero carece de texto. Agregar una tercera capa de máscara, restringida al texto (con texto transparente), y Xoring con el resultado anterior agrega el texto de nuevo. Sin embargo, esto es específico de Chrome debido al valor no estándar text para Mask-Clip . A @admite Bloque garantiza la compatibilidad del navegador cruzado (sin texto en masa en navegadores no soportadores).

button {
  /* same base styles */

  @supports (-webkit-mask-clip: text) {
    -webkit-text-fill-color: transparent;
    --full: linear-gradient(red 0 0);
    -webkit-mask: var(--full) text, var(--full) padding-box, var(--full);
    -webkit-mask-composite: xor;
  }
}

Este es un enfoque simple, pero su dependencia de las características no estándar limita la compatibilidad de su navegador. Explore los métodos alternativos y más ampliamente compatibles.

enfoques alternativos: pseudo-elemento y soluciones de imagen fronteriza

La solución de pseudo-elemento adicional evita enmascarar recortando los antecedentes al área de texto y agregando un borde de gradiente usando un pseudo-elemento absolutamente posicionado. La solución de imagen fronteriza, aunque más simple, tiene limitaciones con border-radio . Estos métodos ofrecen una mejor compatibilidad con el navegador cruzado que la solución específica del cromo. Se proporcionan más detalles y ejemplos de código para estos métodos en el artículo original. La solución de mezcla, también descrita en el artículo original, ofrece otro enfoque pero con limitaciones con respecto a la interacción de fondo. Cada método tiene sus fortalezas y debilidades dependiendo del nivel deseado de soporte de navegador cruzado y requisitos de diseño específicos.