progreso CSS color de texto de la barra de contraste llena y vacía fondos?
https://stackoverflow.com/questions/1080708
-
22-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Quiero tener XHTML + CSS progreso bar con colores de contraste entre las zonas de fondo vacías y llenas.
Tengo un problema con el color del texto. Debido fondos llenos y vacíos son demasiado contraste (esto es un requisito), siendo legible el texto debe ser de color doble que contraste con los dos. La imagen debe explicarlo mejor que las palabras:
barra de progreso con zona llena de color azul oscuro y el fondo vacío blanco http : //drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png ejemplo del problema http://drdaeman.pp.ru/tmp /20090703/progress-bar-text-problem.png
Mi implementación actual barra de progreso es trivial, sino como ejemplo de arriba muestra, el texto puede ser difícil de leer en algunos casos, que es exactamente un problema que quiero resolver.
Mi actual (simplificado) intento de aplicación (falla, porque overflow: hidden no funciona sin div.progress de posicionamiento que no puedo posición debido a 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>
versión en vivo de lo anterior: http://drdaeman.pp.ru/tmp/ 20090703 / Test2.html
Intento previo: http://drdaeman.pp.ru/tmp/20090703/test.html
Las imágenes se editan GIMP prototipos, y no exactamente lo que este código muestra.
Añadir Gracias a todos, especialmente Meep3D, Nosredna y Lachlan! Sin embargo todavía tengo un problema - en mi caso barra de progreso no debería tener ancho fijo y tomar todo el espacio horizontal disponible (width: auto; o width: 100% son aceptables). Pero sin pausas código width: 400px regla de Lachlan. Y todavía me gustaría evitar el uso de JavaScript, si eso es posible.
Solución
De acuerdo con la sugerencia de Meep3D, tomar 2 copias del texto.
Envolver cada una en un div de la misma anchura que el recipiente. El div "superior" se envuelve con otra div que clips en el porcentaje deseado.
Actualización:. Eliminado los anchos fijos
El div "superior" está dimensionado para el porcentaje inversa de su envoltura.
<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>
Otros consejos
¿Qué hay de poner una segunda copia del texto en la barra de progreso dentro de la div, y establecer el desbordamiento del div que oculta, lo que revela con ella?
-
Actualización:. Asimismo, no soy un experto en javascript, pero estoy seguro de que se puede averiguar el ancho de un objeto y luego ajustar el desfase basa en que si el ancho es flexible como usted dice
Se podría:
- Encontrar un gris que se adapte
- Uso de JavaScript para cambiar el color entre blanco y negro de forma dinámica, en función de donde es
- Hacer el color medio del fondo de la pendiente más cerca de blanco, y utilizar siempre el texto oscuro
- Poner el progreso llegad de la casilla:
[######### ] 50 %
Se puede usar una sombra de texto para el texto "porcentaje". La única desventaja de esto es que sólo funcionaría en los navegadores más recientes. Sólo Firefox 3.5, Safari (todas las versiones), y Chrome 2 soporta.
Aquí es una demostración de la utilización de sombra de texto de una manera que haría que su progreso legible.
http://www.w3.org/Style/Examples/007/ text-shadow # blancas
Si usted está dispuesto a utilizar más de JavaScript, puede probar este plugin jQuery:
http://kilianvalkhof.com/2008/ javascript / texto-sombra-en-iE-con-jquery /
El artículo dice que funciona en IE sólo, sin embargo funciona en Chrome 3 (lo que estoy usando), Firefox 3.5, Internet Explorer y Safari. Es posible que funcione en los navegadores antiguos, pero no he probado.
Meep3D tiene la respuesta correcta. Dos versiones de la caja. Revelar n% de la superior.
Más opciones:
- Ponga una caja traslúcida bajo la número que, o bien se oscurece la zona para un número de blanco o aclara la área para un número negro.
- Uso rojo y blanco como fondos y un número negro. (Problema aquí es de color rojo está asociado con el error, por lo que puede jugar con otras combinaciones de tres colores que son todos de alto contraste uno contra el otro.)
