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).
MaintainableCSS - Guía en línea toc Writing Maintainable CSS Code
Escribir CSS es bastante simple una vez que comprenda la sintaxis y los métodos para estructurar una página. Pero dominar CSS para crear código modular, semántico y reutilizable es otro tema completamente diferente.Hay muchas técnicas diferentes que puede usar como SMACSS o ITCSS, pero estos son modelos que lo fuerzan en una determinada dirección. En s
YouTube lanza una nueva actualización de diseño de materiales y es impresionante
Google ha estado trabajando arduamente en la implementación de un nuevo diseño basado en Material Design para todas sus aplicaciones y servicios. Ahora, después de someterse a meses de pruebas alfa y beta, la actualización de Material Design también está afectando a YouTube, y Google ofrece a todos la posibilidad de obtener una vista previa de los cambios.Para
![Cómo eliminar anuncios irrelevantes (o adaptarlos a su gusto) [Quicktip]](http://hideout-lastation.com/img/tech-design-tips/472/how-remove-irrelevant-ads.jpg)
