Textos legibles sobre imágenes: diversas técnicas CSS 10.3.16

Textos legibles sobre imágenes: diversas técnicas CSS

El colocar texto sobre imágenes es un recurso que está a la orden del día. Son multitud de ocasiones en las que te encuentras esta situación.

Es sencillo de lograr, es llamativo y es potencialmente mortal: puedes acabar con un texto totalmente ilegible en su totalidad o algunas partes por no haber suficiente contraste entre los colores de la imagen y del texto.

Esta coincidencia entre colores hay que prevenirla y evitarla a toda costa. De ello depende que el texto colocado sobre imágenes pueda ser leído sin dificultad añadida por usuario de la página.

Así pues, a continuación algunas formas de garantizar la legibilidad del texto sobre imágenes.

Imagen y color seleccionados expresamente

La forma más sencilla es seleccionar la imagen y el color de texto (ambos) expresamente para que sea legible per sec. Buscas una imagen sin blancos y al texto le declaras ese color que falta en la imagen.

See the Pen myJaJX by Kseso (@Kseso) on CodePen.

Texto con fondo

Para evitarse el trabajo previo de seleccionar imagen y color del texto, que casi nunca será posible, se añade un fondo de color al texto:

See the Pen raVoxO by Kseso (@Kseso) on CodePen.

Normalmente el color del fondo del texto se declara con transparencia.

Texto con contorno

Añadiendo un contorno al texto que contraste su color con el del texto también te aseguras la legibilidad. Hoy por hoy la forma más sencilla y multinavegador es usar la propiedad text-shadow. La complejidad (vistosidad) de la sombra ya es cosa tuya.

See the Pen PwqXGd by Kseso (@Kseso) on CodePen.

Otra forma de lograr el contorno sería usando la propiedad privativa de los Chrome y familia -webkit-text-stroke: Xpx color;. Pero recuerda que esta propiedad dibuja el contorno por dentro del carácter, similar al valor box-shadow: inside;.

La demo anterior mezcla ambos.

Overlay sobre la imagen

Otra forma es intercalar una tonalidad entre la imagen y el texto, de tal manera que la imagen se muestre tintada con una tonalidad sobre la que el texto resalte, sin importar los colores de la imagen original.

See the Pen wBaRGQ by Kseso (@Kseso) on CodePen.

En la demo anterior la tonalidad está lograda con el uso del pseudoelemento ::before y su fondo.

También es posible lograrlo mediante las nuevas propiedades relativas a los modos de fusión de Css: Background-blend-mode y mix-blend-mode.

See the Pen The tinted web by Kseso (@Kseso) on CodePen.

Filtros bajo el texto

Con el uso de los filtros Css también es posible resaltar el texto por contraste con la imagen que se encuentre debajo. En este caso opto por el filtro filter: blur(5px) apliacdo no al h1 (que es el elemento textual) si no a su pseudoelemento ::before para que sólo afecte a la imagen y el texto se muestre nítido.

See the Pen WbvLjB by Kseso (@Kseso) on CodePen.

Tras la incorporación de la propiedad backdrop-filter al corpus de CSS y su recién soporte por Chrome (Marzo 2016, ver. 49) es posible declarar filtros a un elemento y que su efecto se aplique a lo que haya debajo (z-index) de él.

Tienes una explicación detallada sobre las diferencias entre los filtros y modos de Fusión CCSS y las diferentes propiedades para aplicarlos en el artículo "Filtros y modos de fusión CSS". En él encontrarás también una demo sobre backdrop-filter

Otras demos y explicaciones del uso de filtros y el valor blur() vistas en el blog:

1. Introducción a los Filtros Css. Filters css y animation
2. Filtros Css para todos los navegadores: La propiedad filter con keywords y con los filtros SVG equivalentes.
3. Easy dynamic outside & inside blur pure Css: de la idea a las demos

Texto en cajas coloreadas

Una mezcla de la segunda forma de este artículo (texto con fondo de color) y un post previo: Una palabra por línea en puro Css junto a algún efecto complementario:

See the Pen wBaRqO by Kseso (@Kseso) on CodePen.

Ver Todas Las Demos Juntas

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso