Hey fellow creators.
Let's face it, this effect rocks, let's code it right away.
If you prefer to watch the video version it's right here :
1. The HTML structure.
We need one block after another, so let's just code a flex container.
<div class="home">
<div class="bloc-fade">
<h1>DEEP BREATH</h1>
<p>Lorem ipsum100</p>
<br>
<p>Lorem ipsum30</p>
</div>
<div class="bloc-background"></div>
</div>
2. CSS time.
Now let's just style this quickly.
*, ::before, ::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
height: 100vh;
color: #2a3d4e;
}
.home {
position: relative;
display: flex;
width: 100%;
height: 100%;
}
.bloc-fade{
flex-shrink: 0;
position: relative;
display: flex;
align-items: center;
flex-direction: column;
width: 800px;
height: 100%;
background: #fff;
}
.bloc-background {
background-image: url("https://cdn.dribbble.com/users/1803663/screenshots/10002691/media/67450df1b3b91525836dc741b74a6aa1.png");
background-repeat: no-repeat;
flex-grow: 1;
height: 100%;
}
h1 {
text-align: center;
font-size: 70px;
padding: 100px 0 50px 0;
}
.bloc-fade p {
width: 70%;
font-size: 18px;
text-align: justify;
}
Ok so now we do have that kind of interface :
Which is already good looking isn't it ?
But we need to add the last touch for the fade effect.
3. The last touch
Add this to ".bloc-fade".
.bloc-fade {
box-shadow: 100px 0 100px 100px #fff;
}
The trick here is to put 100px to the 4th values, the spread value.
It will create a nice harmonized shadow, and, indeed, our desired fade effect.
Bravo bravo ! 🥖🧀🍷
The source code : https://codepen.io/Ziratsu/pen/mdrgBYQ?editors=0100
Come and take a look at my brand new Youtube channel :
https://www.youtube.com/channel/UCiukrDWz1wqlHAvIdqgqmQg
Be part the first pioneers that follow me uh ? ⛰️
My Yt : https://www.youtube.com/c/TheWebSchool
Take care of you and see you next time.
Enzo.
Top comments (0)