is it possible to blur the whole background when the sidebar opened
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.
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.
When you select an image on web browser, the image become blue. If I want it become blue on hover, what should I do? I tried to have an overlapping div with blue background and opacity:0, then its opacity become 0.65 when hover, but I have no idea why the effect ran so slowly.
Here is a jsfiddle of what I tried to do: jsfiddle.net/hq5b2/1/
I have a page with a large background image. The menu and main content portions are 900px and centered. Rather than just fill the menu background with a color, I'd like to simply blur the background image. I'd also like the blurred part to move appropriately when the page is resized so I can't just blur a section of the background. How is the best way to achieve this? I tried putting a semi-transparent .png as the background to my menu div but that didn't work, I didn't see any effect. Does anyone know how to do this? Thanks.
The site that inspired the question is this one: http://www.bluespooncoffee.com
http://jsfiddle.net/MAbpx/
background: rgba(255,255,255,0.5);
This makes the background of something semi transparent because the last value is the alpha (transparency value). Adjust as needed.
If i hover over the thin vertical bar on the left, it highlights the entire scope of the block that's to the right. When this scope is large, my entire screen flashes white (a consequence of my custom color scheme). Is there a way to change that color? i don't recall there being one when i made the theme.
It's Tools->Options->Environment->Fonts and Colors->Collapsible Region. The foreground color is the highlight on the margin, and the background color is the highlight in the text area.