DEV Community

loading...
Cover image for The sexyest fade effect !

The sexyest fade effect !

ziratsu profile image Ustariz Enzo ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

Ok so now we do have that kind of interface :
Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

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 ? ⛰️

Take care of you and see you next time.

Enzo.

Discussion (0)

pic
Editor guide