2009-06-02 5 views
1

Lorsque Chrome ou Firefox est utilisé sur cette page:comment inverser en partie la couleur d'un personnage? (Sa 33% à gauche est en noir et 67% à droite est blanc)

a page on dell.com

(ou plus une page produit devrait fonctionner). Il y a 4 onglets, et si on clique sur le dernier onglet pour "Revoir", la barre d'état aura des caractères partiellement inversés. Par exemple, la lettre "v" peut avoir 66% à gauche étant blanc et 33% à droite étant noir. Je suis à peu près sûr que ce n'est pas fait par Flash, car le clic droit de la souris n'affiche aucun menu de plug-in Flash. Est-ce que quelqu'un sait comment cela peut être fait?

capture d'écran:

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

+1

cette page Dell vous mentionnez est un très bon exemple de la façon * pas * de le faire. Boy, quelle horrible façon d'animer * à peu près tout *. – Tomalak

+0

@Tomalak ne pensez-vous pas qu'il donne un peu de classe à la façon dont ils le font fonctionner comme un widget Windows? –

+0

@Jian Lin: Pour être honnête, je ne prendrais probablement pas la peine d'imiter le comportement d'une barre de progression de style Windows 95 sur une page Web. :) – Tomalak

Répondre

8

J'imagine le mot est en fait là deux fois, une fois dans chaque couleur, mais la version blanche est clipsé par la barre de progression.

+0

en utilisant le div gauche pour "montrer à travers" une partie du texte blanc hein? c'est intelligent. –

+0

+1 Pour ce hack intelligent. C'est probablement fait de cette façon. Bonne idée homme! –

2

Exemple:

<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> 
Questions connexes