Colore del testo della barra di avanzamento CSS per sfondi pieni e vuoti a contrasto?

Voglio avere XHTML + barra di avanzamento CSS con colori a contrasto tra aree di sfondo piene e vuote.Colore del testo della barra di avanzamento CSS per sfondi pieni e vuoti a contrasto?

Ho un problema con il colore del testo. Perché gli sfondi pieni e vuoti sono troppo contrastati (questo è un requisito), per rimanere leggibili il testo dovrebbe essere a due colori per essere in contrasto con entrambi. L'immagine dovrebbe spiegarlo meglio delle parole:

Progress bar with dark blue filled area and white empty background http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png Example of the problem http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-problem.png

mio attuale implementazione della barra di progresso è banale, ma come esempio di cui sopra mostra, il testo può essere difficile da leggere, in alcuni casi, che è esattamente un problema Voglio risolvere.

Il mio attuale (semplificato) tentativo di implementazione (non riesce, perché overflow: hidden non funziona senza il posizionamento div.progress che non posso posizione a causa di interno span s' width):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Progress bar test</title> 
    <style type="text/css"> 
    div.progress_bar { 
     border: 1px #ccc solid; position: relative; 
     text-align: center; height: 32px; 
    } 
    div.progress_bar .progress { 
     height: 32px; 
     overflow: hidden; /* This does NOT work! */ 
    } 
    div.progress_bar .progress div { 
     position: absolute; width: 100%; height: 32px; 
     z-index: 30; overflow: hidden; 
     background-color: #44a; 
    } 
    div.progress_bar span { 
     position: absolute; top: 0; left: 0; width: 100%; 
     z-index: 20; 
     color: #000; 
    } 
    div.progress_bar .progress span { 
     position: absolute; top: 0; left: 0; width: 100%; 
     z-index: 40; 
     color: #eee; 
    } 
    </style> 
</head> 
<body> 
    <!-- Can be of any (unknown) width. Think of "width: auto". 
     The 400px value is just to keep it small on a big monitor. 
     DON'T rely on it! --> 
    <div id="container" style="width: 400px;"> 
    <div class="progress_bar"> 
     <!-- div.progress is a dark filled area container --> 
     <div class="progress" style="width: 51%;"> 
     <!-- Actually dark filled area --> 
     <div style="width: 51%;"></div> 
     <!-- Text (white). 
      Does not clip, even with overflow: hidden on parent! --> 
     <span>This is a test</span> 
     </div> 
     <!-- Text (black) --> 
     <span>This is a test</span> 
    </div> 
    </div> 
</body> 
</html>

versione dal vivo di quanto sopra: http://drdaeman.pp.ru/tmp/20090703/test2.html
Tentativo precedente: http://drdaeman.pp.ru/tmp/20090703/test.html

Le immagini sono prototipi modificati da GIMP e non esattamente ciò che viene visualizzato in questo codice.

Aggiungi: Grazie a tutti, in particolare a Meep3D, Nosredna e Lachlan! Tuttavia ho ancora un problema: nel mio caso la barra di avanzamento non dovrebbe avere larghezza fissa e prendere tutto lo spazio disponibile in orizzontale (width: auto; o width: 100% sono accettabili). Ma senza la regola width: 400px, il codice di Lachlan si interrompe. E vorrei ancora evitare di usare JavaScript, se possibile.

fonte

2009-07-03 drdaeman

Qual è, esattamente, il problema con 0% e 100%? – Nosredna

O è un testo nero su sfondo blu scuro (molto difficile da leggere) o testo bianco su sfondo bianco (impossibile da leggere). – drdaeman

Mi manca qualcosa. Perché non renderlo bianco quando è blu scuro e nero quando è bianco? – Nosredna

Come da suggerimento di Meep3D, prendere 2 copie del testo.

Avvolgere ciascuno in un div della stessa larghezza del contenitore. Il div "superiore" viene avvolto con un altro div che si aggancia alla percentuale desiderata.

Aggiornamento: rimosso le larghezze fisse.
Il div "superiore" è dimensionato alla percentuale inversa del suo involucro.

<html> 
<head> 
    <style type="text/css"> 
    #container { 
     position: relative; 
     border: 1px solid; 
     text-align: center; 
     width: 400px; 
     height: 32px; 
    } 
    .black-on-white { 
     height: 32px; 
     color: #000; 
    } 
    .white-on-black { 
     height: 32px; 
     color: #fff; 
     background-color: #44a; 
    } 
    .wrapper { 
     width: 53%; 
     overflow: hidden; 
     position: absolute; 
     top: 0; left: 0; 
    } 
    .black-on-white { 
     width: 100%; 
    } 
    .white-on-black { 
     width: 188.7%; 
    } 
    </style> 
</head> 
<body> 
    <div id="container"> 
    <div class="wrapper"> 
     <div class="white-on-black"> 
      <span>This is a test</span> 
     </div> 
    </div> 
    <div class="black-on-white"> 
     <span>This is a test</span> 
    </div> 
    </div> 
</body> 
</html>

fonte

2009-07-04 12:43:34

Grazie, questo è quello che ho provato anche ieri. Un problema: nel mio caso la barra di avanzamento non dovrebbe avere larghezza fissa e prendere tutto lo spazio disponibile in orizzontale. Ma senza la regola 'width: 400px' tutto si rompe. E vorrei evitare di usare JavaScript, se possibile. – drdaeman

Fantastico! Grazie mille, funziona benissimo. Non ho pensato alla larghezza (1/percento). – drdaeman

Si potrebbe:

Trova un grigio che si adatta
Usa JavaScript per cambiare il colore tra il bianco e il nero in modo dinamico, a seconda di dove è
rendere il colore mezzo del gradiente di sfondo più vicino al bianco, e utilizzare sempre testo scuro
Mettere i progressi outisde casella:

fonte

2009-07-03 20:19:59

Grazie. Sto considerando questi suggerimenti come opzioni di "fallback" se non riuscirò a implementare ciò che voglio esattamente. Tuttavia, se è possibile, mi piacerebbe davvero implementarlo nel modo in cui è mostrato nella foto nella mia domanda. – drdaeman

Che dire se si mette una seconda copia del testo della barra di avanzamento all'interno del div e si imposta l'overflow del div su nascosto, in modo che venga rivelato con esso?

Update: io non sono un esperto di javascript, ma sono sicuro che si può scoprire la larghezza di un oggetto e poi impostare l'offset basata su quella se la larghezza è flessibile come dici tu .

fonte

2009-07-03 20:20:08 Meep3D

Questo è quello che vuoi fare. Avere due versioni della barra una sopra l'altra e rivelarne progressivamente una. – Nosredna

Sembra una buona idea. Grazie, ci proverò! – drdaeman

Ho un'idea generale: sembra che sia una strada giusta da percorrere, ma il progresso non ha una larghezza fissa e si estende automaticamente a tutto lo spazio disponibile, quindi mettere una copia nel div interno (area riempita) con l'esempio 'width: 50% 'non funziona. – drdaeman

È possibile utilizzare un'ombra di testo per il testo "percentuale". L'unico svantaggio di questo è che funziona solo negli ultimi browser. Solo Firefox 3.5, Safari (tutte le versioni) e Chrome 2+ lo supportano.

Ecco una demo dell'utilizzo di text-shadow in modo da rendere leggibili i tuoi progressi.
http://www.w3.org/Style/Examples/007/text-shadow#white

Se siete disposti a utilizzare più JavaScript, si potrebbe provare questo plugin jQuery:

http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/

L'articolo dice che funziona solo in IE, ma funziona in Chrome 3 (quello Sto usando), Firefox 3.5, Internet Explorer e Safari. Potrebbe funzionare con i browser più vecchi ma non l'ho testato.

fonte

2009-07-03 20:33:49

Meep3D ha la risposta corretta. Due versioni della scatola. Rivela il n% di quello superiore.

Più opzioni:

mettere una scatola traslucida sotto il numero che o si scurisce l'area per un numero bianco o schiarisce l'area per un numero nero.
Usa bianco e rosso come sfondo e un numero nero. (Problema qui è rosso è associato con l'errore, in modo da poter giocare con altre combinazioni di tre colori che sono tutti ad alto contrasto uno contro l'altro.)

fonte

2009-07-03 20:34:52 Nosredna

Colore del testo della barra di avanzamento CSS per sfondi pieni e vuoti a contrasto?

risposta

Problemi correlati