Card Stack Ui Css | Stacked Cards Using Pure Html Css







Card Stack Ui Css | Stacked Cards Using Pure Html Css 

Welcome🎉 to Code With Random blog. In this blog, we learn how to create Stacked Cards. We use HTML & CSS  for Stacked Cards. Hope you enjoy our blog so let’s start with a basic HTML structure for the Stacked Cards. 

HTML code

 <div card-stack>  
<input id="card-0" name="card-set" type="radio" checked/>
<div card>
<div class="content">
<h2>Steps to Frontend Success</h2>
<p>A life well lived.</p>
<label for="card-1">Learn More</label>
</div>
</div>
<input id="card-1" name="card-set" type="radio"/>
<div card>
<div class="content">
<h2>Step 1</h2>
<p>Write some markup.</p>
<label for="card-2">Go to 2</label>
</div>
</div>
<input id="card-2" name="card-set" type="radio" />
<div card>
<div class="content">
<h2>Step 2</h2>
<p>Write some CSS.</p>
<label for="card-3">Go to 3</label>
</div>
</div>
<input id="card-3" name="card-set" type="radio" />
<div card>
<div class="content">
<h2>Step 3</h2>
<p>Look up stuff on MDN.</p>
<label for="card-4">Go to 4</label>
</div>
</div>
<input id="card-4" name="card-set" type="radio" />
<div card>
<div class="content">
<h2>Step 4</h2>
<p>Switch Pre-Processors. Because things are starting to get complicated.</p>
<label for="card-5">Go to 5</label>
</div>
</div>
<input id="card-5" name="card-set" type="radio" />
<div card>
<div class="content">
<h2>Step 5</h2>
<p>Thow out your work start over, becasuse this time you definately choose the right framework.</p>
<label for="card-6">Go to 6</label>
</div>
</div>
<input id="card-6" name="card-set" type="radio" />
<div card>
<div class="content">
<h2>Step 6</h2>
<p>Break down and cry.</p>
<label for="card-7">Go to 7</label>
</div>
</div>
<input id="card-7" name="card-set" type="radio" />
<div card>
<div class="content">
<h2>Step 7</h2>
<p>Curl up in fetal position.</p>
<label for="card-8">Go to 8</label>
</div>
</div>
<input id="card-8" name="card-set" type="radio" />
<div card>
<div class="content">
<h2>Step 8</h2>
<p>Write more CSS to cover up your already bad CSS.</p>
<label for="card-0">Start Over</label>
</div>
</div>
</div>

There is all HTML code for the Stacked Cards. Now, you can see output without CSS, then we write CSS for the Stacked Cards.

Output

Card Stack Ui Css | Stacked Cards Using Pure Html Css

Card Stack Ui Css | Stacked Cards Using Pure Html Css

CSS code

 [card-stack] {  
will-change: transform;
position: relative;
width: 20rem;
margin-left: auto;
margin-right: auto;
margin-top: 1rem;
}
[name="card-set"] {
display: none;
}
[name="card-set"]:checked + [card] {
display: flex;
opacity: 1;
filter: blur(0);
transform: translateY(0) scale(1);
transition: transform 1s, opacity 1s, filter 0.25s;
transition-delay: 0.3s;
z-index: 0;
}
[name="card-set"]:checked + [card] ~ [card] {
z-index: -1;
display: flex;
opacity: 0.9;
filter: blur(1px);
transform: translateY(1.2rem) scale(0.95);
transition: transform 1.5s, opacity 1.5s, filter 0.5s;
transition-delay: 0.4s;
}
[name="card-set"]:checked + [card] ~ [card] ~ [card] {
z-index: -2;
display: flex;
opacity: 0.7;
filter: blur(2px);
transform: translateY(2.4rem) scale(0.9);
transition: transform 2s, opacity 2s, filter 1.5s;
transition-delay: 0.5s;
}
[name="card-set"]:checked + [card] ~ [card] ~ [card] ~ [card] {
z-index: -3;
display: flex;
opacity: 0.5;
filter: blur(3px);
transform: translateY(3.6rem) scale(0.85);
transition: transform 2.5s, opacity 2.5s, filter 2s;
transition-delay: 0.7s;
}
[name="card-set"]:checked + [card] ~ [card] ~ [card] ~ [card] ~ [card] {
z-index: -4;
display: flex;
opacity: 0;
filter: blur(4px);
transform: translateY(5rem) scale(0.8);
transition: transform 3s, opacity 3s, filter 2.5s;
transition-delay: 0.8s;
}
[card] {
display: flex;
will-change: filter opacity transform;
position: absolute;
top: 0;
width: 100%;
background-color: white;
opacity: 0;
transform: translateY(0) translateX(calc(-100% - 1rem)) scale(1);
transition: transform 0.5s, opacity 0.2s 0.3s, filter 0.1s;
transition-timing-function: ease-in;
box-shadow: 0 0.2rem 0 rgba(0, 0, 0, .2);
border-radius: 5px;
justify-content: center;
align-items: center;
z-index: 1;
min-height: 50vh;
}
[card]::before {
content: '';
display: block;
padding-bottom: 130%;
}
[card] .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 2rem;
text-align: center;
}
[card] label {
color: white;
display: inline-block;
padding: 1rem 2rem;
margin: 1rem;
background-color: #47cf73;
border-radius: 200px;
user-select: none;
}
[card] label:hover {
background-color: #6fda92;
}
[card] label:active {
background-color: #248c46;
}
body {
background: #248c46;
}

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output

Card Stack Ui Css | Stacked Cards Using Pure Html Css

Card Stack Ui Css | Stacked Cards Using Pure Html Css

Now we have completed our CSS section,  Here is our updated output with CSSHope you like the Stacked Cards, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

This post teaches us how to create Stacked Cards using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Cameron Leslie

Check out more…..



Share on:

Leave a Comment