Goal:
When scrolling down through a website, an image will follow along and change depending on how far you have scrolled.
My Plan:
Place images on top of each other and let them be sticky. Run animation depending on scroll position.
My Problem:
I have three images that I needs to be sticky. However, they also need to be absolute to be placed on top of each other, which is obviously contradictory. Am I approaching the problem from the wrong direction?
Don't think too much about the animation stuff, I will figure that out. For now I just need help placing images on top of each other while also being sticky.
Current code: https://codepen.io/alsb/pen/oNwZYQw
<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="stylesheet" type="text/css"href="style.css">
<title>Document</title>
</head>
<body>
<h1>Hello to Sticky World</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Numquam et blanditiis repellendus voluptas iusto recusandae quis
quos iure quod eos possimus ad corrupti, nam asperiores,
minima quisquam praesentium neque ratione?
</p>
<div class="container">
<img class="item" src="https://picsum.photos/300/200" />
<img class="item" src="https://picsum.photos/300/200" />
<img class="item" src="https://picsum.photos/300/200" />
</div>
<p>...</p>
</body>
</html>
.sticky-container {
height: 100%;
}
img.sticky {
position: -webkit-sticky;
position: sticky;
top: 50px;
width: 200px;
}
.container {
display: flex;
justify-content: space-around;
align-items: flex-start;
border: 2px dashed rgba(114, 186, 94, 0.35);
height: 400px;
background: rgba(114, 186, 94, 0.05);
}
.item {
position: sticky;
top: 1rem;
}
The solution was to not use <img>. The inner-most div will be sticky, wrapped in an absolute div.
<div class="wrapper">
<div class="container">
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
</div>
</div>
.wrapper {
position: relative;
width: 50vw;
}
.container {
display: flex;
position: absolute;
justify-content: space-around;
align-items: flex-start;
border: 2px dashed rgba(114, 186, 94, 0.35);
height: 900px;
background: rgba(114, 186, 94, 0.05);
}
.item {
position: sticky;
top: 1rem;
background-image: url("https://picsum.photos/500/300");
}
Related
Well, I want to understand why when I padded "header div" the content comes out of div, for example, if I apply 60% instead of applying 60% within div, 60% of the page applies, I believed that % was applied over the height/width of the parent Can anyone explain it to me? thank you :)
enter image description here
*{
margin: 0;
text-decoration: none;
list-style: none;
}
header{
background-image: url("../img/stock-1.jpeg");
background-position: 50% 25%;
min-height: 650px;
height: 60vh;
}
header nav{
display: flex;
justify-content: space-between;
height: 60px;
}
header nav a img{
width: 15rem;
}
header nav ul{
display: flex;
justify-content: center;
align-items: center;
}
header nav ul li:nth-child(n + 2){
margin-left: 20px;
}
header nav ul li a{
color: black;
}
header div{
background-color: aqua;
display: flex;
padding-top: 60%;
flex-direction: column;
align-items: center;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
<nav>
<img src="assets/img/logo_black.png" alt="Logo">
<ul>
<li>Blog</li>
<li>Vídeos</li>
<li>Descubre</li>
</ul>
</nav>
<div>
<h1>Descubre nuevos lugares en los que aventurarte</h1>
<input type="text" placeholder="Buscar lugares...">
</div>
</header>
<main>
<section>
<h2>Últimos posts</h2>
<article>
<img src="assets/img/last-posts-1.jpeg" alt="">
<h3>Subiendo el Himalaya</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi earum neque libero officiis reprehenderit repudiandae placeat soluta deserunt harum qui. Fugit, in non repudiandae mollitia nemo tenetur explicabo a sequi?</p>
</article>
</section>
</main>
</body>
</html>
*fill text because it tells me that my pubication contains too much code *fill text because it tells me that my pubication contains too much code
If you want to just move the contents of a div down by 30% of the container's height, then you can use position: relative and top: 30% on a wrapper around the contents. Like so:
.container {
background-color: red;
height: 200px;
}
.contents {
background-color: yellow;
position: relative;
top: 30%;
}
<div class="container">
<div class="contents">
Blah blah blah
</div>
</div>
Run the snippet below:
.container {
display: flex;
}
.container1 {
box-shadow: inset 0 0 30px red;
width: min-content;
}
.container2 {
position: relative;
margin-left: 20px;
width: min-content;
}
.container2::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 30px red;
}
.inner {
width: 200px;
height: 100px;
background: yellow;
}
.text {
width: 200px;
height: 100px;
}
<div class="container">
<div class="container1">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
<div class="container2">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
</div>
Is there a way to rewrite the code for the container1's red box shadow to be above the yellow background (or in general any background including a picture)?
One way to do it, which resolves the issue, is utilising pseudo-elements (so, the rendered container2 is how it intended to be), but I don't particularly like this solution and hope there is a way to do the same without introducing new dom elements (just utilising css).
As you mentioned container2 to show the intended structure, I removed that from my code. here is how I do this task with the help of position CSS property:
.container {
display: flex;
}
.container1 {
box-shadow: inset 0 0 30px red;
width: 200px;
height: 200px;
position: relative;
}
.inner {
width: 200px;
height: 100px;
background: yellow;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
.text {
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="container1">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
<!--
<div class="container2">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
-->
</div>
</body>
</html>
Without setting width and height:
If you don't want to set width and height you could use display:flex on .container1 element as follow:
.container {
display: flex;
}
.container1 {
box-shadow: inset 0 0 30px red;
width: 35%;
display: flex;
flex-direction: column;
}
.inner {
background: yellow;
width: 100%;
z-index: -1;
}
.inner img {
width: 100%;
}
.text {
color: #1415FF;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="container1">
<div class="inner">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque id temporibus cumque, magnam blanditiis voluptate vel nisi. Fugit itaque quod inventore, optio dolor magnam ipsa, temporibus rerum qui error deserunt?
<!-- <img src="birthday.png" alt=""> -->
</div>
<div class="text">Some text some text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto quo assumenda veniam voluptatum beatae impedit doloremque, libero quam placeat. Illo, totam. Deleniti nihil fugiat impedit, rerum ullam hic mollitia quia! impedit doloremque, libero quam placeat. Illo, totam. Deleniti nihil fugiat impedit, rer</div>
</div>
<!--
<div class="container2">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
-->
</div>
</body>
</html>
I used width: 35% in .container1 just because of we usually set a relative width for elements but you can remove it. You could also put img tag inside .inner class and I think that works correctly.
I want to create a CSS-Card
On the left side should be a image and on the ride side a headline and paragraph.
Furthermore, in the lower section of the right side there should be a profile picture, name and date of the post.
So my question is
How can I prevent the content in the container-article from overlapping the container-card?
My Current State with the CSS-Card
----------
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="author" content="Ufuk Can Varol" />
<meta name="description" content="Article Card v3" />
<!-- CSS -->
<link rel="stylesheet" href="css/index.css" />
<!-- Font-Family [Manrope]-->
<link
href="https://fonts.googleapis.com/css2?family=Manrope:wght#500;700&display=swap"
rel="stylesheet"
/>
<!-- Favicon -->
<link
rel="shortcut icon"
type="image/png"
href="assets/images/favicon-32x32.png"
/>
<title>Article</title>
</head>
<body>
<div id="container">
<div class="container-card">
<div class="container-image"></div>
<div class="container-article">
<div class="article-header">
<h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatum, officia.
</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum,
vel suscipit impedit accusantium nihil minima asperiores,
exercitationem sapiente ad expedita fugiat. Veritatis sit
voluptatem qui est unde, aspernatur nemo impedit!
</p>
</div>
<div class="article-footer">
<div class="article-footer-author">
<div class="author-image"></div>
<p>
Savannah Garrett <br />
28 Jun 2020
</p>
</div>
<div></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
font-family: 'Manrope', sans-serif;
background-color: aliceblue;
}
#container {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: grid;
justify-content: center;
align-items: center;
justify-items: center;
align-items: center;
background-color: antiquewhite;
}
.container-card {
width: 800px;
height: 300px;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 2fr 3fr;
background-color: aqua;
}
.container-image {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: azure;
}
.container-article {
width: 100%;
height: 100%;
margin: 0;
padding: 40px;
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
background-color: aquamarine;
}
.article-header {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: bisque;
}
.article-footer {
width: 100%;
height: 100%;
background-color: blueviolet;
}
Remove height: 300px from .container-card. If you set a fixed height it won't expand to fit its child elements.
I have tried my best to solve the issue but it's not working. I want to make a gradient border on my website for a slideshow (similar to the one on this video). I used (:before) pseudo selector here is my HTML code:
* {
color: white;
margin: 0px 0px;
padding: 0px 0px;
box-sizing: border-box;
}
body {
background-color: #060c21;
}
/* NavBar Starts */
#mainnav {
display: flex;
justify-content: center;
padding: 15px;
background-color: black;
width: 98%;
position: static;
}
.items>a {
font-family: "Roboto Slab", serif;
text-decoration: none;
}
.items {
margin: 0 5vw 0 5vw;
padding: 1vw;
width: fit-content;
font-size: 1.3rem;
}
.items>a:hover {
color: rgb(0, 255, 242);
}
/* NavBar Ends */
/* Content Starts */
.slide-box {
position: relative;
border: 2px solid red;
height: 75vh;
width: 95%;
margin: 2% auto;
}
.slide-box:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: white;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#531&display=swap" rel="stylesheet" />
<!-- font-family: 'Roboto Slab', serif; -->
<link rel="stylesheet" href="Vaishnavi.css" />
</head>
<body>
<nav>
<div id="mainnav">
<div class="items">
Home
</div>
<div class="items">
About US
</div>
<div class="items">
Creations
</div>
<div class="items">
Help
</div>
</div>
</nav>
<div class="slide-box">
<h1>This is glowing box</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo voluptatibus et quasi illum inventore rem excepturi quam tenetur eius est, minima aliquam repellendus deleniti modi laudantium similique iste ipsum? Ad!
</p>
</div>
</body>
</html>
Please tell me the mistake I am making and why my z-index is not working correctly. In my view, I have written the code correctly.
Is this something that you are looking for?
You can see that I recreated the example based on this video that you have provided.
* {
color: white;
margin: 0px 0px;
padding: 0px 0px;
box-sizing: border-box;
}
body {
background-color: #060c21;
}
/* NavBar Starts */
#mainnav {
display: flex;
justify-content: center;
padding: 15px;
background-color: black;
width: 98%;
position: static;
}
.items>a {
font-family: "Roboto Slab", serif;
text-decoration: none;
}
.items {
margin: 0 5vw 0 5vw;
padding: 1vw;
width: fit-content;
font-size: 1.3rem;
}
.items>a:hover {
color: rgb(0, 255, 242);
}
/* NavBar Ends */
/* Content Starts */
.slide-box {
position: relative;
margin: 2% auto;
height: 75vh;
width: 95%;
background: linear-gradient(0deg, #000, #262626);
}
.slide-box:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
background-size: 400%;
width: calc(100% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: animate 20s linear infinite;
}
#keyframes animate {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#531&display=swap" rel="stylesheet" />
<!-- font-family: 'Roboto Slab', serif; -->
<link rel="stylesheet" href="Vaishnavi.css" />
</head>
<body>
<nav>
<div id="mainnav">
<div class="items">
Home
</div>
<div class="items">
About US
</div>
<div class="items">
Creations
</div>
<div class="items">
Help
</div>
</div>
</nav>
<div class="slide-box">
<h1>This is glowing box</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo voluptatibus et quasi illum inventore rem excepturi quam tenetur eius est, minima aliquam repellendus deleniti modi laudantium similique iste ipsum? Ad!
</p>
</div>
</body>
</html>
What you were missing in your code to see the text was the line below:
.slide-box {
background: linear-gradient(0deg, #000, #262626);
}
The z-index worked just fine but because your background color was white and also the text color was white, you could not see the text.
Here is the code how you can achieve gradient border(code is copied from css-tricks). For more please visit here
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #222;
}
.module-border-wrap {
max-width: 250px;
padding: 1rem;
position: relative;
background: linear-gradient(to right, red, purple);
padding: 3px;
}
.module {
background: #222;
color: white;
padding: 2rem;
}
<div class="module-border-wrap">
<div class="module">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
</div>
</div>
Link to project
I've have finally managed to get the header layout I want but one thing I can't get done and that is the alignment of the text (h2 and h3) in the left sidebar. I have tried to do it with a fixed proportie but it get side-effects and I think it has something to do with the rotated text.
The main title should be in left bottom, on one line and the date should be on the right of the main title also on one line. Those combined must align at center of the side-main text aligned to the left.
Edit: Link to layout
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header {
display: flex;
background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav {
position: fixed;
width: 100%;
height: 60px;
background: rgba(255, 255, 255, .2);
}
.side-main {
display: flex;
flex-direction: column;
height: calc(100vh - 60px);
margin-top: 60px;
width: 70px;
border-right: 1px rgba(255, 255, 255, .2) solid;
}
.agenda-text {
width: 100%;
color: #FFF;
transform: rotate(-90deg);
text-transform: uppercase;
}
.header-main {
display: flex;
height: calc(100vh - 60px);
margin-top: 60px;
}
<html>
<head>
<title>Rataplan Improvisatietheater</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="top-nav">
nav
</div>
<div class="wrapper-header">
<div class="side-main">
<h2 class="agenda-text">Main Title Event</h2>
<h3 class="agenda-text">Event date 1 (month) 2018</h3>
</div>
<div class="header-main">
main
</div>
</div>
<div class="wrapper-content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
</div>
</body>
</html>
Many thanks in advance!
Hope you can help me out.
Regards,
Jason
This doesn't look super polished as a whole yet, but I believe it does solve your issue with the rotation of the side-main.
Html:
<!DOCTYPE html>
<html>
<head>
<title>Rataplan Improvisatietheater</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="top-nav">
nav
</div>
<div class="wrapper-header">
<div class="side-main-wrapper">
<div class="side-main">
<h2 class="agenda-text">Main Title Event</h2>
<h3 class="agenda-text">Event date 1 (month) 2018</h3>
</div>
</div>
<div class="header-main">
main
</div>
</div>
<div class="wrapper-content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
</div>
</body>
</html>
Css:
*{
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header{
display: flex;
background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav{
position: fixed;
width: 100%;
height: 60px;
background: rgba(255,255,255,.2);
}
.side-main-wrapper {
transform: rotate(-90deg);
margin-top: 60px;
}
.side-main{
display: flex;
flex-direction: column;
height: 70px;
width: calc(100vh - 60px);
border-bottom: 1px rgba(255,255,255,.2) solid;
}
.agenda-text{
color: #FFF;
text-transform: uppercase;
}
.header-main{
height: calc(100vh - 60px);
margin-top: 60px;
}
Rather than rotating the entries of the flex column, I wrapped the side-main in a side-main-wrapper and rotated that. Then I just treated the side-main as a regular flex column, and it started behaving.
I added flex: 1; and some margin-left to .agenda-text and then opened up the .side-main width a bit. Hope this is something like what you are looking for, but just guessing since you didn't specify
Edit: Looks wack in preview and fullscreen... but works in the actual edit jsfiddle screen... maybe this is not a good answer
Edit Took out flex: 1 and margin-left. I've made it look how you described, but with an issue. I think a big step forward is adding a container around the .agenda-texts and then rotate that instead of the text. The problem with my approach is that the flex positioning is based on the width of the sidebar, before everything gets turned sideways. So with a left bar width like 300px it works but with a smaller width like you are looking for probably not. Can't imagine making this fully responsive without doing the whole thing over
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header {
display: flex;
background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav {
position: fixed;
width: 100%;
height: 60px;
background: rgba(255, 255, 255, .2);
}
.side-main {
height: calc(100vh - 60px);
margin-top: 60px;
width: 300px;
border-right: 1px rgba(255, 255, 255, .2) solid;
}
.side-main-title {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
transform: rotate(-90deg);
}
.agenda-text {
color: #FFF;
text-transform: uppercase;
}
.header-main {
display: flex;
height: calc(100vh - 60px);
margin-top: 60px;
}
<!DOCTYPE html>
<html>
<head>
<title>Rataplan Improvisatietheater</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="top-nav">
nav
</div>
<div class="wrapper-header">
<div class="side-main">
<div class="side-main-title">
<h2 class="agenda-text">Main Title Event</h2>
<h3 class="agenda-text">Event date 1 (month) 2018</h3>
</div>
</div>
<div class="header-main">
main
</div>
</div>
<div class="wrapper-content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
</div>
</body>
</html>