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

Diversas formas de asegurarse la legibilidad de los textos al ser colocados sobre imágenes

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

Por Kseso ✎ 10

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.

Texto sobre imágenes: hazlo legible

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

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 Don Kseso Kseso

Comentarios: 10

  1. ¿Para cuándo 'color: invert' ?

    (Sí, ya sé, todavía hay navegadores que ni le dan soporte para 'outline-color' .)

    :´(

    ResponderEliminar
  2. Muy bien explicado, muchas gracias!

    ResponderEliminar
  3. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Lo que seas tú ni lo sabemos ni nos interesa, Hiram.
      De lo que no me cabe duda es que estás completamente desubicado. Tu sitio y comentario se encuentra tres blogs más abajo.

      [img]http://4.bp.blogspot.com/-K3woj9alKj4/VgMgktPCDcI/AAAAAAAALtc/oNIDDFNS4nc/s700/idiota.jpg[/img]

      Haznos un favor: piérdete. Gracias.

      Eliminar
    2. Te faltan los comentarios ocultos al estilo css-tricks :P

      Eliminar
    3. Bueno, creo que desde el mismo momento que su autor reflexionó sobre su comentario, vio lo desafortunado que fue y se disculpó el sistema ha resultado ha resultado del todo eficaz y eficiente (en este caso).
      Y el tema zanjado

      Un saludo, Mr Cotelandia

      Eliminar
  4. Disculpen comentario más equivocado de parte de su servidor, no medí mis palabras y puesto que son un blog de ayuda, les pido disculpas y les ofrezco mi mano para no se que pueda servir puesto que yo aprendo más de ustedes, de nueva cuenta, perdón

    ResponderEliminar
  5. Excelente información, de donde sacas las imagenes tan extrañas? xD

    ResponderEliminar
    Respuestas
    1. De la colección de Internet Archive Book Images en Flickr

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap