Welcome to ThemesGadget. In this post, we are going to learn How To Make A Cool Sticky Stacked Card In Blogger For free and for any platform you are using, just follow our steps carefully for avoiding any error. but first, Let's talk about it a little.
Have you ever seen a website with a cool sticky stacked cards effect? Maybe it was on Pinterest or your favorite blog. It's an interesting and unique design that is sure to catch the eye of your visitors. It's not hard to create this effect on your blogger website.
What Is A Sticky Stacked Cards?
Sticky Stacked Cards are a fun way to showcase your work, especially if you're in the e-commerce or web design industry. These cards can be used to display your services, portfolio items, or offer them as incentives for your customers. Whatever the reason may be, they are an effective way to highlight content on your website.
Sticky Stacked Cards(Stacked Cards CSS) is one of the most sought-after modern design trends. When you try it for yourself, you will realize it's really easy to integrate which looks more modern and more clear to your viewers.
The Benefits of Using Sticky Stack Cards
There are a lot of advantages to using these cards. They work very well in blogs, web pages, portfolios, advertisements, and any other content marketing materials.
How To Make A Sticky Stacked Cards?
To make a stacked card in your blogger site, you need to add HTML, CSS, and JavaScript codes. These codes have to be added in 2 steps. We will add HTML code in the 1st step, and CSS in the last step.
Step 1 - Adding HTML
You can change the highlighted heading and paragraph according to your requirement.
<div class="wrapper">
<div class="scroll-cards">
<article class="scroll-cards__item" aria-label="Wie - 1">
<h2>Nice little headline</h2>
<p>Themes Widget helps you find all your Themes related questions in one place, Custom Design for Blogger, Customized Themes, Tips & Tricks, Blogger Widgets and all its related problems and much more.</p>
</article>
<article class="scroll-cards__item" aria-label="Wie - 1">
<h2>Another Headline here</h2>
<p>Themes Widget helps you find all your Themes related questions in one place, Custom Design for Blogger, Customized Themes, Tips & Tricks, Blogger Widgets and all its related problems and much more.</p>
</article>
<article class="scroll-cards__item" aria-label="Wie - 1">
<h2>Third Card follows</h2>
<p>Themes Widget helps you find all your Themes related questions in one place, Custom Design for Blogger, Customized Themes, Tips & Tricks, Blogger Widgets and all its related problems and much more.</p>
</article>
<article class="scroll-cards__item" aria-label="Wie - 1">
<h2>Will there be another?</h2>
<p>Themes Widget helps you find all your Themes related questions in one place, Custom Design for Blogger, Customized Themes, Tips & Tricks, Blogger Widgets and all its related problems and much more.</p>
</article>
<article class="scroll-cards__item" aria-label="Wie - 1">
<h2>Last one</h2>
<p>Themes Widget helps you find all your Themes related questions in one place, Custom Design for Blogger, Customized Themes, Tips & Tricks, Blogger Widgets and all its related problems and much more.</p>
</article>
</div>
</div>
Step 2 - Adding CSS
These CSS Codes are in Compressed format if you want to beautify you can use our tool by Following this Link - CSS Beautifier Tool
<style type="text/css">
.pBd h2{margin:0;}.wrapper{max-width:60em;margin:0 auto;}.scroll-cards{counter-reset:card;position:relative;display:block;padding-bottom:20vh;}.scroll-cards>.scroll-cards__item+.scroll-cards__item{margin-top:40vh;}.scroll-cards__item{--offset:0.5em;color:#000;position:sticky;top:max(16vh,10em);padding:2em 1.5em;min-height:19em;background:#fff;box-shadow:0 2px 40px rgba(0,0,0,0.1);width:calc(100% - 5 * var(--offset));}h2{font-size:1.25em;text-transform:uppercase;margin:0;}p{font-size:1.25em;line-height:1.5;}.scroll-cards__item:nth-of-type(0){transform:translate(calc((0 - 1) * var(--offset)),calc((0 - 1) * var(--offset)));}.scroll-cards__item:nth-of-type(1){transform:translate(calc((1 - 1) * var(--offset)),calc((1 - 1) * var(--offset)));}.scroll-cards__item:nth-of-type(2){transform:translate(calc((2 - 1) * var(--offset)),calc((2 - 1) * var(--offset)));}.scroll-cards__item:nth-of-type(3){transform:translate(calc((3 - 1) * var(--offset)),calc((3 - 1) * var(--offset)));}.scroll-cards__item:nth-of-type(4){transform:translate(calc((4 - 1) * var(--offset)),calc((4 - 1) * var(--offset)));}.scroll-cards__item:nth-of-type(5){transform:translate(calc((5 - 1) * var(--offset)),calc((5 - 1) * var(--offset)));}@media screen and (min-width:37em){h1{font-size:3em;}.scroll-cards__item{--offset:1em;padding-left:5em;}.scroll-cards__item:before{counter-increment:card;content:"0" counter(card);display:flex;align-items:center;justify-content:center;width:2.75em;height:2.75em;background:#555eed;color:#fff;text-align:center;border-radius:50%;position:absolute;left:1.25em;top:1.25em;font-weight:bold;}}@media screen and (min-width:62em){.scroll-cards h1{font-size:3em;}.scroll-cards__item{--offset:1.25em;max-width:42em;}}
</style>
Conclusion
We hope that this post helped you to make a cool sticky stacked card in blogger for free on your blogger website. Do let us know if you have any other questions regarding dropdown menus. You can get in touch with us via our contact form or telegram.
