Testo non molto leggibile su sfondi di immagini diverse

30

Sono venuto qui alla ricerca di un po 'di aiuto per la progettazione o consigli su come avrei potuto migliorare quanto segue:

Come dice il titolo, sto avendo un banner per un sito Web con più testi visualizzati su immagini diverse come sfondi. Ora, poiché la maggior parte delle immagini sono scure, ho impostato il colore del carattere su bianco. Ma anche allora, parte del testo non è molto leggibile su un paio di immagini come:

standard

Da quando lavoro con i CSS, ho provato diverse opzioni come:

Aggiunta di ombre di testo:

con ombra del testo

CSS:

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

Ho anche provato, creando una casella semitrasparente attorno al testo:

con sfondo semi-trasparente

dimostrazione

Sento che la scatola sembra fuori posto.

Ho creato un violino per chiunque conosca i CSS. In caso contrario, non esitare a consigliarmi solo sulla base della tua immaginazione.

PS: Potresti anche consigliarti di usare un carattere diverso se questo lo aiutasse a distinguersi meglio.

— AyB
fonte

4

Un leggero bagliore nero esterno sul tuo testo (ombra in tutte le direzioni) a volte può essere sufficiente per dargli più contrasto senza sembrare che tu abbia messo qualcosa dietro di esso.

— Giovanni

@John Ho pensato anche al bagliore, ma senza avere un sacco di effetto bagliore, il problema del testo non leggibile rimane e dato che sto lavorando su un sito Web aziendale, ho deciso di eliminarlo dal momento che sembrerebbe poco professionale. Grazie per il suggerimento però!

— AyB

2

Avrei dovuto sottolineare quanto stavo parlando in modo sottile. Come il 20-30% e un'ampia diffusione dove difficilmente lo noteresti. Se sembra un bagliore o puoi vedere una transizione - è troppo scuro. Usa quel tanto che basta per far sbiadire l'immagine attorno a un tono leggermente più scuro dove incontra la scritta.

— Giovanni

@ John Hmm sembra interessante, ci proverò anche io.

— AyB

22

In alternativa alle già ottime risposte, che ne dici di aggiungere un div nero con il 50% di opacità dietro il testo?

inserisci qui la descrizione dell'immagine

Ciò consentirebbe al carattere di funzionare praticamente su qualsiasi immagine.

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

ESEMPIO

— SaturnsEye
fonte

@ICanHasCheezburger Nessun problema! Devo affrontare lo stesso problema facendo molto lavoro sul sito Web come le immagini dei banner e ho scoperto che questo è il modo più piacevole di aggirarlo perché funziona bene per la maggior parte del tempo.

— Saturno:

17

Suggerisco di rendere grassetto il carattere (solo un cambio di peso, non il carattere stesso) e di rispecificare l'ombra in modo che definisca tutti i bordi delle lettere:

Esempio 1

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

Puoi anche combinare più di un'ombra di testo per creare un contorno definito e una sfocatura:

Esempio 2

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

— Andrew Leach
fonte

Grazie per il tuo tempo! Ho pianificato di utilizzare il software text-shadowfornito da te insieme alla soluzione di SaturnsEye.

— AyB

@Ican Non ho fatto una scatola perché hai detto di non farlo. "Anche provato, creando una scatola semitrasparente attorno al testo. Sento che la scatola sembra fuori posto." Ma il tuo sito, la tua chiamata ...

— Andrew Leach

È vero, ma dopo aver visto la soluzione di SaturnsEye mi sono reso conto che stava bene quando cambiarono le dimensioni e il colore. Ci scusiamo per la scelta sbagliata delle parole. Forse dovrei spiegare meglio la prossima volta.

— AyB

3

Dagli uno sfondo nero trasparente e delle imbottiture

colore di sfondo: rgba (0,0,0,0,5);

imbottitura: 0,5em;

Basta giocare un po 'con quei numeri, ma dovrebbe darti un risultato utilizzabile.

— Philip Feldmann
fonte

Grazie per il tuo tempo! Mi sono reso conto che se hai un caso in cui l'elemento interno deve avere un'opacità diversa all'esterno, la opacityproprietà non aiuta in questo caso mentre l'impostazione dell'opacità nella background-colorproprietà fa il lavoro. Come qui

— AyB