I want my position fixed to viewport text to change color depending on where you are on the website. I tried adding position absolute containers, which would be clipped by the text, but it doesn't seem to work. E.g. text is black on white background, but white on every other color.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles2.css">
</head>
<body>
<div>
<h1 class="header">Header</h1>
<div class="fp-container-1"></div>
<div class="fp-container-2"></div>
<div class="fp-container-3"></div>
</div>
</body>
</html>
CSS:
body {
font-family: 'Roboto', sans-serif;
overflow-x: hidden;
margin: 0;
}
.header {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
width:100vw;
top: 10vh;
z-index: 1;
}
.fp-container-1 {
display: flex;
position: absolute;
top: 0vh;
height: 100vh;
width: 100vw;
background-color: white;
}
.fp-container-2 {
display: flex;
position: absolute;
top: 100vh;
height: 100vh;
width: 100vw;
background-color: blue;
}
.fp-container-3 {
display: flex;
position: absolute;
top: 150vh;
height: 200vh;
width: 100vw;
background-color: yellowgreen;
clip-path: url(.header);
z-index: -1;
}
Related
I want my fixed-position text to be visible no matter the background. I considered using mix-blend-mode or adding clipping mask to the text, which would be invisible on the website but visible only "through" the text, but I don't know how to do that. My mix-blend-mode doesn't seem to work either.
body {
font-family: 'Roboto', sans-serif;
overflow-x: hidden;
margin: 0;
}
.header {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
width: 100vw;
top: 10vh;
z-index: 1;
mix-blend-mode: difference;
}
.fp-container-1 {
display: flex;
justify-content: center;
top: 0vh;
height: 100vh;
width: 100vw;
background-color: white;
}
.fp-container-2 {
display: flex;
justify-content: center;
top: 0vh;
height: 100vh;
width: 100vw;
background-color: blue;
}
<div class="blending-group">
<h1 class="header">Header</h1>
<div class="fp-container-1"></div>
<div class="fp-container-2"></div>
</div>
You need to set a background-color on the element you set the mix-blend-mode. Otherwise, the container will have a background-color of transparent by default and therefore have nothing against which to calculate the difference (or whatever mode you chose).
* {
margin: 0;
}
body {
font-family: 'Roboto', sans-serif;
}
.header {
position: fixed;
width: 100%;
top: 0;
mix-blend-mode: difference;
background: cadetblue;
}
.fp-container-1 {
height: 100vh;
}
.fp-container-2 {
height: 100vh;
background-color: cadetblue;
}
<div class="blending-group">
<h1 class="header">Header</h1>
<div class="fp-container-1"></div>
<div class="fp-container-2"></div>
</div>
heres my project and i've been having a hard time trying to figure out the reason why this div "leftCardapio", whenever its zoomed in, the elements inside of it increase their height and width.
i have no ideia what this may be, can someone please gimme a hand?
appreciate the help.
here is my full projecttt
/* Variables */
:root {
--Gray: #323a3a;
--DarkBlue: #123B79;
--LightBlue: #18A5A7;
--LightGray: #D9D9D9;
--White: white;
}
html,
body {
margin: 0 auto;
user-select: none;
background-color: black;
font-family: 'Arial';
/* overflow: hidden; */
}
/* Order:
Bottom,
Left,
Top,
Content,
Container
*/
/* Container DIV*/
.container {
display: flex;
justify-content: center;
margin: 0 auto;
width: 100vw;
height: 100vh;
}
.content {
text-align: center;
background-color: gray;
position: absolute;
right: 0;
width: 100%;
height: 100%;
}
#img_Content {
height: 97%;
width: 100%;
object-fit: cover;
}
/* Bottom DIV */
.bottom {
display: flex;
flex-direction: column;
position: absolute;
background-color: black;
bottom: 0;
margin-left: 0%;
width: 100%;
height: 10%;
}
/* LEFT DIV */
.left {
display: flex;
flex-direction: column;
column-gap: 10px;
background-color: var(--Gray);
position: absolute;
left: 0;
width: 10%;
height: 100%;
}
.itemDestaque,
.itemCardapio,
.itemBebidas,
.itemReservar_mesa {
display: flex;
flex-direction: column;
padding-top: 10%;
display: inline-block;
vertical-align: middle;
text-align: center;
overflow: hidden;
cursor: pointer;
flex: 1;
}
.itemDestaque {
margin-top: 33%;
}
.itemDestaque,
.itemCardapio,
.itemBebidas,
.itemReservar_mesa span {
font-weight: 550;
overflow: hidden;
color: white;
}
.itemCardapio:hover,
.itemDestaque:hover,
.itemBebidas:hover,
.itemReservar_mesa:hover {
box-shadow: 5px 20px 20px rgba(0, 0, 0, 0.5);
background-color: var(--LightBlue);
}
#destaqueIMG,
#cardapioIMG,
#bebidasIMG,
#reservar_mesaIMG {
height: 80%;
width: 40%;
display: inline-block;
vertical-align: middle;
object-fit: contain;
overflow: hidden;
}
#bebidasIMG {
width: 30%;
}
/* LEFT CARDAPIO DIV */
.leftCardapio {
display: none;
}
.itemCardapio:hover>.leftCardapio {
display: flex;
flex-direction: column;
background-color: white;
text-align: center;
position: absolute;
left: 0;
top: 0;
margin-left: 100%;
width: 250px;
height: 100%;
}
.itemPratos,
.itemSaladas,
.itemSopas,
.itemSobremesas,
.itemMolhos,
.itemPorcoes {
height: 80px;
width: 100%;
background-color: lightgray;
border-bottom: 3px solid white;
}
.itemPratos:hover,
.itemSaladas:hover,
.itemSopas:hover,
.itemSobremesas:hover,
.itemMolhos:hover,
.itemPorcoes:hover {
background-color: var(--DarkBlue);
}
/* LEFT BEBIDAS DIV */
.leftBebidas {
display: none;
}
.itemBebidas:hover>.leftBebidas {
display: flex;
flex-direction: column;
background-color: white;
text-align: center;
position: absolute;
left: 0;
top: 0;
margin-left: 100%;
width: 250px;
height: 100%;
}
.itemBebida1 {
height: 80px;
width: 100%;
background-color: lightgray;
border-bottom: 3px solid white;
}
.itemBebida1:hover {
background-color: var(--DarkBlue);
}
/* TOP DIV */
/* Top Box 1 = Logo Recanto
Top Box 2 = Mesa
Top Box 3 = Pesquisa
Top Box 4 = Conta
Top Box 5 = Pedidos */
.top {
display: flex;
flex-direction: row;
background-color: #123B79;
position: absolute;
top: 0;
width: 100%;
height: 7%;
}
.topBox1 {
display: flex;
flex-direction: row;
flex: 8;
}
.topBox2,
.topBox3,
.topBox4,
.topBox5 {
text-align: center;
cursor: pointer;
flex: 1;
}
.topBox2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-color: #ffffff;
}
.topBox3,
.topBox4,
.topBox5 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border-right: 1px solid #2fa9ab;
background-color: var(--LightBlue);
}
.topBox2:hover {
transform: scale(1.0);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color: #dadada;
}
.topBox3:hover,
.topBox4:hover,
.topBox5:hover {
transform: scale(1.0);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color: #4eb9bb;
border-right: none;
}
.imgTopBox1 {
display: flex;
justify-content: center;
align-items: center;
width: 19%;
height: 100%;
}
#logoRecanto {
max-width: 100%;
max-height: 90%;
}
#mesaIMG,
#pesquisarIMG,
#contaIMG,
#pedidosIMG {
width: 20%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
object-fit: contain;
overflow: hidden;
}
#mesaIMG {
filter: invert(0%) sepia(9%) saturate(0%) hue-rotate(130deg) brightness(0%) contrast(0%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./imgs/HMSC_Catavento.png">
<link rel="stylesheet" href="css/style.css">
<title>Restaurante Recanto </title>
</head>
<body>
<div class="container">
<div class="content">
<img src="./imgs/Prato_Content_5.png-" id="img_Content">
</div>
<div class="bottom"></div>
<div class="left">
<div class="itemDestaque">
<img src="./imgs/Destaque.png" id="destaqueIMG">
<br><span> DESTAQUE</span>
</div>
<div class="itemCardapio" id="itemCardapio">
<img src="./imgs/Cardapio2.png" id="cardapioIMG">
<br><span> CARDÁPIO </span>
<div class="leftCardapio">
<div class="itemPratos"></div>
<div class="itemSaladas"></div>
<div class="itemSopas"></div>
<div class="itemSobremesas"></div>
<div class="itemMolhos"></div>
<div class="itemPorcoes"></div>
</div>
</div>
<div class="itemBebidas">
<img src="./imgs/Bebidas.png" id="bebidasIMG">
<br><span> BEBIDAS </span>
<div class="leftBebidas">
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
</div>
</div>
<div class="itemReservar_mesa">
<img src="./imgs/Mesa.png" id="reservar_mesaIMG">
<br><span> RESERVAR MESA </span>
</div>
</div>
<div class="top">
<div class="topBox1">
<div class="imgTopBox1">
<img src="./imgs/LogoRecanto.png" id="logoRecanto">
</div>
</div>
<div class="topBox2">
<img src="./imgs/Mesa.png" id="mesaIMG">
</div>
<div class="topBox3">
<img src="./imgs/Pesquisar.png" id="pesquisarIMG">
</div>
<div class="topBox4">
<img src="./imgs/Conta.png" id="contaIMG">
</div>
<div class="topBox5">
<img src="./imgs/Pedidos.png" id="pedidosIMG">
</div>
</div>
</div>
<!-- <script src="./scripts/changeImg.js"></script> -->
</body>
</html>
Your sub-menu elements increase in height when you zoom because that's the expected behavior of the zoom. Try zooming on any site or even here on stack-overflow.
When you zoom in browser what happens is that your visible area dimensions decrease. For example lets say your page is 1000px wide, when you zoom in to 200% it's now 500px wide, but these 500px are stretched to 1000px on your monitor.
On your site everything except sub-menu has % width and height. So if element width is 10% on 1000px screen it's 100px. If you zoom to 200% it's 10% of 500px, so 50px. Visually it stays the same size. Now when you have fixed dimensions on element like you have on your sub-menu, 80px is still 80px no matter how much you zoom in. On 500px screen of course 80px element will take more space then on 1000px screen.
Note the 80px height
I want the image take up the whole page. Right now there's a big space under the image. Changing the transform, position and size properties doesn't affect the empty space's size.
HTML:
<head>
<link rel="stylesheet" href="layoutindex.css" type="text/css"></link>
</head>
<body>
<div class="wrapper">
<header>
<img src="https://images2.alphacoders.com/941/thumb-1920-941898.jpg" class="background">
</header>
</div>
</body>
</html>
CSS:
body {
margin: 0px;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.background {
position: absolute;
height: 100%;
width: 100vw;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px) scale(2);
}
So I'm creating a landing page with a 100vh image that has a faded white overlay, using the following:
#showcase {
display: flex;
flex-direction: column;
align-items: center;
background-image: url('../img/showcase.jpeg');
background-attachment: fixed;
height: 100vh;
position: relative;
z-index: -2;
}
#showcase:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(#eee, 0.7);
z-index: -1;
}
<section id="showcase">
<img id="logo" src="img/logo.png" alt="" />
<h1 class="display-4 text-center">Test text</h1>
DO SOMETING
</section>
It works a treat expect for when I try add a button or anchor tag to the content of the div I can't seem to click or highlight it. Text in h tag and the image can be highlighted fine
Just remove the z-index:-2 from the parent and then position the child with a higher z-index
#showcase {
display: flex;
flex-direction: column;
align-items: center;
background: lightblue;
height: 100vh;
position: relative;
/* z-index: -2; -- remove this */
}
#showcase:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
}
#showcase * {
position: relative;
z-index: 1;
}
<section id="showcase">
<img id="logo" src="img/logo.png" alt="" />
<h1 class="display-4 text-center">Test text</h1>
DO SOMETING
</section>
Just z-index issue.
#showcase {
display: flex;
flex-direction: column;
align-items: center;
background-image: url(../img/showcase.jpeg);
background-attachment: fixed;
height: 100vh;
position: relative;
/* z-index: -2; Remove this line*/
}
On my home page I have a full width background image, however, my content won't display below it. Rather, it is displaying over top of the background image. Can anyone help me make my content display below my background image?
This is my html code:
<html>
<title>PLR.com Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.homepage-backgroundimage {
z-index: -1;
position: absolute;
background-size: cover;
left:0; right:0; top:0;
margin-left: auto;
margin-right: auto;
display: block;
}
.flexcontainer-bodyarea {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 1000px;
height: 500px;
background-color: #bbb;
}
.flexitem-50ptextarea {
width: 480px;
height: 200px;
margin: 10px;
background-color: #fff;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 36px;
color: #bbb;
}
</style>
<body>
<div class="homepage-backgroundimage"><img src="http://pianolessonresource.com/wp-content/uploads/2017/09/Untitled-1.jpg"></div>
<div class="flexcontainer-bodyarea">
<div class="flexitem-50ptextarea">This is one text area</div>
<div class="flexitem-50ptextarea">This is two text area</div>
</div>
</body>
</html>
Make it a real background image (in the CSS rule, not in an image tag), remove the absolute position for that DIV and give it 100% height:
html,
body {
margin: 0;
height: 100%;
}
.homepage-backgroundimage {
background: url(http://pianolessonresource.com/wp-content/uploads/2017/09/Untitled-1.jpg) center, center;
background-size: cover;
height: 100%;
}
.flexcontainer-bodyarea {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 1000px;
height: 500px;
background-color: #bbb;
}
.flexitem-50ptextarea {
width: 480px;
height: 200px;
margin: 10px;
background-color: #fff;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 36px;
color: #bbb;
}
<div class="homepage-backgroundimage"></div>
<div class="flexcontainer-bodyarea">
<div class="flexitem-50ptextarea">This is one text area</div>
<div class="flexitem-50ptextarea">This is two text area</div>
</div>
Put position:relative instead of position:absolute
Here is the code:
<html>
<title>PLR.com Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.homepage-backgroundimage {
z-index: -1;
position: relative;
background-size: cover;
left:0; right:0; top:0;
margin-left: auto;
margin-right: auto;
display: block;
}
.flexcontainer-bodyarea {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 1000px;
height: 500px;
background-color: #bbb;
}
.flexitem-50ptextarea {
width: 480px;
height: 200px;
margin: 10px;
background-color: #fff;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 36px;
color: #bbb;
}
</style>
<body>
<div class="homepage-backgroundimage"><img src="http://pianolessonresource.com/wp-content/uploads/2017/09/Untitled-1.jpg"></div>
<div class="flexcontainer-bodyarea">
<div class="flexitem-50ptextarea">This is one text area</div>
<div class="flexitem-50ptextarea">This is two text area</div>
</div>