oikram — 2013-07-18T11:43:07-04:00 — #1
The library we are using is jquery.
Here's the design:
Inside the middle image, the background should be white.
But if it's white, I believe we can't achieve the mask effect.
Here's the css part of it:
Can we "fill in" incrementally bottom-up, with a red color, like the picture above ?
Does anyone have a clue about how to make this happen please ?
paul_wilkins — 2013-07-18T17:48:44-04:00 — #2
I'll move this over to the CSS forum for now, to see if anyone there can help.
ronpat — 2013-07-18T19:46:03-04:00 — #3
You are correct.
The image in your fiddle does not match your example png. No black wavy pattern.
The image with the wavy line will need solid edges and a transparent center (the opposite of the fiddle image) so a red background-color can show through.
francky — 2013-07-19T00:08:41-04:00 — #4
Yes, the inside white (besides the small curvy border between black and red) has to be transparent, the rest is pasted as a rectangle covering the page-background and the horizontal line.
If it is a dynamic level meter, then the img is in the foreground, and has a white background color.
Now you can use a red background image and move that dynamically up and down with the background-position.
So it is an image with a background image!
(Something like this in "The port-hole theory: positioning of background-images in css")