CSS Stacked Cards: Simple and Easy way

#css #html #webdev #tailwindcss

Probably you've seen this cool effect on some websites where images stack on top of each other, you liked this animation and were wondering how it can be done.

Do I need to use the animation library for that? GSAP? Or maybe Framer Motion.

And the actual answer is no. It can be done with just plain CSS!

Here is the code sample:



<div>
    <div id="layer1" class="bg-red-400  h-screen w-screen flex justify-center items-center top-0 sticky">
        <p>CSS</p>
    </div>
    <div id="layer2" class="bg-orange-400 h-screen w-screen flex justify-center items-center top-0 sticky">
        <p>is</p>
    </div>
    <div id="layer3" class="bg-blue-400 h-screen w-screen flex justify-center items-center top-0 sticky">
        <p>not</p>
    </div>
    <div id="layer4" class="bg-green-400 h-screen w-screen flex justify-center items-center top-0 sticky">
        <p>awesome!</p>
    </div>
</div>

In this example I used TailwindCSS, but you can use whatever you want - plain CSS or any other library.
So, the most important properties here are these two:

top-0 that sets top to 0
sticky that sets the position of the card to sticky

And not to forget, all cards are contained within the div - the containing block-level ancestor.

And that's it, guys.

I hope that you have learned something new today!
I would appreciate it if you could like this post or leave a comment below!

Also, feel free to follow me on GitHub and Medium!

Adios, mi amigos)

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.