CSS barra di avanzamento colore del testo per il contrasto di pieni e vuoti, sfondi?
https://stackoverflow.com/questions/1080708
-
22-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Voglio avere XHTML+CSS barra di avanzamento con colori a contrasto tra pieno e vuoto aree di sfondo.
Ho un problema con il colore del testo.Perché pieni e vuoti sfondi sono troppo contrasto (questo è un requisito), di rimanere leggibile il testo deve essere a due colori per essere contrario ad entrambi.L'immagine spiega meglio di tante parole:
Barra di avanzamento blu scuro piena area e bianco, sfondo vuoto http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png Esempio di problema http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-problem.png
Il mio attuale barra di avanzamento attuazione è banale, ma, come sopra illustrato, il testo può essere difficile da leggere, in alcuni casi, che è esattamente un problema che voglio risolvere.
La mia attuale (semplificato) attuazione tentativo non riesce, perché overflow: hidden non funziona senza il posizionamento div.progress che io non possa posizione a causa dell'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 Live di cui sopra: http://drdaeman.pp.ru/tmp/20090703/test2.html
Un precedente tentativo: http://drdaeman.pp.ru/tmp/20090703/test.html
Le immagini sono GIMP a cura di prototipi, e non è esattamente ciò che questo codice viene visualizzato.
Aggiungere: Grazie a tutti, soprattutto Meep3D, Nosredna e Lachlan!Però ho ancora un problema, nel mio caso la barra di avanzamento dovrebbe avere una larghezza fissa e prendere tutti orizzontalmente lo spazio disponibilewidth: auto; o width: 100% sono accettabili).Ma senza width: 400px regola Lachlan codice interruzioni.E mi piace ancora di evitare l'uso di JavaScript, se possibile.
Soluzione
Come da suggerimento di Meep3D, prendere 2 copie del testo.
Avvolgere ogni in un div della stessa larghezza del contenitore. Div "superiore" è avvolto con un altro div che fermi in percentuale desiderata.
Aggiornamento:. Rimuovere le larghezze fisse
Il div "superiore" è dimensionato per la 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>
Altri suggerimenti
Che dire di mettere una seconda copia del testo barra di avanzamento all'interno del div, e colonna del div di nascosto, in modo che rivela con esso?
-
Aggiornamento:. Io non sono un esperto di javascript, ma sono sicuro che si può scoprire la larghezza di un oggetto e quindi impostare l'offset basa che se la larghezza è flessibile come dici tu
Si potrebbe:
- Trovare un grigio che si adatta
- Utilizzare JavaScript per modificare il colore tra il bianco ed il nero dinamicamente, a seconda di dove è
- Rendere il medio colore di sfondo a gradiente più vicino al bianco, e utilizzare sempre il testo scuro
- Mettere il progresso all'esterno la casella:
[######### ] 50 %
È possibile utilizzare un ombra di testo per il testo "percentuale". L'unico aspetto negativo di questo è che avrebbe funzionato solo nei browser più recenti. Solo Firefox 3.5, Safari (tutte le versioni), e Chrome 2+ supporta.
Ecco una demo di usare text-shadow in un modo che renderebbe il vostro progresso leggibile.
http://www.w3.org/Style/Examples/007/ text-shadow # bianco
Se siete disposti a utilizzare più JavaScript, si potrebbe provare questo plugin jQuery:
http://kilianvalkhof.com/2008/ javaScript / text-ombra-in-ie-con-jquery /
L'articolo dice che funziona solo in IE, ma funziona in Chrome 3 (quello che sto usando), Firefox 3.5, Internet Explorer e Safari. Può funzionare in browser meno recenti, ma non l'ho testato.
Meep3D ha la risposta corretta. Due versioni della scatola. Rivela n% di quella superiore.
Altre opzioni:
- Mettere una scatola traslucida sotto la numero che o scurisce l'area per un numero bianco o schiarisce la zona per un numero nero.
- Usa rosso e bianco come sfondi e un numero nero. (Problema qui è di colore 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.)
