progresso CSS cor texto da barra de contraste cheios e vazios fundos?
https://stackoverflow.com/questions/1080708
-
22-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu quero ter XHTML + barra de progresso CSS com cores de contraste entre as áreas de fundo cheias e vazias.
Eu tenho um problema com a cor do texto. Porque cheios e vazios fundos são muito contraste (esta é uma exigência), para permanecer legível o texto deve ser double-colorido para ser contraste com os dois. A imagem deve explicá-lo melhor do que palavras:
bar Progresso com azul escuro área preenchida e fundo vazio branco http : //drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png Exemplo do problema http://drdaeman.pp.ru/tmp /20090703/progress-bar-text-problem.png
Meu implementação barra de progresso atual é trivial, mas como exemplo acima mostra, o texto pode ser difícil de ler em alguns casos, o que é exatamente um problema que quero resolver.
O meu atual (simplificado) tentativa de implementação (falhar, porque overflow: hidden não funciona sem o posicionamento div.progress que eu não posso posição por causa de span de width interno):
<!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>
versão ao vivo do acima: http://drdaeman.pp.ru/tmp/ 20090703 / Test2.html
tentativa anterior: http://drdaeman.pp.ru/tmp/20090703/test.html
As imagens são GIMP editado protótipos, e não exatamente o que este código é exibido.
Adicionar Obrigado a todos, especialmente Meep3D, Nosredna e Lachlan! No entanto eu ainda tenho um problema - na minha barra de progresso caso não deve ter largura fixa e tomar todo o espaço horizontal disponível (width: auto; ou width: 100% são aceitáveis). Mas, sem quebras de código regra width: 400px de Lachlan. E eu ainda gostaria de evitar o uso de JavaScript, se isso é possível.
Solução
De acordo com a sugestão de Meep3D, tomar 2 cópias do texto.
Enrole cada um em uma div da mesma largura do recipiente. A "parte superior" div é envolvido com uma outra div que clipes na percentagem desejada.
Update: removeu as larguras fixas
.
O "superior" div é dimensionada para a percentagem inversa da sua embalagem.
<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>
Outras dicas
O que sobre a colocação de uma segunda cópia do texto da barra de progresso dentro da div e defina estouro da div como oculto, por isso revela com ele?
-
Update: Eu também não sou um especialista em javascript, mas eu tenho certeza que você pode descobrir a largura de um objeto e, em seguida, definir o deslocamento baseado em que, se a largura é flexível como você diz
.Você pode:
- Encontre um cinza que ternos
- Use JavaScript para mudar a cor entre dinamicamente branco e preto, dependendo de onde ele é
- Faça a cor do meio do gradiente de fundo mais perto de branco, e sempre usar o texto escuro
- Coloque o progresso outisde na caixa:
[######### ] 50 %
Você pode usar uma sombra de texto para o seu texto "porcentagem". A única desvantagem para isso é que ele só seria trabalho nos navegadores mais recentes. Apenas Firefox 3.5, Safari (todas as versões), e Chrome 2+ apoiá-lo.
Aqui está uma demonstração de usar text-shadow de uma forma que faria o seu progresso legível.
http://www.w3.org/Style/Examples/007/ text-shadow # branco
Se você está disposto a usar mais JavaScript, você poderia tentar este plugin jQuery:
http://kilianvalkhof.com/2008/ javascript / text-shadow-in-ie-com-jquery /
O artigo diz que ele funciona no IE somente, no entanto, funciona no Chrome 3 (o que eu estou usando), Firefox 3.5, Internet Explorer e Safari. Ele pode funcionar em navegadores mais antigos, mas eu não testei.
Meep3D tem a resposta correta. Duas versões da caixa. Revelar n% do topo.
Mais opções:
- Coloque uma caixa translúcida sob a número que quer escurece a área para um número branco ou alivia o área para um número preto.
- Use vermelho e branco como fundos e um número preto. (Problema aqui é vermelho está associado com o erro, para que você possa brincar com outras combinações de três cores que são todos de alto contraste uns contra os outros.)
