couleur du texte de la barre de progression CSS pour les fonds de contraste pleins et les vides?
https://stackoverflow.com/questions/1080708
-
22-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je veux avoir XHTML + CSS barre de progression avec des couleurs de contraste entre les zones de fond pleins et les vides.
J'ai un problème avec la couleur du texte. Parce que les milieux pleins et les vides sont trop contraste (ce qui est une exigence), de rester lisible le texte doit être à double couleur pour être contraste avec les deux. L'image doit l'expliquer mieux que les mots:
Barre de progression avec espace rempli de bleu foncé et blanc fond vide http : //drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png Exemple du problème http://drdaeman.pp.ru/tmp /20090703/progress-bar-text-problem.png
Ma mise en œuvre actuelle de la barre de progression est trivial, mais comme exemple ci-dessus montre, le texte peut être difficile à lire, dans certains cas, ce qui est exactement un problème que je veux résoudre.
Ma tentative de mise en œuvre (simplifié) (échoue, car overflow: hidden ne fonctionne pas sans div.progress de positionnement que je ne peux pas la position à cause de la span de width intérieure):
<!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>
La version en direct de ce qui précède: http://drdaeman.pp.ru/tmp/ 20090703 / test2.html
tentative précédente: http://drdaeman.pp.ru/tmp/20090703/test.html
Les images sont GIMP prototypes édités, et pas exactement ce que cela affiche de code.
Ajouter: Merci à tous, en particulier Meep3D, Nosredna et Lachlan! Cependant, je reste encore un problème - dans mon cas, la barre de progression ne devrait pas avoir une largeur fixe et prendre l'espace disponible tous horizontalement (width: auto; ou width: 100% sont acceptables). Mais sans pauses de code de règle de width: 400px Lachlan. Et je voudrais encore éviter d'utiliser JavaScript, si cela est possible.
La solution
Selon la suggestion de Meep3D, prendre 2 copies du texte.
Enveloppez chacun dans une div de la même largeur que le récipient. Le div « supérieur » est enroulé avec un autre div qui se fixe au pourcentage désiré.
Mise à jour:. Supprimé les largeurs fixes
Le div « supérieur » est dimensionné pour le pourcentage inverse de son emballage.
<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>
Autres conseils
Qu'en est-il de mettre une deuxième copie du texte de la barre de progression à l'intérieur du div, et définissez le débordement de div caché, il révèle avec elle?
-
Mise à jour:. Je suis pas un expert javascript, mais je suis sûr que vous pouvez trouver la largeur d'un objet, puis définissez le décalage basé sur que si la largeur est flexible comme vous le dites
Vous pouvez:
- Trouvez un gris qui convient
- Utilisez JavaScript pour changer la couleur entre le blanc et le noir de façon dynamique, en fonction de l'endroit où il est
- la couleur du milieu du dégradé de fond proche du blanc, et toujours utiliser du texte noir
- Mettre les progrès outisde la case:
[######### ] 50 %
Vous pouvez utiliser une ombre de texte pour votre texte « pourcentage ». Le seul inconvénient est que cela ne fonctionne que dans les navigateurs les plus récents. Seulement Firefox 3.5, Safari (toutes les versions) et Chrome 2+ soutiennent.
Voici une démonstration de l'utilisation de text-shadow d'une manière qui rendrait vos progrès lisibles.
http://www.w3.org/Style/Examples/007/ text-shadow # blanc
Si vous êtes prêt à utiliser plus JavaScript, vous pouvez essayer ce plugin jQuery:
http://kilianvalkhof.com/2008/ javascript / text-shadow-in-à-dire avec-jquery /
L'article indique que cela fonctionne dans IE seulement, mais il fonctionne dans Chrome 3 (ce que j'utilise), Firefox 3.5, Internet Explorer et Safari. Il peut travailler dans les anciens navigateurs, mais je l'ai pas testé.
Meep3D a la bonne réponse. Deux versions de la boîte. Révéler n% de celui du haut.
Plus d'options:
- Mettre une boîte translucide sous la nombre qui soit assombrit la zone pour un nombre blanc ou allège le zone pour un numéro noir.
- Utilisez le rouge et blanc comme arrière-plans et un numéro noir. (Problème ici est rouge est associé à l'erreur, vous pouvez donc jouer avec d'autres combinaisons de trois des couleurs qui sont tous à contraste élevé les uns contre les autres.)
