Texto no muy legible en diferentes fondos de imagen

30

He venido aquí buscando un poco de ayuda de diseño o consejos sobre cómo podría mejorar lo siguiente:

Como dice el título, tengo un banner de sitio web con texto múltiple que se muestra en diferentes imágenes como fondos. Ahora, dado que la mayoría de las imágenes son oscuras, he configurado el color de la fuente como blanco. Pero incluso entonces, parte del texto no es muy legible en un par de imágenes como:

estándar

Como estoy trabajando con CSS, he probado diferentes opciones como:

Agregar sombras de texto:

con sombra de texto

CSS:

text-shadow: 3px 3px 0px #000;

También probé, creando un cuadro semitransparente alrededor del texto:

con fondo semitransparente

Manifestación

Siento que la caja se ve fuera de lugar.

He creado un violín para cualquiera que conozca CSS. Si no, por favor siéntase libre de aconsejarme basado solo en su imaginación.

PD: También podría aconsejar sobre el uso de una fuente diferente si eso lo ayudaría a destacar mejor.

website-design color text images css AyB
fuente
44
Un suave brillo exterior negro en su texto (sombra en todas las direcciones) a veces puede ser suficiente para darle más contraste sin parecer que ha puesto algo detrás.
John
@John También pensé en resplandor, pero sin tener un gran efecto de resplandor, el problema del texto no legible persiste y, como estoy trabajando en un sitio web corporativo, decidí eliminarlo, ya que parecería poco profesional. Gracias por la sugerencia sin embargo!
AyB
2
Debería haber enfatizado lo sutil que estaba hablando. Como 20-30% y amplia difusión donde apenas lo notarías. Si parece un resplandor, o puede ver una transición, está demasiado oscuro. Use lo suficiente para hacer que la imagen a su alrededor se desvanezca a un tono ligeramente más oscuro donde se encuentra con las letras.
John
@John Hmm suena interesante, lo intentaré también.
AyB

Respuestas:

22

Como alternativa a las respuestas ya excelentes, ¿qué tal si agrega un div negro con un 50% de opacidad detrás del texto?

ingrese la descripción de la imagen aquí

Esto permitiría que la fuente funcione básicamente en cualquier imagen también.

div {
    position:absolute;
    top:250px;
    left:140px;
    width:500px;
    height:50px;
    background-color:black;
    z-index:0;
    opacity:0.5;
}

EJEMPLO

SaturnsEye
fuente
@ICanHasCheezburger ¡No hay problema! Me enfrento al mismo problema haciendo mucho trabajo en el sitio web, como imágenes de pancartas, y descubrí que esta es la forma más agradable de solucionarlo, ya que funciona bien la mayor parte del tiempo.
SaturnsEye
17

Sugiero poner la fuente en negrita (solo un cambio de peso, no la fuente en sí) y respetar la sombra para que defina todos los bordes de las letras:

Ejemplo 1

font-family: Raleway;
font-weight:900;
text-shadow: 0px 0px 3px #000;

Incluso puede combinar más de una sombra de texto para crear un contorno definido y un desenfoque:

Ejemplo 2

text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;
Andrew Leach
fuente
¡Gracias por tu tiempo! He planeado usar lo text-shadowproporcionado por usted junto con la solución de SaturnsEye.
AyB
@ No puedo hacer una caja porque dijiste que no lo hicieras. "También lo intenté, creando un cuadro semitransparente alrededor del texto. Siento que el cuadro se ve fuera de lugar". Pero su sitio, su llamada ...
Andrew Leach
Es cierto que, pero después de ver la solución de SaturnsEye, me di cuenta de que se veía bien cuando cambiaban el tamaño y el color. Perdón por la elección incorrecta de palabras. Tal vez debería explicar mejor la próxima vez.
AyB
3

Dale un fondo negro transparente y algo de relleno

color de fondo: rgba (0,0,0,0.5);

relleno: 0.5em;

Simplemente juega un poco con esos números, pero debería darte un resultado útil.

Philip Feldmann
fuente
¡Gracias por tu tiempo! Me di cuenta de que si tiene un caso en el que el elemento interno debe tener una opacidad diferente en el exterior, la opacitypropiedad no ayudará en este caso, mientras que establecer la opacidad en la background-colorpropiedad hace el trabajo. Como aquí
AyB