Deck of CSS Playing Cards with Shuffling

In this example below you will see how to do a Deck of CSS Playing Cards with Shuffling with some HTML / CSS and Javascript

Had a play with the idea of making playing cards with only css.I then made the cards appear in a random order each time the page loads.

Thumbnail
This awesome code was written by episodedesign, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright episodedesign ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Deck of CSS Playing Cards with Shuffling</title>
  <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Tulpen+One'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <container>
<h1>Deck of CSS Cards shuffled with jquery</h1>
<controls>

Amount Of Cards <select name="cardAmount" class="cardAmount"></select> <span class="btn-refresh">Shuffle Deck &rsaquo;</span>
</controls>
</container>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/episodedesign/deck-of-css-playing-cards-with-shuffling-qaELgw */
html {
	height: 100%;
background: #4e5660;
background: -moz-radial-gradient(center, ellipse cover,  #4e5660 10%, #000000 76%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(10%,#4e5660), color-stop(76%,#000000));
background: -webkit-radial-gradient(center, ellipse cover,  #4e5660 10%,#000000 76%);
background: -o-radial-gradient(center, ellipse cover,  #4e5660 10%,#000000 76%);
background: -ms-radial-gradient(center, ellipse cover,  #4e5660 10%,#000000 76%);
background: radial-gradient(ellipse at center,  #4e5660 10%,#000000 76%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e5660', endColorstr='#000000',GradientType=1 );
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  background-attachment:fixed;
}

h1 {
	font-size: 30px;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 15px;
	font-weight: 100;
}

container {
	
color:white;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

controls {
	font-weight: 300;
  display: block;
	text-align: center;
	width: auto;
	margin: 5px auto 20px;
	background-color: red;
	padding: 5px;
	font-size: 16px;
	line-height: 18px;
}

.btn-refresh {
	background-color: black;
	padding: 6px 5px 5px;
	border-radius: 5px;
	display: inline-block;
  cursor: pointer;
}

card {
	width:200px;
	height:310px;
	border-radius:10px;
	border:solid 1px gray;
	float: left;
	margin: 9px;
	position: relative;
	font-size: 20px;
	text-align: center;
	background: white fixed;
	line-height: 20px;
}

center {
	width: 65%;
	height: 65%;
	position: absolute;
	top: 15%;
	left: 15%;
	font-size: 70px;
	text-indent: -5px;
	word-wrap: break-word;
	line-height: 53px;
	padding: 2%;
}

.no-K center,
.no-Q center,
.no-J center {
	border:solid 1px gray;
}

.no-K.heart center,
.no-Q.heart center,
.no-J.heart center,
.no-K.diamond center,
.no-Q.diamond center,
.no-J.diamond center {
	border:solid 1px red;
}

.heart, .diamond {
color:red;	
}

.spade, .club {
color:black;
}

value, suit {
	text-align: center;
}

suit {
	
}

value {
	display: block;
	margin-bottom: 0px;
	font: 37px/29px 'Tulpen One';
}

corner {
	display: block;
	margin: 6px 7px;
	position: absolute;
	width: 20px;
	font-family:sans-serif !important;
}

corner:last-of-type {
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
	transform: rotate(180deg);
	bottom: 0;
	
	right: 0;
}

.no-K center,
.no-Q center,
.no-J center {
	font-size: 100px;
	line-height: 160px;
}

symbol {
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
	transform: rotate(180deg);
	display: inline-block;
	position: absolute;
	top: 0;
}

.no-A symbol,
.no-2 symbol:nth-child(-n+1),
.no-3 symbol:nth-child(-n+2),
.no-4 symbol:nth-child(-n+2),
.no-5 symbol:nth-child(-n+3),
.no-6 symbol:nth-child(-n+4),
.no-7 symbol:nth-child(-n+5),
.no-8 symbol:nth-child(-n+5),
.no-9 symbol:nth-child(-n+5),
.no-10 symbol:nth-child(-n+5) {
	-ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
	transform: rotate(0deg);
	margin-left: 4px;
}

.no-A symbol { top: 35%; left: 35%; }

.no-2 symbol:nth-child(1) { left: 35%; }

.no-2 symbol:nth-child(2) { bottom: 0; left: 35%; }

.no-3 symbol {left: 35%; }
.no-3 symbol:nth-child(2) { top: 36%;   }
.no-3 symbol:nth-child(3) { bottom: 0; }

.no-4 symbol:nth-child(1) { left: 0; }
.no-4 symbol:nth-child(2) { right: -3px; }
.no-4 symbol:nth-child(3) { bottom: 0; left: 0; }
.no-4 symbol:nth-child(4) { bottom: 0; right: 2px; }

.no-5 symbol:nth-child(1) { left: 0; }
.no-5 symbol:nth-child(2) { right: -3px; }
.no-5 symbol:nth-child(3) { top: 35%; left: 35%; }
.no-5 symbol:nth-child(4) { bottom: 0; left: 0; }
.no-5 symbol:nth-child(5) { bottom: 0; right: 2px; }

.no-6 symbol:nth-child(1) { left: 0; }
.no-6 symbol:nth-child(2) { right: -3px; }
.no-6 symbol:nth-child(3) { top: 35%; left: 0; }
.no-6 symbol:nth-child(4) { top: 35%; right: -3px; }
.no-6 symbol:nth-child(5) { bottom: 0; left: 0; }
.no-6 symbol:nth-child(6) { bottom: 0; right: 2px; }

.no-7 symbol:nth-child(1) { left: 0; }
.no-7 symbol:nth-child(2) { right: -3px; }
.no-7 symbol:nth-child(3) {  left: 38%; top: 34px; }
.no-7 symbol:nth-child(4) { top: 35%; left: 0; }
.no-7 symbol:nth-child(5) { top: 35%; right: -3px; }
.no-7 symbol:nth-child(6) { bottom: 0; left: 0; }
.no-7 symbol:nth-child(7) { bottom: 0; right: 2px; }

.no-8 symbol:nth-child(1) { left: 0; }
.no-8 symbol:nth-child(2) { right: -3px; }
.no-8 symbol:nth-child(3) {  left: 38%; top: 34px; }
.no-8 symbol:nth-child(4) { top: 35%; left: 0; }
.no-8 symbol:nth-child(5) { top: 35%; right: -3px; }
.no-8 symbol:nth-child(6) {  left: 38%; top: 121px; }
.no-8 symbol:nth-child(7) { bottom: 0; left: 0; }
.no-8 symbol:nth-child(8) { bottom: 0; right: 2px; }

.no-9 symbol:nth-child(1) { left: 0; }
.no-9 symbol:nth-child(2) { right: -3px; }
.no-9 symbol:nth-child(3) {  left: 0; top: 23%; }
.no-9 symbol:nth-child(4) { top: 23%; right: -3px; }
.no-9 symbol:nth-child(5) { top: 35%; left: 38%; }
.no-9 symbol:nth-child(6) { left: 0; top: 51%; }
.no-9 symbol:nth-child(7) { right: 2px; top: 51%; }
.no-9 symbol:nth-child(8) { left: 0; bottom: 0; }
.no-9 symbol:nth-child(9) { right: 2px; bottom: 0; }

.no-10 symbol:nth-child(1) { left: 0; }
.no-10 symbol:nth-child(2) { right: -3px; }
.no-10 symbol:nth-child(3) {  left: 0; top: 23%; }
.no-10 symbol:nth-child(4) { top: 23%; right: -3px; }
.no-10 symbol:nth-child(5) { top: 12%; left: 37%; }
.no-10 symbol:nth-child(6) { left: 0; top: 51%; }
.no-10 symbol:nth-child(7) { right: 2px; top: 51%; }
.no-10 symbol:nth-child(8) { right: 55px; bottom: 30px; }
.no-10 symbol:nth-child(9) { left: 0; bottom: 0; }
.no-10 symbol:nth-child(10) { right: 2px; bottom: 0; }

/*Downloaded from https://www.codeseek.co/episodedesign/deck-of-css-playing-cards-with-shuffling-qaELgw */
var btnRefresh = document.getElementsByClassName("btn-refresh");

var deckSize = 52;
var d = 52;
for( d=deckSize; d > 0; d--) { $('container select').append('<option value='+d+'>'+d+'</option>'); }

var numberOfCards = 52;

function deckOfCards() { 
	
var randomValue, randomSuit, cardSingle, cardSuit, cardValue;

var n = 0;
var i = 0;
var c = 0;
var m = 0;

var cardList = [];
var listValue = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K' ];
var listSuit = ['♠', '♦', '♥', '♣'];

$( 'card' ).remove();

function cardGenerate() {  
randomValue = listValue[Math.floor(Math.random() * listValue.length)];
randomSuit = listSuit[Math.floor(Math.random() * listSuit.length)];
cardSingle = randomSuit + randomValue; 
	
if(jQuery.inArray(cardSingle, cardList) !== -1) {
//rerun if card already exists
cardGenerate();
return;
}else{
//push card to array if is doesn't
cardList.push(cardSingle);
}
}

for( i=0; i < deckSize; i++) { cardGenerate(); }

function cardCode() { 
$('container').append('<card><corner><value></value><suit></suit></corner><center></center><corner><value></value><suit></suit></corner></card>');
}

for( n=0; n < numberOfCards; n++) { cardCode(); }

$( 'card' ).each(function() {

cardSuit = cardList[c].substring(0).replace(/\d+/g, '').replace('A', '').replace('K', '').replace('Q', '').replace('J', '');
cardValue = cardList[c].substring(1);

$(this).addClass('no-' + cardValue);
$(this).find('suit').html(cardSuit);

$(this).find('value').html(cardValue);

if (cardValue ==='A') { $(this).find('center').html( '<symbol>'+cardSuit+'&#xFE0E;</symbol>' ); }
else if (cardValue === 'K'  && (cardSuit ==='♥' || cardSuit === '♦')){ $(this).find('center').html('&#x2654;&#xFE0E;'); }
else if (cardValue === 'K'  && (cardSuit ==='♠' || cardSuit === '♣')){ $(this).find('center').html('&#x265a;&#xFE0E;'); }
else if (cardValue === 'Q'  && (cardSuit ==='♥' || cardSuit === '♦')){ $(this).find('center').html('&#x2655;&#xFE0E;'); }
else if (cardValue === 'Q'  && (cardSuit ==='♠' || cardSuit === '♣')){ $(this).find('center').html('&#x265b;&#xFE0E;'); }
else if (cardValue === 'J'  && (cardSuit ==='♥' || cardSuit === '♦')){ $(this).find('center').html('&#x2657;&#xFE0E;'); }
else if (cardValue === 'J'  && (cardSuit ==='♠' || cardSuit === '♣')){ $(this).find('center').html('&#x265d;&#xFE0E;'); }
else { 
for( m=0; m < cardValue; m++) { $(this).find('center').append( '<symbol>'+cardSuit+'&#xFE0E;</symbol>' ); }
}
if (cardSuit ==='♥') {cardSuit = 'heart';}
else if (cardSuit === '♦'){ cardSuit = 'diamond'; }
else if (cardSuit === '♠'){ cardSuit = 'spade'; }
else if (cardSuit === '♣'){ cardSuit = 'club'; }
$(this).addClass(cardSuit);
c++;
});

}//deckOfCards


$(btnRefresh).on('click', function(e) {
	event.preventDefault();
   numberOfCards = ($('.cardAmount').val());
   deckOfCards();
});

$(document).ready(function() {
   deckOfCards();
});

Comments