I have a fixed navbar and the site's background changes with sections (the sections background is diagonal). Now I want the background color of the navbar to change with the background of the underlying section's background color, without just setting the navbar's background color to the same color but the navbar to be transparent to the background but not it's content, like this:
example of how it should like
and not like that:
example of how it should NOT look like
I'm super thankful for any idea or approach on how to achieve something!
If you want to keep the navbar on top all the time, change position to fixed and change set z-index to a high value so it is on top of all other elements, you may use the following CSS class for navbar. Of course, you can set the background-color and opacity to the values that match your background.
.myNavBar {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
}
Without sharing some codes on how you are achieving the undesired results it might be hard to help you out.
Try this and it would work, I guess.
Within the container for the navbar, set the z-index in the CSS to a very high number, say 1999. This would make sure the navbar remains on top of other elements, assuming no other element has been set to have a z-index greater than 1999, in this case.
.navbar-container {
z-index: 1999;
}
Fading Content using Iframes (No JavaScript)
You will need to create an Iframe tag with the src attribute set to the content file you want to fade. The main content has to have separate styles. The iframe must be in focus to allow scrolling. More details are in the code below.
Demo: https://fadingiframe.netlify.app/
/* Index.html style style-sheet below */
iframe {
position: absolute;
top: 5rem;
width: 100vw;
height: calc(100vh - 6rem);
border: none;
-webkit-mask-image: linear-gradient( /* Mask iframe */
transparent 1rem,
#fff 5%,
#fff 70%,
transparent 90%
);
mask-image: linear-gradient(
transparent 1rem,
#fff 5%,
#fff 70%,
transparent 90%
);
}
/* mainContent.html style style-sheet below */
body {
position: absolute;
overflow-x: hidden;
margin-top: 2rem;
color: aliceblue;
width: 80vw;
left: 5vw;
}
body::-webkit-scrollbar { /* Remove scroll bar */
display: none;
}
body {
-ms-overflow-style: none; /* keep in mind that it will only scroll if the iframe is in focus */
scrollbar-width: none;
}
p {
padding: 2rem;
font-size: 2rem;
}
<body>
<nav></nav>
<iframe id="main-content-iframe" src="mainContent.html"></iframe>
<!-- Add iframe and src to main content html file -->
<canvas id="canvas1"></canvas>
<footer></footer>
</body>
<!-- Separate html file in root directory -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./mainContent.css" /> <!-- Link to css file -->
</head>
<body>
<section>
<!-- Your Content here-->
</section>
</body>
</html>
-------------------------------------------------------------------------
For Text only -
Body Tag Has Special/Hide Properties
I think your issue is that you do not use the "body" element selector. It has unique properties that set the body element height to match the screen by default. Although it still allows scrolling the inner content. I add an extra background div for the text as well. It provides a better reading experience. Please have a look at my solution. It may help you solve your problem. If you have any questions, don't hesitate to ask.
Demo : https://jsfiddle.net/hexzero/5yjqk43a/
body {
background-image: black;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
color: #fff;
}
section {
position: absolute;
padding: 3rem 25%;
background-image: Linear-gradient(
transparent 6rem, <-- Should be the same as nav Height
#fff 30%, <-- Can set this to nav Height for abrupt cut-off
#fff 70%,
transparent 90%
);
-webkit-background-clip: text;
background-clip: text;
background-attachment: fixed;
scroll-behavior: auto;
z-index: 3;
}
nav {
background: rgba(0, 0, 0, 0.616);
width: 100%;
position: fixed;
top: 0;
height: 6rem; <-- Navigation Height
z-index: 4;
}
section > p {
margin-top: 12rem;
color: transparent;
}
.text-background { <-- Remove this style section to have no background for the content,
width: 60%; <-- along side the <div class="text-background"></div> element
height: 100vh;
right: 20%;
position: fixed;
top: 0;
background-image: Linear-gradient(
transparent 6rem, <-- Background to nav height
rgba(102, 51, 153, 0.924) 20%,
rgba(102, 51, 153, 0.931) 90%,
transparent 100%
);
z-index: 0;
}
canvas {
width: 100%;
background-color: rebeccapurple;
position: fixed;
top: 0;
z-index: -1;
}
footer {
position: fixed;
width: 100%;
height: 1rem;
background: rebeccapurple;
z-index: 1;
bottom: 0;
}
p {
font-size: 2rem;
}
Let me know if you would be interested in a JavaScript version for better browsers support. Thanks
Related
as for the context, yesterday, it was working fine and it would actually apply it on the section, but today, nothing is happening, and i just noticed it stopped working.
My javascript generate reports using a function that write the page's content using the data saved in a local json.
(see https://github.com/Mrcubix/Osu-PlayTime/blob/master/js/main.js)
I've tried moving it to a different element, adding !important like in the title, changing the values to make sure it wasn't working, created a new element in the index and noticed that it worked
as much as i try, section:hover doesn't apply a black layer on top of the image like it used to when hovering
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="cache-control" content="no-cache">
<title>Osu!PlayTime - Report</title>
<link rel="styleSheet" href="css/main.css" type="text/css">
</head>
<body>
<section style="background-image: url('./bg/593620 Linked Horizon - Shinzou o Sasageyo! [TV Size]/bg.jpg'); background-repeat: no-repeat; background-size: cover;">
<p>593620 Linked Horizon - Shinzou o Sasageyo! [TV Size]</p>
<span>
<p>Time played: 00:01:26.8</p>
</span>
</section>
<section style="background-image: url('./bg/859608 LiSA - ADAMAS (TV Size)/bg.jpg'); background-repeat: no-repeat; background-size: cover;">
<p>859608 LiSA - ADAMAS (TV Size)</p>
<span>
<p>Time played: 00:00:00.8</p>
</span>
</section>
<section style="background-image: url('./bg/940746 CHiCO with HoneyWorks - Kimi ga Sora Koso Kanashikere/bg.jpg'); background-repeat: no-repeat; background-size: cover;">
<p>940746 CHiCO with HoneyWorks - Kimi ga Sora Koso Kanashikere</p>
<span>
<p>Time played: 00:01:12.3</p>
</span>
</section>
</body>
</html>
body{
font-family: Arial,Calibri,sans-serif;
}
section{
display: flex;
flex-wrap: wrap;
flex: 0 0 50%;
flex-shrink: 1;
margin: -1rem;
}
section:hover{
background: rgba(0,0,0,0.30);
}
div{
display: flex;
flex: 0 0 50%;
justify-content: center;
flex-direction: column;
}
div>p{
flex-shrink: 1;
flex: 0 0 50%;
padding-left: 18rem;
}
div>div{
flex-direction: row;
}
p{
font-size: 1.8vw;
padding: 6rem;
color: white;
text-shadow: 1px 3px 1rem black ;
}
images used in the html:
another example (this time with images provided) for testing is available on this project github's repo:
https://github.com/Mrcubix/Osu-PlayTime/tree/master/example
or in a zip file:
https://drive.google.com/file/d/1AEuRx2vaexl-nlRyASNKMof2XHy1XG2p/view?usp=sharing
it is necessary to start a local http server in the project folder due to js limitations with loading local files, main.py will run one if you have python.
head to localhost:[port], (http://localhost:8000 in the case of my script)
Or use position: relative; and absolute
body{
font-family: Arial,Calibri,sans-serif;
}
section {
position: relative;
z-index: 1;
}
section::before{
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
opacity: 1;
transition: ease 0.5s;
}
section:hover::before{
opacity: 0.5;
background-color: #000;
}
section p{
position: relative;
z-index: 3;
font-size: 1.8vw;
padding: 6rem;
color: white;
text-shadow: 1px 3px 1rem black;
}
<section style="background-image: url('https://i.stack.imgur.com/acIuq.jpg'); background-repeat: no-repeat; background-size: cover;">
<p>
593620 Linked Horizon - Shinzou o Sasageyo! [TV Size]
<span>Time played: 00:01:26.8</span>
</p>
</section>
<section style="background-image: url('https://i.stack.imgur.com/9hhfu.jpg'); background-repeat: no-repeat; background-size: cover;">
<p>
859608 LiSA - ADAMAS (TV Size)
<span>Time played: 00:00:00.8</span>
</p>
</section>
<section style="background-image: url('https://i.stack.imgur.com/9ybVe.jpg'); background-repeat: no-repeat; background-size: cover;">
<p>
940746 CHiCO with HoneyWorks - Kimi ga Sora Koso Kanashikere
<span>Time played: 00:01:12.3</span>
</p>
</section>
Position the parent-element with relative, now you can add position: absolute; to the child-element. Or in this case - we use pseudo ::before this creates an element between the opening-tag and the content (::after would create it after content and before closing-tag).
This needs an content: ''; this could be nearly everything (...)
and position this to absolute with left: 0; right: 0; top: 0; bottom: 0; to overlay it over the whole parent ( = relative to the parent!)
But now it also would overlap the <p> elements inside your <section>!
To prevent this, use z-index!
I gave the parent (section) the z-index: 1;, the overlay (pseudo-class ::before) z-index: 2; and the <p>-elements (as children of <section>) z-index: 3;
So you have an order to layer your elements that are hovering each other!
Edit: Added transition 0.5s.
To make this work: give your element the standard that it should be normal (here: opacity: 1;) add the opacity: 0.5; to the :hover declaration. NOW you can use transition: 1s or what time you want the transition to be. It needs the opacity: 1; to the normal style, so it knows what is the starting-value on hovering. If you do this with for example background-color you have to give the normal-status to the element, even if it should be transparent! Only in this case "it" could know from where - to where it should do the transition (and back).
If you just want to have black layer then use:
section:hover {
filter: brightness(30%);
}
You can't apply different background styles for hover state when this element has inline styles for background image - it won't override it. If you don't want my solution you can alternatively create pseudo-element before/after element which will cover his parent and then use background color.
I've been trying to create a sticky position image that changes as it scrolls across the border between two sections of my page. So basically, there should be two sticky position images, the top one gets masked by the bottom section and the bottom gets masked by the top section. I am having trouble figuring out a way to mask both images at the same time (you can use the bottom section div to hide the top image, and vice versa, but not both at the same time).
Here's an image to illustrate what I'm trying to do
Here's the code I'm using:
.lblue {
height: 40vh;
width:10vw;
position: -webkit-sticky;
position: sticky;
top:30vh;
left:45vw;
background:lightblue;
}
.lred {
height: 40vh;
width:10vw;
position: -webkit-sticky;
position: sticky;
top:30vh;
left:45vw;
background:lightcoral;
}
.blue {
position: absolute;
top:0;
height:150vh;
width:100vw;
background:blue;
}
.red {
position: absolute;
top:100vh;
height:100vh;
width: 100vw;
background:red;
}
<div class="blue">
<div class="lblue"></div>
</div>
<div class="red">
<div class="lred"></div>
</div>
Thank you!
Here’s a solution. The trick is to use the images as CSS backgrounds, because CSS backgrounds can be easily fixed in the viewport of their parents.
.blue {
position: absolute;
top:0;
height:150vh;
width:100vw;
background: blue fixed linear-gradient(lightblue, lightblue) 45vw 30vh / 10vw 40vh no-repeat;
}
.red {
position: absolute;
top:100vh;
height:100vh;
width: 100vw;
background: red fixed linear-gradient(lightcoral, lightcoral) 45vw 30vh / 10vw 40vh no-repeat;
}
<div class="blue"></div>
<div class="red"></div>
In this solution, you can replace linear-gradient(color, color) by the URL of your image, using url(https://…). I used gradients because, for the browser, gradients are (generated) images. So, this trick actually works with images.
The position: absolute also becomes useless, at least for the demo.
The long background rule may need some explanations. background is a shorthand (= a short way to write several properties in a single line) for:
background-color: red;
background-attachement: fixed;
background-image: linear-gradient(lightcoral, lightcoral);
background-position: 45vw 30vh;
background-size: 10vw 40vh;
background-repeat: no-repeat;
position:fixed can do this if you conside a clip-path trick to hide the overflow so that each element will show only inside its section
.lblue,
.lred {
height: 40vh;
width: 10vw;
position: fixed;
top: 30vh;
left: 45vw;
background: lightblue;
}
.lred {
background: lightcoral;
}
.blue,
.red {
height: 100vh;
background: blue;
clip-path: inset(0 0 0 0); /* this is important */
}
.red {
background: red;
}
body {
margin: 0
}
<div class="blue">
<div class="lblue"></div>
</div>
<div class="red">
<div class="lred"></div>
</div>
I'm looking for a relatively simple and standard way of changing CSS pseudoelement property value by JS Scrollspy.
The parent element (section of a landpage) should change grayscale, while scrolled, and its child should have position:fixed.
As it turns out, it's impossible to make it in an easy way, because any filter is removing position:fixed by definition. More about this: CSS-Filter on parent breaks child positioning
Moving that background-image to a pseudoelement creates another problem: manipulation of the pseudoelement's properties by JS.
The expected result: I wanted to make a section of a landing page, having grayscale filter for background image. That's the easy part. But it should has less grayscale, while moving upward (the more picture user see, the more color it has), and centered content element shuffles up from previous section, and later hiding under next one.
So basically I need two things:
filter grayscaled background image, with dynamically changing value of a grayscale, relative to distance to the top of the window (JS scrollspy)
position:fixed central content element visible only in that section
Illustration (with background-picture in pseudoelement) is here: https://codepen.io/tdudkowski/pen/MLyMyG
HTML
<section class="one">
</section>
<section class="two">
<div><p>DIV with a position:fixed</p></div>
</section>
<section class="three"></section>
CSS
section {
position: relative;
max-width: 1000px;
height: 70vh;
background-color: #eee;
margin: 0 auto;
overflow: hidden;
}
.two {
background-color: transparent;
/* Try to uncomment rule below */
/* filter: grayscale(50%); */
}
.two div {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30rem;
height: 10rem;
background-color: #f00;
z-index: 1;
}
.one,
.three {
z-index: 100;
}
/* background of section */
section.two::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url(https://picsum.photos/1000/200);
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
/* filter: grayscale(50%); */
}
I'm making a very unique progress bar that visually looks like a glass orb filling up with liquid. Unfortunately, because of the rounded shape, the traditional method of modifying the height doesn't work so well (as demonstrated with this fiddle https://jsfiddle.net/usuwvaq5/2/).
As you can see, having the div height "slide up" is not the desired visual. I have also tried playing a bit with css clip, but was unable to get it to work for me. How can I create the visual effect of the glass "filling" with the second image?
Simply add background-position:bottom; to #inner-progress:
#inner-progress {
background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_bar.png);
background-color: transparent;
background-position:bottom;
width: 100%;
overflow: hidden;
position: absolute;
bottom: 0;
height: 0%;
}
JSFiddle Demo
Jacob Gray probably has the best answer, but here's an alternative:
Fiddle
This approach uses css for the animation, instead of javascript. JS is only used here to trigger the animation, the rest is css.
This uses the css transition property to "animate" the height as it changes from 100% to 0%. The only notable change in the html is that I swapped the background of the inner with the outer.
Perhaps this answer will be a better solution to a future reader of this thread - depending on their implementation and/or preferences.
$(document).ready(function() {
$('#inner-progress').addClass("load");
});
#outer-progress {
background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_bar.png);
background-color: transparent;
border: 0;
height: 100px;
width: 100px;
position: relative;
}
#inner-progress {
background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_background.png);
background-color: transparent;
width: 100%;
overflow: hidden;
position: relative;
bottom: 0;
height: 100%;
transition: height 3s;
-webkit-transition: height 3s;
}
.progress-value {
color: #FFF !important;
font-weight: bold;
position: absolute;
top: 40%;
left: 40%;
}
.load{
height: 0% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outer-progress">
<div id="inner-progress" value="0" max="100"></div>
<span class="progress-value">0%</span>
</div>
i have a bar that is fixed to the bottom of the browser. i want to make the bar displayed as 'none', so that when a user hovers over the bar it is displayed until they hover out.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
html {
background: #34495e;
}
#pagebottom {
width: 92%;
height: 20px;
background: rgba(255, 255, 255, 0.80);
margin-left: 4%;
margin-right: 4%;
bottom: 0;
position: fixed;
color: #3498db;
text-align: center;
}
</style>
</head>
<body>
<div id="pagebottom">
random text
</div>
</body>
</html>
try this css solution
#pagebottom {
width: 92%;
height: 20px;
background: rgba(255, 255, 255, 0.80);
margin-left: 4%;
margin-right: 4%;
bottom: 0;
position: fixed;
color: #3498db;
text-align: center;
opacity:0;
}
#pagebottom:hover{
opacity:1;
transition:all .5s linear;
}
You can accomplish this with CSS. No JavaScript needed.:
#pagebottom {
opacity: 0;
width: 92%;
height: 20px;
background: rgba(255, 255, 255, 0.80);
margin-left: 4%;
margin-right: 4%;
bottom: 0;
position: fixed;
color: #3498db;
text-align: center;
}
#pagebottom:hover {
opacity: 1;
}
EDIT This is a jQuery solution. There are some great CSS only solutions above.
You can't display your div as none, as it will have no width or height, and therefore be un-hoverable. However, you can use the opacity attribute, and modify the footer's CSS accordingly.
Take a look at this JSFiddle
Here are the changes I made:
I added opacity: 0; to the #pagebottom CSS so it is invisible by default.
I added the following jQuery:
$('#pagebottom').mouseenter(function(){
$('#pagebottom').css('opacity','1');
});
$('#pagebottom').mouseleave(function(){
$('#pagebottom').css('opacity','0');
});
This code waits until the mouse enters the div area, and sets the opacity to 1. When the mouse leaves, it sets the opacity to 0 again, making the element invisible.
If you want a nice tradition so the div fades in and out, you can use CSS transitions or a jQuery plugin like Transit, or even the animate feature that Felix describes in his answer.
You can use:
1) css() to set the opacity of your div:
2) hover() to keep track of when the mouse pointer enters and leaves your div
3) animate() to apply fadeIn() and fadeOut animation when changing the opacity
$('#pagebottom').css('opacity','0');
$( "#pagebottom" ).hover(
function() {
$('#pagebottom').stop().animate({opacity: 1}, 500);
}, function() {
$('#pagebottom').stop().animate({opacity: 0}, 500);
}
);
Fiddle Demo