2009-06-02 1 views
1

Wenn Chrome oder Firefox wird auf dieser Seite verwendet:Wie man die Farbe eines Charakters teilweise umkehrt? (Seine 33% auf der linken Seite ist schwarz und 67% auf der rechten Seite ist weiß)

a page on dell.com

(oder die meisten jeder Produktseite funktionieren sollte). Es gibt 4 Registerkarten, und wenn wir auf die letzte Registerkarte für "Review" klicken, wird die Statusleiste Zeichen haben, die teilweise umgekehrt sind. Zum Beispiel kann der Buchstabe "v" 66% auf der linken Seite weiß und 33% auf der rechten Seite schwarz sein. Ich bin mir ziemlich sicher, dass es nicht von Flash gemacht wird, da der Maus-Rechtsklick kein Flash-Plugin-Menü anzeigt. Weiß jemand, wie es geht?

Screenshot:

alt text http://img192.imageshack.us/img192/2696/partlyreversed.png

+1

Die Dell-Seite erwähnen ist ein ziemlich gutes Beispiel dafür, wie * nicht *, es zu tun. Junge, was für eine schreckliche Art zu animieren * einfach über alles *. – Tomalak

+0

@Tomalak denkst du nicht, dass es ein bisschen Klasse macht, wie sie es wie ein Windows-Widget funktionieren lassen? –

+0

@Jian Lin: Um ehrlich zu sein, würde ich wahrscheinlich nicht versuchen, das Verhalten einer Windows 95-Fortschrittsleiste auf einer Webseite nachzuahmen. :) – Tomalak

Antwort

8

Ich stelle mir das Wort zweimal tatsächlich da ist, einmal in jeder Farbe, aber die weiße Version wird durch die Fortschrittsbalken abgeschnitten.

+0

mit der linken div um "durch" einen Teil des weißen Textes huh? das ist Schlau. –

+0

+1 Für diesen klugen Hack. Es ist wahrscheinlich so gemacht. Großartige Idee, Mann! –

2

Probe:

<div style="width:400px; height:1.1em; position:relative;"> 
    <div style="position:absolute; text-align:center; width:400px; height:100%; background-color:#eee;">49 %</div> 
    <div style="position:absolute; overflow:hidden; width:195px; height:100%; background-color:#347;"> 
     <div style="width:400px; text-align: center; color: #ace;">49 %</div> 
    </div> 
</div> 
Verwandte Themen