javascript - CSS: Filling an image usng Keyframes -

-

this image: coffee.

you know how progress bars work, if give value of 50, , later use javascript change transition, smooth, , progress bar filled.

now, see white portion in image?

say, there field called votes. based on value of votes, same amount of color should filled inside coffee image. (replacing equal amount of white.)

yes, can develop hundred images, , in photoshop, pretty lame.

there thing called keyframes, , there animations, not able findna way animate using css.

i have seen on behance, , common thing. crazy thing is, cant find on google.

in simple words, based on amount of votes, white portion should replaced equal amount of other color.

like this: codepen.io: image filling progress

turn image transparent png, , have colored div behind image change height based on number of votes.


Comments

Post a Comment

Popular posts from this blog

How has firefox/gecko HTML+CSS rendering changed in version 38? -

-
i have a little website header no longer renders correctly, since updating firefox 38.0.5 [the faceplant logo missing top right, , main logo no longer centred]. still renders expected in other browsers. how has engine's rendering changed in update? according mdn , list of changes is: css support ruby-position , ruby-align have been added , available default ( bug 1055676 , bug 1123917 , bug 1039006 ). the :unresolved pseudo-class has been implemented custom elements ( bug 1111633 ). the predefined style ethiopic-numeric uses space, instead of dot, suffix match recent change spec ( bug 1120721 ). css transitions on generated content (with ::before , ::after ) on both inline , block splits them start expected specification ( bug 1110277 ). the implementation of css logical properties made big progress. [...] how css transitions start has been modified match recent change of specifications, aiming @ having interoperable behavio
Read more

javascript - Complex json ng-repeat -

-
i try ng-repeat on object, tried several times still stuck. if have idea, , if it's possible share tips kind of situation. [ { "abonnement": { "id": "1", "nom": "bas prix", "tarif": "2.49", "communication": "2h de communication", "vers": "vers fixes et mobiles", "zone": "zone nationale" } }, { "abonnement": { "id": "2", "nom": "national", "tarif": "9.99", "communication": "t\u00e9l\u00e9phonie et sms illimit\u00e9s", "vers": "vers fixes et mobiles", "zone": "zone nationale" } }, { "abonnement": { "id": "3", "nom": "euro", "tarif&
Read more

jquery - Cloning of rows and columns from the old table into the new with colSpan and rowSpan -

-
i using clone jquery. necessary clone gray area in new table. problem cloned rows , columns can has rowspan , colspan. the gray area intersection data-fix-cols , data-fix-rows. my solution not work: <table id="old-table" data-fix-cols='3' data-fix-rows='4'> <tbody> <tr> <td class="gray">clone me</td> <td colspan="2" rowspan="2" class="gray">clone me</td> <td>ashgabat</td> <td>barcelona</td> <td>berlin</td> </tr> <tr> <td rowspan="3" class="gray">clone me</td> <td>bucharest</td> <td>warsaw</td> <td>washington</td> </tr> <tr> <td class="gray">clone me</td>
Read more