Programar Plustiene esta forma genial de diseñar enlaces flotantes. De forma predeterminada, el texto es un azul bastante común. Pero coloque el cursor sobre los enlaces y se rellenarán con un degradado lineal.
😍
Bastante ordenado, ¿verdad? Y el truco no es tan complicado. En vuelo estacionario…
- dar al enlace un fondo degradado lineal,
- recortar el fondo del texto y
- Dale al texto un relleno transparente para que se vea el fondo.
Se ve así en CSS:
a {
color: #007db5;
}
a:hover {
background: linear-gradient(90deg,#ff8a00,#e52e71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}Observe la -webkit- prefijo, que es obligatorio por ahora. Hay un poco más en la implementación real aquí en CSS-Tricks, pero este poco nos da lo que estamos buscando.
Pero ese no es el punto aquí. Justo el otro día, Brad Westfall llamó para informarnos que esta técnica también tiene efecto en emojis que, como cualquier otro texto, se rellena de forma transparente al pasar el mouse.
Lo notó en un enlace en una de nuestras publicaciones.
No es lo peor. Y tiene mucho sentido. Quiero decir, un emoji es un glifo como cualquier otro texto en un archivo de fuente, ¿verdad? Simplemente son una fuente de color y toman la forma de una imagen. Por supuesto, se tratarían como cualquier otro glifo en una situación como esta, en la que santificamos el color de relleno.
Pero si mantener el color intacto en los emojis es un requisito, eso se puede resolver envolviendo el emoji en un lapso y estableciendo su relleno de nuevo a su estado inicial.
Pero, ¿quién quiere escribir un lapso cada vez que aparece un emoji en un enlace? 👎
Si está buscando una solución CSS, no tenemos suerte. Dicho esto, la especificación de nivel 4 del módulo de fuentes CSS incluye una definición para una propuesta font-variation-emoji propiedad. Sin embargo, no hay mucho sobre él (que pueda encontrar) en este momento y no parece estar diseñado para este tipo de cosas. Un vistazo rápido a alguna discusión relacionada con la propuesta sugiere que se trata más de la forma en que algunos navegadores o Los sistemas convierten automáticamente Unicode en emoji y cómo controlar ese comportamiento.
También está la definición propuesta de font-palette en el mismo borrador de especificaciones que parece una forma de controlar las fuentes de color, eso es lo que son los emojis al final del día. Pero esta tampoco es la solución.
Parece que la única forma de evitar que el relleno de un emoji se cambie sin un intervalo es algún tipo de solución de JavaScript. Mire servicios como WordPress, Dropbox, Facebook y Twitter. Todos implementan sus propios conjuntos de emojis personalizados. ¿Y qué usan? Imagenes
¡Sí, junto con muchos divs y demás!
Esa sería una forma de hacerlo. Si el emoji se reemplaza con una imagen (un SVG en este ejemplo específico), eso ciertamente lo excluiría de ser llenado junto con el texto del enlace.
O, oye, ¿por qué no evitar que nos metamos en la situación y colocar esa maldita cosa fuera del enlace?
Probablemente esa sea la ruta que deberíamos haber tomado desde el principio. Pero es posible que un emoji no aparezca al principio o al final de un enlace, sino en algún lugar en el medio. Simplemente subraya el hecho de que hay casos en los que tener algún tipo de control aquí podría ser útil.