Pure CSS Card Deck

Developer
Miro Karilahti
Size
3,245 Kb
Views
123,464
  1. Pure CSS Card Deck Previews
  2. Pure CSS Card Deck HTML Codes
  3. Pure CSS Card Deck CSS Codes

How do I make an pure css card deck?

A pure CSS card deck with neat animations. Check it out!. What is a pure css card deck? How do you make a pure css card deck? This script and codes were developed by Miro Karilahti on 07 July 2022, Thursday.

Pure CSS Card Deck Previews
IQ Test

Pure CSS Card Deck - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Card Deck</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<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">
</body>
</html>

Pure CSS Card Deck - Script Codes CSS Codes

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 { -webkit-transform: translate(-50%, -125%); transform: translate(-50%, -125%); font-size: 2rem; text-transform: uppercase;
}
#pen-description { -webkit-transform: translate(-50%, 125%); transform: translate(-50%, 125%); font-size: 1.125rem;
}
.card-checkbox { display: none;
}
.card { box-sizing: border-box; position: fixed; top: 85%; left: 50%; width: 640px; height: 428.8px; margin-left: -320px; padding: 1rem; -webkit-transform: rotate(-2deg); transform: rotate(-2deg); z-index: 0; background-color: #ddd; color: #181818; box-shadow: 0 0 16px rgba(0, 0, 0, 0.25); -webkit-transition: all .75s; transition: all .75s;
}
.card-checkbox:first-of-type + .card, .card-checkbox:first-of-type:checked ~ .card-checkbox:nth-of-type(2) + .card { -webkit-transform: rotate(2deg); transform: rotate(2deg); z-index: 2; background-color: #fff;
}
.card-checkbox:nth-of-type(2) + .card, .card-checkbox:first-of-type:checked ~ .card-checkbox:nth-of-type(3) + .card, .card-checkbox:nth-of-type(2):checked ~ .card-checkbox:nth-of-type(3) + .card { z-index: 1; -webkit-transform: rotate(0); transform: rotate(0); background-color: #eee;
}
.card-checkbox:checked + .card { margin-top: -240px; -webkit-transform: rotate(0); transform: rotate(0); top: 50%; background-color: #fff;
}
#nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 0; list-style: none; font-size: .95rem; color: #686868;
}
#nav li:not(.lowercase) { text-transform: uppercase;
}
#nav label { display: block; padding: .75rem 1.25rem; cursor: pointer; -webkit-transition: color .25s; transition: color .25s;
}
#nav label:hover { color: #f8f8f8;
}
Pure CSS Card Deck - Script Codes
Pure CSS Card Deck - Script Codes
Home Page Home
Developer Miro Karilahti
Username miroot
Uploaded July 07, 2022
Rating 3.5
Size 3,245 Kb
Views 123,464
Do you need developer help for Pure CSS Card Deck?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Miro Karilahti (miroot) Script Codes
Name
Flat Text Editor
Color changing text
Simple personal profile
Single element Nexus 5
Navigation
Expanding Photo Stack
Background change in pure CSS
Button with sliding information
Flat sidebar
Long Shadow Camera Icon
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!