Skip to content

Instantly share code, notes, and snippets.

@stecman stecman/index.htm
Last active Aug 9, 2019

Embed
What would you like to do?
CSS3 playing cards with flexbox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cards</title>
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="hand">
<h2>Playing cards using flexbox</h2>
<p>The card symbols display smaller in some browsers and platforms, so you may need to tweak the font size to make it look right for you. Known to display correctly on Google Chrome under OSX.</p>
<hr>
<div class="hand">
<div class="hand__cards">
<div class="card card--margin card--small">
<div class="card__tab">
4 <span class="card__tab__symbol">♣</span>
</div>
<div class="card__tab card__tab--bottom">
4 <span class="card__tab__symbol">♣</span>
</div>
<div class="card__graphic">
<span class="element">♣</span>
<span class="element">♣</span>
<span class="element">♣</span>
<span class="element">♣</span>
</div>
</div>
<div class="card card--margin card--small card--red">
<div class="card__tab">
7 <span class="card__tab__symbol">♥</span>
</div>
<div class="card__tab card__tab--bottom">
7 <span class="card__tab__symbol">♥</span>
</div>
<div class="card__graphic">
<span class="element">♥</span>
<span class="element">♥</span>
<span class="element">♥</span>
<span class="element">♥</span>
<span class="element">♥</span>
<span class="element">♥</span>
<span class="element">♥</span>
</div>
</div>
<div class="card card--margin card--small">
<div class="card__tab">
3 <span class="card__tab__symbol">♠</span>
</div>
<div class="card__tab card__tab--bottom">
3 <span class="card__tab__symbol">♠</span>
</div>
<div class="card__graphic">
<span class="element">♠</span>
<span class="element">♠</span>
<span class="element">♠</span>
</div>
</div>
<div class="card card--margin card--small card--red">
<div class="card__tab">
A <span class="card__tab__symbol">♦</span>
</div>
<div class="card__tab card__tab--bottom">
A <span class="card__tab__symbol">♦</span>
</div>
<div class="card__graphic">
<span class="element">♦</span>
</div>
</div>
<div class="card card--margin card--small card--red">
<div class="card__tab">
J <span class="card__tab__symbol">♦</span>
</div>
<div class="card__tab card__tab--bottom">
J <span class="card__tab__symbol">♦</span>
</div>
<div class="card__graphic">
<span class="element"><strong>J</strong></span>
</div>
</div>
<div class="card card--margin card--small card--red">
<div class="card__tab">
Q <span class="card__tab__symbol">♦</span>
</div>
<div class="card__tab card__tab--bottom">
Q <span class="card__tab__symbol">♦</span>
</div>
<div class="card__graphic">
<span class="element"><strong>Q</strong></span>
</div>
</div>
<div class="card card--margin card--small">
<div class="card__tab">
K <span class="card__tab__symbol">♣︎</span>
</div>
<div class="card__tab card__tab--bottom">
K <span class="card__tab__symbol">♣︎</span>
</div>
<div class="card__graphic">
<span class="element"><strong>K</strong></span>
</div>
</div>
</div>
</div>
<div class="hand">
<div class="hand__cards">
<div class="card card--compacted card--small">
<div class="card__tab">
5 <span class="card__tab__symbol">♣</span>
</div>
<div class="card__tab card__tab--bottom">
5 <span class="card__tab__symbol">♣</span>
</div>
<div class="card__graphic">
<span class="element">♣</span>
<span class="element">♣</span>
<span class="element">♣</span>
<span class="element">♣</span>
<span class="element">♣</span>
</div>
</div>
<div class="card card--compacted card--small card--red">
<div class="card__tab">
8 <span class="card__tab__symbol">♥</span>
</div>
<div class="card__tab card__tab--bottom">
8 <span class="card__tab__symbol">♥</span>
</div>
<div class="card__graphic">
<span class="element">♥</span>
<span class="element">♥</span>
<span class="element">♥</span>
<span class="element">♥</span>
<span class="element">♥</span>
<span class="element">♥</span>
<span class="element">♥</span>
<span class="element">♥</span>
</div>
</div>
<div class="card card--compacted card--small card--red">
<div class="card__tab">
10 <span class="card__tab__symbol">♦</span>
</div>
<div class="card__tab card__tab--bottom">
10 <span class="card__tab__symbol">♦</span>
</div>
<div class="card__graphic">
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
</div>
</div>
<div class="card card--compacted card--small card--red">
<div class="card__tab">
12 <span class="card__tab__symbol">♦</span>
</div>
<div class="card__tab card__tab--bottom">
12 <span class="card__tab__symbol">♦</span>
</div>
<div class="card__graphic">
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
<span class="element">♦</span>
</div>
</div>
<div class="card card--compacted card--small">
<div class="card__tab">✪</div>
<div class="card__tab card__tab--bottom">✪</div>
<div class="card__graphic">
<span class="element"><strong>★</strong></span>
</div>
</div>
</div>
</div>
</body>
</html>
body,
html {
margin: 0;
font-family: sans-serif;
}
h2 {
margin-top: 0;
}
p {
font-size: 14px;
line-height: 1.4em;
max-width: 900px;
}
.card,
.card .card__backface {
display: block;
float: left;
backface-visibility: hidden;
font-family: 'Roboto', sans-serif;
position: relative;
cursor: pointer;
width: 278px;
height: 400px;
color: #111;
border-radius: 10px;
font-size: 21px;
border: 1px solid #f7f7f7;
background: linear-gradient(135deg, #fff, #fafafa);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease-in-out,
transform-origin 0.4s ease-in-out,
margin 0.6s ease-in-out,
margin-top 0.1s ease-out;
transform-origin: 40% 50%;
perspective-origin: 50px 10px 50px;
perspective: 500px;
}
.card img {
max-width: 1em;
}
.card .card__backface {
position: absolute;
top: 0;
left: 0;
z-index: 10;
transform: rotate3d(0, 1, 0, 180deg);
height: 100%;
width: 100%;
background: url(images/card-back.jpg) 45% 63%;
background-size: 111%;
}
.card.card--margin {
margin: 7px;
}
.card.card--compacted {
margin-left: -250px;
}
.card.card--compacted:hover ~ .card.card--compacted {
transform-origin: bottom center;
transition: transform 0.2s linear;
transform: rotateZ(15deg) translateX(120px);
}
.card.card--hidden {
transform-origin: 50% 50%;
transform: rotate3d(0, 1, 0, 180deg);
}
.card--hidden .card__backface {
transform-origin: 50% 50%;
transform: rotate3d(0, 1, 0, 0deg);
}
.card.card--red {
color: #C00;
}
.card:hover {
transform-origin: 100%;
transform: translateY(-20px) rotateZ(-1deg);
}
.card.card--selected {
margin-top: -90px;
}
.card__tab {
position: absolute;
top: 3%;
left: 3%;
font-size: 0.952em;
text-align: center;
width: 9%;
}
.card__tab .card__tab__symbol {
font-size: 0.76em;
}
.card__tab.card__tab--bottom {
top: auto;
left: auto;
right: 3%;
bottom: 3%;
transform: rotate(180deg);
}
.card__graphic {
display: flex;
flex-wrap: wrap;
flex: 1;
justify-content: space-around;
text-align: center;
padding: 5% 6%;
height: 100%;
box-sizing: border-box;
align-items: center;
}
.card__graphic .element {
font-size: 2.1em;
display: block;
width: 50%;
}
/* Large icon/font for ace & face cards */
.card__graphic .element:first-child:nth-last-child(1) {
font-size: 5em;
}
/* Cards with 1 - 3 symbols are stacked vertically */
.card__graphic .element:first-child:nth-last-child(1),
.card__graphic .element:first-child:nth-last-child(2),
.card__graphic .element:first-child:nth-last-child(3),
.card__graphic .element:first-child:nth-last-child(1) ~ .element,
.card__graphic .element:first-child:nth-last-child(2) ~ .element,
.card__graphic .element:first-child:nth-last-child(3) ~ .element {
width: 100%;
}
/* Offset centered elements
*
* Targets the last few items of cards with uneven numbers of symbols.
* For an explaination of how thesee selectors work, go here:
*
* http://stackoverflow.com/a/12198561
*/
.card__graphic .element:first-child:nth-last-child(5) ~ .element:nth-child(5),
.card__graphic .element:first-child:nth-last-child(7) ~ .element:nth-child(7),
.card__graphic .element:first-child:nth-last-child(8) ~ .element:nth-child(7),
.card__graphic .element:first-child:nth-last-child(8) ~ .element:nth-child(8),
.card__graphic .element:first-child:nth-last-child(9) ~ .element:nth-child(9),
.card__graphic .element:first-child:nth-last-child(10) ~ .element:nth-child(9),
.card__graphic .element:first-child:nth-last-child(10) ~ .element:nth-child(10),
.card__graphic .element:first-child:nth-last-child(11) ~ .element:nth-child(9),
.card__graphic .element:first-child:nth-last-child(11) ~ .element:nth-child(10),
.card__graphic .element:first-child:nth-last-child(11) ~ .element:nth-child(11),
.card__graphic .element:first-child:nth-last-child(13) ~ .element:nth-child(9),
.card__graphic .element:first-child:nth-last-child(13) ~ .element:nth-child(10),
.card__graphic .element:first-child:nth-last-child(13) ~ .element:nth-child(11),
.card__graphic .element:first-child:nth-last-child(13) ~ .element:nth-child(12),
.card__graphic .element:first-child:nth-last-child(13) ~ .element:nth-child(13) {
position: absolute;
top: 31%;
left: 0;
right: 0;
bottom: 0;
display: block;
margin: auto;
height: 1.4em;
}
.card__graphic .element:first-child:nth-last-child(5) ~ .element:nth-child(5) {
top: 0;
}
.card__graphic .element:first-child:nth-last-child(8) ~ .element:nth-child(8) {
top: 0;
bottom: 31%;
}
.card__graphic .element:first-child:nth-last-child(9) ~ .element:nth-child(9) {
top: 0;
margin: auto;
}
.card__graphic .element:first-child:nth-last-child(10) ~ .element:nth-child(9),
.card__graphic .element:first-child:nth-last-child(11) ~ .element:nth-child(9),
.card__graphic .element:first-child:nth-last-child(13) ~ .element:nth-child(9) {
top: 45%;
}
.card__graphic .element:first-child:nth-last-child(10) ~ .element:nth-child(10),
.card__graphic .element:first-child:nth-last-child(11) ~ .element:nth-child(10),
.card__graphic .element:first-child:nth-last-child(13) ~ .element:nth-child(10) {
top: 0;
bottom: 45%;
}
.card__graphic .element:first-child:nth-last-child(11) ~ .element:nth-child(11),
.card__graphic .element:first-child:nth-last-child(13) ~ .element:nth-child(11) {
top: 0;
bottom: 0;
}
.card__graphic .element:first-child:nth-last-child(12),
.card__graphic .element:first-child:nth-last-child(12) ~ .element {
width: 25%;
}
.card__graphic .element:first-child:nth-last-child(12),
.card__graphic .element:first-child:nth-last-child(12) ~ .element:nth-child(3n+1) {
margin-left: 11%;
}
.card__graphic .element:first-child:nth-last-child(12) ~ .element:nth-child(3n) {
margin-right: 11%;
}
.card__graphic .element:first-child:nth-last-child(13) ~ .element:nth-child(12) {
top: 80%;
}
.card__graphic .element:first-child:nth-last-child(13) ~ .element:nth-child(13) {
bottom: 80%;
top: 0;
}
/* Small cards */
.card.card--small,
.card.card--small .card__backface {
width: 139px;
height: 200px;
font-size: 12px;
}
.card.card--small .card__tab {
width: 12%;
font-size: 1.3em;
}
.card.card--small.card.card--compacted {
margin-left: -120px;
left: 60px;
}
.card.card--small.card--compacted:hover ~ .card.card--small.card--compacted {
transition: transform 0.1s linear;
transform: rotateZ(12deg) translateX(70px);
}
.card.card--small.card--compacted:hover + .card.card--small.card--compacted {
transition: transform 0.1s linear;
transform: rotateZ(10deg) translateX(69px);
}
.hand {
padding: 15px;
box-sizing: border-box;
background: #F4F4F4;
border-top: 1px solid #F1F1F1;
}
.hand--table {
background: #C6D5B7;
border-bottom: 1px solid #B2B2B2;
}
.hand--table .card {
transform: none !important;
cursor: default;
}
.hand__title {
display: block;
font-size: 12px;
margin: 0 0 1em;
font-size: 14px;
}
.hand__cards {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.hand__cards .card {
display: flex;
align-items: center;
justify-content: center;
float: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.