Ich möchte XHTML + CSS Fortschrittsbalken mit Kontrastfarben zwischen gefüllten und leeren Hintergrundbereichen haben.
Ich habe ein Problem mit der Textfarbe. Da gefüllte und leere Hintergründe zu kontrastreich sind (dies ist eine Voraussetzung), sollte der Text, um lesbar zu bleiben, zweifarbig sein, um ein Kontrast zu beiden zu sein. Das Bild sollte es besser erklären als Worte:
Fortschrittsbalken mit dunkelblauem gefülltem Bereich und weißem leerem Hintergrund http: // drdaeman. pp.ru/tmp/20090703/progress-bar-text-example.png Beispiel für das Problem http://drdaeman.pp.ru/tmp/20090703/progress- bar-text-problem.png
Meine aktuelle Fortschrittsbalkenimplementierung ist trivial, aber wie das obige Beispiel zeigt, kann der Text in einigen Fällen schwer zu lesen sein, was genau ein Problem ist, das ich lösen möchte.
Mein aktueller (vereinfachter) Implementierungsversuch (fehlgeschlagen, weil overflow: hidden nicht funktioniert, ohne div.progress zu positionieren, was ich wegen inner span 's width nicht positionieren kann):
Live-Version von oben: Ссылка Vorheriger Versuch: Ссылка
Die Bilder sind GIMP-bearbeitete Prototypen und nicht genau das, was dieser Code anzeigt.
Hinzufügen: Vielen Dank, besonders Meep3D, Nosredna und Lachlan! Allerdings habe ich noch ein Problem - in meinem Fall sollte der Fortschrittsbalken keine feste Breite haben und den gesamten horizontal verfügbaren Platz einnehmen ( width: auto; oder width: 100% sind akzeptabel). Aber ohne width: 400px rule bricht Lachlans Code. Und ich würde immer noch vermeiden, JavaScript zu verwenden, wenn das möglich ist.
Nehmen Sie gemäß Meep3D's Vorschlag 2 Kopien des Textes.
Wickeln Sie jedes in ein div mit der gleichen Breite wie der Container. Das "obere" div wird mit einem anderen div umschlossen, das den gewünschten Prozentsatz schneidet.
Update: entfernte die festen Breiten.
Das "obere" div wird auf den umgekehrten Prozentsatz seines Wrappers skaliert.
Wie wäre es, wenn Sie eine zweite Kopie des Fortschrittsbalken-Texts in das div einfügen und den Überlauf des divs auf versteckt setzen, damit er damit sichtbar wird?
-
Update: Ich bin auch kein Javascript-Experte, aber ich bin sicher, dass Sie die Breite eines Objekts herausfinden und dann den Offset basierend darauf einstellen können, wenn die Breite flexibel ist, wie Sie sagen.
Sie könnten:
Sie könnten einen Textschatten für Ihren "Prozent" -Text verwenden. Der einzige Nachteil ist, dass es nur in den neuesten Browsern funktioniert. Nur Firefox 3.5, Safari (alle Versionen) und Chrome 2+ unterstützen es.
Hier ist eine Demo von der Verwendung von Text-Schatten in einer Weise, die Ihren Fortschritt lesbar machen würde.
Ссылка
Wenn Sie mehr JavaScript verwenden möchten, können Sie dieses jQuery-Plugin ausprobieren:
Der Artikel sagt, es funktioniert nur in IE, aber es funktioniert in Chrome 3 (was ich verwende), Firefox 3.5, Internet Explorer und Safari. Es kann in älteren Browsern funktionieren, aber ich habe es nicht getestet.
Meep3D hat die richtige Antwort. Zwei Versionen der Box. Zeige n% des obersten.
Weitere Optionen:
Tags und Links css text progress-bar effects
