Table of Contents
Card Stack Ui Css | Stacked Cards Using Pure Html Css
.png "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
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
