es.hideout-lastation.com
Cómo mostrar texto en la imagen con CSS3 mix-blend-mode
Los fondos de las imágenes se ven muy bien detrás de los textos de pantallas grandes. Sin embargo, su implementación de CSS no es tan simple. Podemos usar el background-clip: text; propiedad, sin embargo, sigue siendo una característica experimental sin suficiente soporte de navegador.
La alternativa CSS para mostrar un fondo de imagen detrás de un texto está usando la propiedad mix-blend-mode . Los modos de combinación para elementos HTML son compatibles en todos los navegadores de escritorio y dispositivos móviles modernos, con la excepción de algunos, como Internet Explorer.
En esta publicación, vamos a ver cómo funciona mix-blend-mode (dos de sus modos específicos), y cómo puede usarlo para mostrar un texto con fondo de imagen en dos casos de uso:
- cuando la imagen de fondo se puede ver a través del texto
- cuando la imagen de fondo se ejecuta alrededor del texto
Vea algunos ejemplos en la demostración a continuación (las imágenes son de unsplash.com).
La propiedad CSS mix-blend-mode define cómo el contenido y el fondo de un elemento HTML deben combinarse en color .
Echa un vistazo a la lista de modos de fusión, de la cual utilizaremos multiply y screen en esta publicación.
Primero, veamos cómo funcionan estos dos modos de fusión específicos.
Cómo funcionan los modos de mezcla de screen y multiply
Los modos de fusión técnicamente son funciones que calculan un valor de color final utilizando los componentes de color de un elemento y su fondo.
El modo de mezcla múltiple
En el modo de mezcla múltiple, los colores individuales de los elementos y sus fondos se multiplican, y el color resultante se aplica a la versión final combinada.
El modo de mezcla múltiple se calcula de acuerdo con la siguiente fórmula:
B(Cb, Cs) = Cb × Cs
donde: Cb - Componente de color del fondo Cs - Componente de color del elemento de origen B - Función de fusión
Cuando Cb y Cs se multiplican, el color resultante es una mezcla de estos dos componentes de color y es tan oscuro como el más oscuro de los dos colores .
Para crear nuestro fondo de imagen de texto, debemos centrarnos en el caso cuando Cs (el componente de color del elemento de origen) sea negro o blanco .
Si Cs es negro, su valor es 0, el color de salida también será negro, porque Cb × 0 = 0 . Entonces, cuando el elemento es de color negro, no importa de qué color sea el fondo, todo lo que podemos ver después de la fusión es negro.
Si Cs es blanco, su valor es 1, el color de salida es cualquier Cb, porque Cb × 1 = Cb . Entonces, en este caso, vemos el telón de fondo directamente tal como es .
El modo de mezcla de screen
El modo de mezcla de screen funciona de manera similar al modo de mezcla múltiple, pero con el resultado opuesto . Por lo tanto, un primer plano negro muestra el fondo tal como está, y un primer plano blanco muestra blanco con cualquier fondo.
Veamos rápidamente su fórmula:
B(Cb, Cs) = Cb + Cs - (Cb × Cs)
Cuando Cs es negro (0), el color del fondo se mostrará después de la fusión, como:
Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb
Cuando Cs es blanco (1) el resultado será blanco con cualquier fondo, como:
Cb + 1 -(Cb × 1) = Cb + 1 - Cb = 1
1. Imagen mostrada a través del texto
Para mostrar el texto que se muestra a través de su imagen de fondo, usamos el modo de mezcla de screen con texto negro y el espacio circundante blanco .
Agua
.backdrop {ancho: 600px; altura: 210px; background-image: url (someimage.jpg); fondo de tamaño: 100%; margen: automático; } .text {color: negro; color de fondo: blanco; mix-blend-mode: pantalla; ancho: 100%; altura: 100%; tamaño de fuente: 160pt; font-weight: más audaz; text-align: center; línea-altura: 210px; margen: 0; } Actualmente nuestro texto se ve a continuación, en el siguiente paso agregaremos color personalizado al fondo.
Añadiendo color Como ya habrás adivinado, el uso de modos de fusión nos deja solo dos opciones de color para el área que rodea el texto: negro o blanco . Sin embargo, con el blanco, es posible agregarle un color utilizando una superposición, si el color de la superposición se combina bien con la imagen utilizada .
Para agregar color al área circundante, agregue un
mix-blend-mode: multiply para la superposición, ya que ayuda a que el color de fondo de la superposición se mezcle un poco mejor con la imagen que aparece dentro del texto.Agua
.overlay {background-color: rgba (0, 255, 255, .1); mix-blend-mode: multiplicar; ancho: 100%; altura: 100%; posición: absoluta; arriba: 0; } Con esta técnica, podríamos colorear el área circundante alrededor del texto con el fondo de la imagen:
Tenga en cuenta que la técnica funciona bien solo con colores transparentes sutiles . Si usa un color completamente opaco o un color que no coincide con la imagen, la imagen que aparece dentro del texto tendrá un tinte muy visible del color utilizado, así que a menos que sea un aspecto que busque, evite colores opacos .2. Texto rodeado por el fondo de la imagen
Aunque una colocación de texto normal sobre un fondo de imagen requiere la misma técnica, le mostraré un ejemplo de cómo se ve la demostración anterior cuando el efecto se invierte, es decir, cuando el color del texto es blanco y el fondo es negro.
.text {color: blanco; color de fondo: negro; mix-blend-mode: pantalla; ancho: 100%; altura: 100%; tamaño de fuente: 160pt; font-weight: más audaz; text-align: center; línea-altura: 210px; margen: 0; } Puede usar la misma superposición para agregar color al texto, a menos que desee mantenerlo en blanco.
.overlay {background-color: rgba (0, 255, 255, .1); mix-blend-mode: multiplicar; ancho: 100%; altura: 100%; posición: absoluta; arriba: 0; } A continuación, puede ver cómo se ve el caso inverso:
Tenga en cuenta que en Internet Explorer, o en cualquier otro navegador que no admita la propiedad mix-blend-mode, el fondo de la imagen no aparecerá y el texto permanecerá en negro (o blanco).
Infografías para diseñadores web: información que debe saber
La infografía es una excelente manera de convertir los datos más aburridos en el gráfico más reconfortante, que es mucho más fácil de digerir para el lector. Como los diseñadores web tienen que lidiar con píxeles y códigos casi todos los días, sería abrumador mirar más datos y referencias que están llenos de palabras y números hipnóticos.Entendemos cóm
10 Ideas de regalos de Navidad para Paperphiles
Hoy en día, muchas personas piensan en artilugios inteligentes sofisticados, sofisticados y caros cuando se trata del regalo de Navidad perfecto. No está mal, pero si prefiere algo inesperado, inesperado o sencillamente diferente, ¿qué hay de volver a lo básico y obsequiar a sus seres queridos con regalos en papel ?Me g
