Skip to content

Instantly share code, notes, and snippets.

@stecman

stecman/index.htm

Last active August 9, 2019 17:02
Show Gist options
  • Save stecman/87ba9d499c7c52562794 to your computer and use it in GitHub Desktop.
Save stecman/87ba9d499c7c52562794 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 playing cards with flexbox
Raw
index.htm
<!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>
Raw
style.css
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