Recreando el efecto degradado de Facebook Messenger con CSS

Un domingo por la mañana me desperté un poco más temprano de lo que me hubiera gustado gracias al persistente zumbido de mi teléfono. Extendí la mano, conecté Facebook Messenger y me uní a la conversación. Muy pronto mi atención pasó de las conversaciones reales al efecto de degradado original de las burbujas de mensajes que las contenían. Déjame mostrarte lo que quiero decir:

Esta es una nueva característica de Messenger, que le permite elegir un degradado en lugar de un color simple para el fondo de los mensajes de chat. Actualmente está disponible en la aplicación móvil y en el sitio de Facebook, pero aún no en el sitio de Messenger. El degradado aparece “fijo”, por lo que las burbujas de chat parecen cambiar de color de fondo a medida que se desplazan verticalmente.

Pensé que esto parecía algo que se podría hacer en CSS, así que… ¡desafío aceptado!

Repasemos mi proceso de pensamiento mientras intentaba recrearlo y explicar las características de CSS que se utilizaron para que funcionara. Además, veremos cómo lo implementó Facebook ( alerta de spoiler: no como lo hice yo) y cómo se comparan los dos enfoques.

Ensuciarnos las manos

Primero, veamos el ejemplo nuevamente para ver qué es exactamente lo que estamos tratando de lograr aquí.

En general, tenemos un diseño de mensajería bastante estándar: los mensajes se dividen en burbujas que van de arriba a abajo, los nuestros a la derecha y los del resto de personas del chat a la izquierda. Todos los de la izquierda tienen un color de fondo gris, pero los de la derecha parecen compartir el mismo degradado de fondo fijo. ¡Eso es practicamente todo!

Paso 1: configurar el diseño

Esta parte es bastante simple: organicemos los mensajes en una lista ordenada y apliquemos algo de CSS básico para que se parezca más a una aplicación de mensajería real:

ol  liHi, babe!/li  liI have something for you./li  liWhat is it?/li  liJust a little something./li  liJohnny, it’s beautiful. Thank you. Can I try it on now?/li  liSure, it’s yours./li  liWait right here./li  liI’ll try it on right now./li/ol

Cuando se trata de dividir los mensajes a izquierda y derecha, mi reacción instintiva fue usar flotadores. Podríamos usar float: leftmensajes de la izquierda y float: rightmensajes de la derecha para que se adhieran a diferentes bordes. Luego, aplicaríamos clear: bothen cada mensaje para que se apilen. Pero hay un enfoque mucho más moderno: ¡flexbox!

Podemos usar flexbox para apilar los elementos de la lista verticalmente flex-direction: columny decirle a todos los elementos secundarios que se ciñan al borde izquierdo (o “alinear los bordes de los márgenes de inicio cruzado de los elementos secundarios flexibles con los bordes de los márgenes de inicio cruzado de las líneas”, si lo prefiere los términos técnicos) con align-items: flex-start. Luego, podemos sobrescribir el align-itemsvalor de elementos flexibles individuales configurándolos align-self: flex-end.

¿Quieres decir que no pudiste visualizar el código basado en eso? Bien, así es como se ve:

.messages {  /* Flexbox-specific styles */  display: flex;  flex-direction: column;  align-items: flex-start;  /* General styling */  font: 16px/1.3 sans-serif;  height: 300px;  list-style-type: none;  margin: 0 auto;  padding: 8px;  overflow: auto;  width: 200px;}/* Default styles for chat bubbles */.messages li {  background: #eee;  border-radius: 8px;  padding: 8px;  margin: 2px 8px 2px 0;}/* Styles specific to our chat bubbles */.messages li.ours {  align-self: flex-end; /* Stick to the right side, please! */  margin: 2px 0 2px 8px;}

Algunos rellenos y colores aquí y allá y esto ya se parece lo suficiente como para pasar a la parte divertida.

Paso 2: ¡Coloreemos las cosas!

La idea inicial para el degradado me surgió de este tweet de Matthias Ott ( que Chris recreó en otra publicación ):

Este es un truco desagradable con un pseudoelemento encima del texto y el modo de mezcla no funciona en IE/Edge, pero: Sí, ¡esto se puede hacer con CSS! https://t.co/FLKGvd1YoI

— Matthias Ott (@m_ott) 3 de diciembre de 2018

La pista clave aquí es mix-blend-mode, que es una propiedad CSS que nos permite controlar cómo el contenido de un elemento se combina con lo que hay detrás de él. Es una característica que ha estado presente en Photoshop y otras herramientas similares durante algún tiempo, pero que es bastante nueva en la web. Hay una entrada de almanaque para la propiedad que explica todos sus valores posibles.

Uno de los valores es screen: toma los valores de los píxeles del fondo y del primer plano, los invierte, los multiplica y los invierte una vez más. Esto da como resultado un color más brillante que el color de fondo original.

La descripción puede parecer un poco confusa, pero lo que esencialmente significa es que si el fondo es monocromático, donde sea que el fondo sea negro, los píxeles del primer plano se muestran completamente y donde sea blanco, el blanco permanece.

Entonces, para nuestros propósitos, el fondo será la propia ventana de chat y el primer plano contendrá un elemento con el degradado deseado establecido como fondo que se ubica sobre el fondo. Luego, aplicamos el modo de fusión apropiado al elemento de primer plano y cambiamos el estilo del fondo. Queremos que el fondo sea negro en los lugares donde queremos que se muestre el degradado y blanco en otros lugares, por lo que diseñaremos las burbujas dándoles un fondo negro liso y texto blanco. Ah, y recordemos agregarlo pointer-events: noneal elemento de primer plano para que el usuario pueda interactuar con el texto subyacente.

En este punto, también cambié un poco el HTML original. Todo el chat es un contenedor en un contenedor adicional que permite que el gradiente permanezca “fijo” sobre la parte desplazable del chat:

.messages-container:after {  content: '';  background: linear-gradient(rgb(255, 143, 178) 0%, rgb(167, 151, 255) 50%, rgb(0, 229, 255) 100%);  position: absolute;  left: 0;  top: 0;  height: 100%;  width: 100%;  mix-blend-mode: screen;  pointer-events: none;}.messages li {  background: black;  color: white;  /* rest of styles */}

El resultado se parece a esto:

Paso 3: excluye algunos mensajes del degradado

¡Ahora el degradado se muestra donde están las burbujas de texto debajo! Sin embargo, sólo queremos que se muestre sobre nuestras burbujas, las que están en el borde derecho. Una pista de cómo se puede lograr esto está oculta en la descripción de la mix-blend-modepropiedad de MDN:

La mix-blend-modepropiedad CSS establece cómo el contenido de un elemento debe combinarse con el contenido del elemento principal y el fondo del elemento.

¡Así es! El fondo. Por supuesto, el efecto solo tiene en cuenta los elementos HTML que están detrás del elemento actual y tienen un orden de pila inferior. Afortunadamente, el orden de apilamiento de los elementos se puede cambiar fácilmente con la z-indexpropiedad. Entonces, todo lo que tenemos que hacer es darle a las burbujas de chat de la izquierda un valor más alto z-indexque el del elemento de primer plano y se elevarán por encima de él, fuera de la influencia de mix-blend-mode! Luego podemos diseñarlos como queramos.

Hablemos del soporte del navegador

En el momento de escribir este artículo, mix-blend-modeno es compatible en absoluto con Internet Explorer y Edge. En esos navegadores, el degradado se aplica a todo el chat y las burbujas de otros aparecen encima, lo que no es una solución ideal.

Estos datos de soporte del navegador son de Caniuse , que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

Móvil/Tableta

Entonces, esto es lo que obtenemos en los navegadores no compatibles:

Afortunadamente, todos los navegadores compatibles mix-blend-modetambién admiten consultas de funciones CSS . Usarlos nos permite escribir primero estilos alternativos para navegadores no compatibles e incluir efectos sofisticados para los navegadores que los admiten. De esta manera, incluso si un usuario no puede ver el efecto completo, aún puede ver todo el chat e interactuar con él:

Aquí está el bolígrafo final con el efecto completo y estilos alternativos:

Ahora veamos cómo lo hizo Facebook.

Resulta que la solución de Facebook es casi lo opuesto a lo que cubrimos aquí. En lugar de colocar el degradado sobre el chat y hacer agujeros en él, aplican el degradado como una imagen de fondo fija a todo el chat. El chat en sí está lleno de un montón de elementos vacíos con fondos y bordes blancos, excepto donde el degradado debería ser visible.

El código HTML final que genera la aplicación Facebook Messenger React es bastante complejo y difícil de navegar, por lo que recreé un ejemplo mínimo para demostrarlo. Muchos de los elementos HTML vacíos se pueden cambiar por pseudoelementos:

Como puede ver, el resultado final es similar a la mix-blend-modesolución, pero con un poco de marcado adicional. Además, su enfoque proporciona más flexibilidad para contenido enriquecido, como imágenes y emojis. El mix-blend-modeenfoque realmente no funciona si el fondo no es monocromático y no he podido encontrar una manera de “elevar” el contenido interno por encima del degradado o sortear esta limitación de otra manera.

Because of this limitation, it’s wiser to use Facebook’s approach in an actual chat application. Still, our solution using mix-blend-mode showcases an interesting way to use one of the most under-appreciated CSS properties in modern web design and hopefully it has given you some ideas on what you could do with it!