I am making a custom progress bar(you could say a timeline) with checkpoints. Checkpoints are in the shape of a circle. There are 3 parts to this - 1. Circles, 2. Colored progress bar and 3. black progress bar.
I have stacked them with z-indices. Circles above colored bar which is above the black bar.
When I click on somewhere on the progress bar the colored bar expands it width to that point - did the animation on angular. But I couldn't find a way to fill up the circle when the colored bar reaches it. Is it possible to give the circle the color of the progress bar behind it?
The circle should fill up from left to right. Please suggest any method. I will give stackblitz link -
Stackblitz - demo.
Related
I have a page with a black, starry background and the navbar has white text. The navbar stays at the top when you scroll, and the links of the navbar become almost invisible when they pass over other images on the page because the navbar is transparent. How can I invert the color of the text based on whatever is directly behind it?
You want to use mix-blend-mode: difference;, like here: https://jsfiddle.net/avdeoq97/
But it would be better to give your navbar a different background, like a dropshadow with a glass effect, so it can always be seen. The inverted colour alone might not be very accessible.
Safari uses "theme-color" to tint its navigation bar at the top.
BBC News uses red color, so the whole browser is red (https://www.bbc.com/news
image
Problem is, if you drag page away from right side or bottom, there is also red color under it.
Is there a way to set "system" (under page) background, besides "theme-color"? Let's say, I want for navigation bar to be red, but background from right to be white.
If going into weird hacking and using negative margins on html/body to stretch content beyond bounds, is there a stable way to compensate scrolling bounds without breaking the whole layout?
I am usually a back-end developer that tries to become fullstack and I came to a little problem.
What I want to do is have a button that on click slides to the other side and changes the background. I am familiar with how to make an event on click and actually change the background. My problem is how to make the CSS so it looks good.
Lets say I have black and white themes. I want to have a box with white and black sides. When I click on it I want one of the sides to shift.
Here is how I want it to look.
The idea is to click on the box and the black part to move. Basically the white part is the background and the black part is the button that slides with some animation. Then the black part switches its color to opposite of the current background.
Basically the colors just swap but with cool sliding animation.
I know that I need one div for the box with background the current background.
I also know that I need another div to be the actual part that moves with background opposite of the current one.The inner dif will have a button inside of it that on click will call the function that changes the background.
What I can do so far is
<div class="box">
<div class="slider">
<button onClick="changeBackGroundColor()"></button>
</div>
</div>
The slider div will have half the width of box and full height of box.
Now comes the tricky part - how can I add if in css so that I can always check what is the current background and make the background of slider the opposite of the current one?
Also - how can I make it slide to the border of the box? I need to make the sliding in both directions. From right to left when the theme is white and from left to write when its black.
Site: http://tinyurl.com/x983asd93
Looking at the top right corner, the triangle banner.
Basically, I only want to link that portion of the triangle banner, so that the buttons under it can still be clicked. I don't want the entire div to be linked, but the triangle image is a transparent rectangle, with only the triangle filled. So I'm not sure how to only link that portion of the triangle.
Hopefully you understand.
You should be able to acheive that with an image map.
http://www.maschek.hu/imagemap/
It does mean you'd need to use an img instead of having it as a background, however.
I am having a Horizontal tile list, i want to customize the style of the horizontal scroll bar of this tile list. I want to reduce the thickness of the scroll bar so that it looks as a thick line or something. Even i dont want the arrows at the either side of the scroll bar. How can i do this?
In flex 3 it is possible to skin the scrollbar in CSS:
mx|ScrollBar
{
up-arrow-skin: ClassReference(null); //removes up arrow
down-arrow-skin: ClassReference(null); // removes down arrow
trackSkin: Embed(source="assets/ScrollBarTrack.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
thumbUpSkin: Embed(source="assets/ScrollBarThumb_up.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
thumbOverSkin: Embed(source="assets/ScrollBarThumb_over.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
thumbDownSkin: Embed(source="assets/ScrollBarThumb_down.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
}
In flex 4 you would want to write a custom skin.