HTML & CSS
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 ?
I'll move this over to the CSS forum for now, to see if anyone there can help.
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.
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")
This topic is now closed. New replies are no longer allowed.