<ul id="nav">
<li class="lowercase"><label for="put-cards-down">(Put cards down)</label></li>
<li><label for="toggle-card-1">First card</label></li>
<li><label for="toggle-card-2">Second card</label></li>
<li><label for="toggle-card-3">Third card</label></li>
<li><label for="toggle-card-4">Fourth card</label></li>
</ul>
<h1 id="pen-title">Pure CSS Card Deck</h1>
<div id="pen-description">(Requires enough window height)</div>
<input type="radio" name="cards" class="card-checkbox" id="toggle-card-1">
<div class="card">
<h2>First card</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nihil dolore, cumque molestiae doloribus necessitatibus! Nisi perferendis ipsam, harum itaque.</p>
</div>
<input type="radio" name="cards" class="card-checkbox" id="toggle-card-2">
<div class="card">
<h2>Second card</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nihil dolore, cumque molestiae doloribus necessitatibus! Nisi perferendis ipsam, harum itaque.</p>
</div>
<input type="radio" name="cards" class="card-checkbox" id="toggle-card-3">
<div class="card">
<h2>Third card</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nihil dolore, cumque molestiae doloribus necessitatibus! Nisi perferendis ipsam, harum itaque.</p>
</div>
<input type="radio" name="cards" class="card-checkbox" id="toggle-card-4">
<div class="card">
<h2>Fourth card</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nihil dolore, cumque molestiae doloribus necessitatibus! Nisi perferendis ipsam, harum itaque.</p>
</div>
<input type="radio" name="cards" class="card-checkbox" id="put-cards-down">
html { font-size: 16px; }
body { background-color: #181818; }
#pen-title,
#pen-description {
position: fixed;
top: 40%;
left: 50%;
z-index: 0;
color: #484848;
}
#pen-title {
transform: translate(-50%, -125%);
font-size: 2rem;
text-transform: uppercase;
}
#pen-description {
transform: translate(-50%, 125%);
font-size: 1.125rem;
}
// Hide cards' checkboxes
.card-checkbox { display: none; }
// Cards
.card {
$width: 640px;
$height: $width * 0.67;
box-sizing: border-box;
position: fixed;
top: 85%;
left: 50%;
width: $width;
height: $height;
margin-left: -$width / 2;
padding: 1rem;
transform: rotate(-2deg);
z-index: 0;
background-color: #ddd;
color: #181818;
box-shadow: 0 0 16px rgba(0,0,0,.25);
transition: all .75s;
}
// Card deck
%first-card-in-deck {
transform: rotate(2deg);
z-index: 2;
background-color: #fff;
}
%second-card-in-deck {
z-index: 1;
transform: rotate(0);
background-color: #eee;
}
.card-checkbox:first-of-type + .card {
@extend %first-card-in-deck;
}
.card-checkbox:nth-of-type(2) + .card {
@extend %second-card-in-deck;
}
// Active card
.card-checkbox:checked + .card {
margin-top: -240px;
transform: rotate(0);
top: 50%;
background-color: #fff;
}
// Modify deck when certain cards are active so that the deck looks always the same (except if there isn't enough cards)
.card-checkbox:first-of-type:checked ~ .card-checkbox:nth-of-type(2) + .card {
@extend %first-card-in-deck;
}
.card-checkbox:first-of-type:checked ~ .card-checkbox:nth-of-type(3) + .card {
@extend %second-card-in-deck;
}
.card-checkbox:nth-of-type(2):checked ~ .card-checkbox:nth-of-type(3) + .card {
@extend %second-card-in-deck;
}
// Navigation
#nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-left: 0;
list-style: none;
font-size: .95rem;
color: #686868;
li:not(.lowercase) { text-transform: uppercase; }
label {
display: block;
padding: .75rem 1.25rem;
cursor: pointer;
transition: color .25s;
&:hover {
color: #f8f8f8;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.