Material Playing Cards

Developer
Andy Tran
Size
11,077 Kb
Views
54,648
  1. Material Playing Cards Previews
  2. Material Playing Cards HTML Codes
  3. Material Playing Cards CSS Codes
  4. Material Playing Cards JS Codes

How do I make an material playing cards?

Want to create your very on Material Playing Card? Follow the guide below!Material Playing Cards, this is just the backbone for a full on 30s demo that I'm creating within a few days.. What is a material playing cards? How do you make a material playing cards? This script and codes were developed by Andy Tran on 12 June 2022, Sunday.

Material Playing Cards Previews
IQ Test

Material Playing Cards - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Playing Cards</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Suit Mixin-->
<!-- Panel Mixin-->
<!-- Card Mixin-->
<!-- Begin-->
<!-- Pen Title-->
<div class="pen-title"> <h1> <span>(Tutorial)</span>Material Playing Card</h1><span>Pen <i class='fa fa-code'></i> by <a href='http://andytran.me'>Andy Tran</a></span>
</div>
<!-- Rerun Button -->
<div class="rerun"><a href="">Rerun Pen</a></div>
<!-- Playing Card-->
<div class="card"> <!-- Demo Purposes--> <div class="ripple"></div> <div class="ripple"></div> <div class="panel top" style="background-color: #{color}"> <div class="rank">Q </div> <div class="suit">Queen of Hearts</div> <div class="icon"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="#{width}" height="#{height}" viewBox="0 0 18.2 17" enable-background="new 0 0 18.2 17" xml:space="preserve"><path fill="#d64c4c" d="M18.2,4.5c0-2.5-2-4.5-4.5-4.5c-2.5,0-4.5,2-4.5,4.5h0C9.1,2,7,0,4.5,0C2,0,0,2,0,4.5 c0,1.2,0.5,2.4,1.3,3.2h0L9.1,17l7.8-9.3h0C17.7,6.9,18.2,5.8,18.2,4.5z"/></svg> </div> </div> <div class="content #{className}"> <div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="123px" height="75px" viewBox="0 0 61.1 37.2" enable-background="new 0 0 61.1 37.2" xml:space="preserve"><polygon id="XMLID_16_" fill="#E55125" points="46.8,23 42.5,17 61.1,3.7"/>
<polygon id="XMLID_15_" fill="#F57E20" points="14.4,23 0,3.7 18.6,17"/>
<polygon id="XMLID_14_" fill="#FEBB18" points="8.8,37.2 0,3.7 14.4,23 30.6,0 30.6,37.2"/>
<polygon id="XMLID_13_" fill="#F49221" points="52.3,37.2 61.1,3.7 46.8,23 30.6,0 30.6,37.2"/> <g><polygon id="XMLID_12_" fill="#F15753" points="30.6,23 23.9,23 27.2,27.9"/>
<polygon id="XMLID_11_" fill="#F37B7B" points="23.9,23 30.6,23 27.2,18.1"/>
<polygon id="XMLID_10_" fill="#F59090" points="27.2,18.1 30.6,23 30.6,18.1 30.6,13.1"/>
<polygon id="XMLID_9_" fill="#EB5451" points="30.6,13.1 30.6,18.1 30.6,23 33.9,18.1"/>
<polygon id="XMLID_8_" fill="#B62026" points="37.3,23 30.6,23 33.9,27.9"/>
<polygon id="XMLID_7_" fill="#e43532" points="30.6,23 37.3,23 33.9,18.1"/>
<polygon id="XMLID_6_" fill="#E14E4B" points="27.2,27.9 30.6,32.9 30.6,27.9 30.6,23"/>
<polygon id="XMLID_5_" fill="#A81F23" points="30.6,23 30.6,27.9 30.6,32.9 33.9,27.9"/> </g><polygon id="XMLID_3_" fill="#E38825" points="37.3,23 30.6,32.9 30.6,37.2 46.3,37.2"/>
<path id="XMLID_2_" fill="#FFFFFF" d="M30.6,19.8c-1.8,0-3.3-1.5-3.3-3.3c0,1.8-1.5,3.3-3.3,3.3c1.8,0,3.3,1.5,3.3,3.3 C27.3,21.2,28.8,19.8,30.6,19.8z"/> </svg><span class="#{color}"></span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="123px" height="75px" viewBox="0 0 61.1 37.2" enable-background="new 0 0 61.1 37.2" xml:space="preserve"><polygon id="XMLID_16_" fill="#E55125" points="46.8,23 42.5,17 61.1,3.7"/>
<polygon id="XMLID_15_" fill="#F57E20" points="14.4,23 0,3.7 18.6,17"/>
<polygon id="XMLID_14_" fill="#FEBB18" points="8.8,37.2 0,3.7 14.4,23 30.6,0 30.6,37.2"/>
<polygon id="XMLID_13_" fill="#F49221" points="52.3,37.2 61.1,3.7 46.8,23 30.6,0 30.6,37.2"/> <g><polygon id="XMLID_12_" fill="#F15753" points="30.6,23 23.9,23 27.2,27.9"/>
<polygon id="XMLID_11_" fill="#F37B7B" points="23.9,23 30.6,23 27.2,18.1"/>
<polygon id="XMLID_10_" fill="#F59090" points="27.2,18.1 30.6,23 30.6,18.1 30.6,13.1"/>
<polygon id="XMLID_9_" fill="#EB5451" points="30.6,13.1 30.6,18.1 30.6,23 33.9,18.1"/>
<polygon id="XMLID_8_" fill="#B62026" points="37.3,23 30.6,23 33.9,27.9"/>
<polygon id="XMLID_7_" fill="#e43532" points="30.6,23 37.3,23 33.9,18.1"/>
<polygon id="XMLID_6_" fill="#E14E4B" points="27.2,27.9 30.6,32.9 30.6,27.9 30.6,23"/>
<polygon id="XMLID_5_" fill="#A81F23" points="30.6,23 30.6,27.9 30.6,32.9 33.9,27.9"/> </g><polygon id="XMLID_3_" fill="#E38825" points="37.3,23 30.6,32.9 30.6,37.2 46.3,37.2"/>
<path id="XMLID_2_" fill="#FFFFFF" d="M30.6,19.8c-1.8,0-3.3-1.5-3.3-3.3c0,1.8-1.5,3.3-3.3,3.3c1.8,0,3.3,1.5,3.3,3.3 C27.3,21.2,28.8,19.8,30.6,19.8z"/> </svg> </div> </div> <div class="panel bottom" style="background-color: #{color}"> <div class="rank">Q </div> <div class="suit">Queen of Hearts</div> <div class="icon"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="#{width}" height="#{height}" viewBox="0 0 18.2 17" enable-background="new 0 0 18.2 17" xml:space="preserve"><path fill="#d64c4c" d="M18.2,4.5c0-2.5-2-4.5-4.5-4.5c-2.5,0-4.5,2-4.5,4.5h0C9.1,2,7,0,4.5,0C2,0,0,2,0,4.5 c0,1.2,0.5,2.4,1.3,3.2h0L9.1,17l7.8-9.3h0C17.7,6.9,18.2,5.8,18.2,4.5z"/></svg> </div> </div>
</div>
<!-- Tip-->
<div id="tip"> <h1>How to create a card?</h1> <p>It's really simple... If you have basic knowledge of Jade. Simple fill out the paramaters in the mixin below, drop it below this box, and watch as magic happens!</p><code> <h1>Jade</h1> <p> Please note that these are case sensitive.<br>// Suits: Spade, Heart, Diamond, Club<br>// Ranks: 1 - 13<br> // Colors: black or red</p> <p><span>+card</span>(<span>Suit</span>, <span>Rank</span>, <span>Color</span>)</p></code> <h1>Browser Support?</h1> <p>Tested on the latest versions of <b>Chrome</b>, <b>Firefox</b>, <b>Safari</b>, <b>Internet Explorer</b>, &amp; <b>Opera</b>.</p> <p>Best viewed in Firefox incase Chrome hack doesn't work due to it's overflow and scaling bug.</p>
</div>
<!-- Portfolio--><a id="portfolio" href="http://andytran.me/" title="View my portfolio!"><i class="fa fa-link"></i></a>
<!-- CodePen--><a id="codepen" href="http://codepen.io/andytran/" title="Follow me!"><i class="fa fa-codepen"></i></a>
<!-- Scroll To Bottom--><a id="scrollToBottom" href="#tip" title="Check out the tutorial!"><i class="material-icons">&#xE313;</i></a> <script src="js/index.js"></script>
</body>
</html>

Material Playing Cards - Script Codes CSS Codes

/* Body */
body { background: #ebeff2; color: #666666; font-family: "RobotoDraft", "Roboto", sans-serif; font-size: 14px; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* Pen Title */
.pen-title { padding: 50px 0; text-align: center; letter-spacing: 2px;
}
.pen-title h1 { margin: 0 0 20px; font-size: 48px; font-weight: 300;
}
.pen-title h1 span { display: block; margin: 0 0 10px; color: #d64c4c; font-size: 18px; font-weight: 600; text-transform: uppercase;
}
.pen-title span { font-size: 12px;
}
.pen-title span .fa { color: #d64c4c;
}
.pen-title span a { color: #d64c4c; font-weight: 600; text-decoration: none;
}
/* Rerun Button */
.rerun { margin: 0 0 30px; text-align: center;
}
.rerun a { cursor: pointer; display: inline-block; background: #d64c4c; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); border-radius: 3px; padding: 10px 20px; color: #ffffff; text-decoration: none; -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.rerun a:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
/* Scroll To Bottom */
#scrollToBottom, #codepen, #portfolio { position: fixed; bottom: 30px; right: 30px; background: #d64c4c; width: 56px; height: 56px; border-radius: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -webkit-transition: 0.3s ease; transition: 0.3s ease; color: #ffffff; text-align: center;
}
#scrollToBottom:hover, #codepen:hover, #portfolio:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
#scrollToBottom i, #codepen i, #portfolio i { line-height: 56px;
}
/* CodePen */
#codepen { bottom: 96px; right: 36px; background: #363636; width: 44px; height: 44px; -webkit-animation: buttonFadeInUp 1s ease; animation: buttonFadeInUp 1s ease;
}
#codepen i { line-height: 44px;
}
/* Portfolio */
#portfolio { bottom: 150px; right: 43px; background: #d64c4c; width: 30px; height: 30px; -webkit-animation: buttonFadeInUp 1s ease; animation: buttonFadeInUp 1s ease;
}
#portfolio i { line-height: 30px;
}
/* Tip */
#tip { max-width: 600px; border-radius: 3px; margin: 0 auto 100px; line-height: 1.7em; text-align: center;
}
#tip h1 { margin: 0 0 10px; color: #333333; font-size: 24px; font-weight: 300;
}
#tip p { margin: 0 0 10px; color: #666666;
}
#tip p b { font-weight: 600;
}
#tip code { display: block; background: #232e34; margin: 0 0 100px; padding: 10px 20px; color: #CDD3DE; letter-spacing: 2px; text-align: left;
}
#tip code h1 { dsplay: block; background: #263238; margin: -10px -20px 20px; padding: 10px 20px; color: #CDD3DE; font-size: 18px;
}
#tip code h1:before { content: '\f121'; display: inline-block; margin: 0 10px 0 0; color: #546E7A; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-transform: translate(0, 0); transform: translate(0, 0);
}
#tip code p { color: inherit;
}
#tip code p:nth-child(2) { color: #C3E88D;
}
#tip code p span { color: #C38FE5;
}
#tip code p span:nth-child(2), #tip code p span:nth-child(3), #tip code p span:nth-child(4) { color: #FF5370; /* color: #C3E88D; */
}
/* Card */
.card { z-index: 1; position: relative; background: #ffffff; width: 360px; height: 480px; border-radius: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); font-size: 14px; font-weight: 400; line-height: 1; overflow-x: hidden; overflow-y: hidden;
}
.card .panel { position: absolute; width: 100%; background: #363636; padding: 30px; box-sizing: border-box; color: #ffffff;
}
.card .panel:last-child { bottom: 0;
}
.card .panel .rank { display: inline-block; font-size: 42px; font-weight: 100;
}
.card .panel .suit { display: inline-block; padding: 6px 0 0 0; font-size: 14px; font-weight: 600; text-transform: uppercase; float: right;
}
.card .panel .icon { background: #ffffff; width: 47px; height: 47px; margin: 15px 0 -54px -10px; padding: 13px; border-radius: 100%; line-height: 47px; text-align: center; box-sizing: border-box; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.card .panel .icon svg { display: block; height: 100%; margin: 0 auto;
}
.card .panel.bottom { -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.card .content { display: table; width: 100%; height: 480px; padding: 110px 20px; box-sizing: border-box; text-align: center;
}
.card .content div { display: table-cell; vertical-align: middle;
}
.card .content svg { margin: 10px;
}
.card .content svg:nth-child(6), .card .content svg:nth-child(7), .card .content svg:nth-child(8), .card .content svg:nth-child(9), .card .content svg:nth-child(10) { -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.card .content.one svg { -webkit-transform: scale(2); transform: scale(2);
}
.card .content.two svg:nth-child(2), .card .content.three svg:nth-child(2) { -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.card .content.four { padding: 0 100px;
}
.card .content.four svg:nth-child(3), .card .content.four svg:nth-child(4) { -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.card .content.five, .card .content.six { padding: 0 70px;
}
.card .content.five svg:nth-child(4), .card .content.five svg:nth-child(5), .card .content.six svg:nth-child(4), .card .content.six svg:nth-child(5) { -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.card .content.seven, .card .content.eight { padding: 0 60px;
}
.card .content.seven svg:nth-child(5), .card .content.eight svg:nth-child(5) { -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.card .content.jack, .card .content.queen, .card .content.king { padding: 0 100px;
}
.card .content.jack svg, .card .content.queen svg, .card .content.king svg { margin: 0;
}
.card .content.jack svg:nth-child(3), .card .content.queen svg:nth-child(3), .card .content.king svg:nth-child(3) { -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.card .content.jack span, .card .content.queen span, .card .content.king span { display: block; width: 100%; margin: 0 0 3px; text-align: center;
}
.card .content.jack span:before, .card .content.jack span:after, .card .content.queen span:before, .card .content.queen span:after, .card .content.king span:before, .card .content.king span:after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 100%; margin: 0 3px;
}
.card .content.jack span.red:before, .card .content.jack span.red:after, .card .content.queen span.red:before, .card .content.queen span.red:after, .card .content.king span.red:before, .card .content.king span.red:after { background: #ea474c;
}
.card .content.jack span.black:before, .card .content.jack span.black:after, .card .content.queen span.black:before, .card .content.queen span.black:after, .card .content.king span.black:before, .card .content.king span.black:after { background: #35424a;
}
/* Animation Level: 1 */
.card { position: relative; margin: 0 auto 100px; -webkit-animation: card 1s ease; animation: card 1s ease;
}
.card .panel { -webkit-animation: slideInTop 3s ease; animation: slideInTop 3s ease;
}
.card .panel:last-child { -webkit-animation: slideInBottom 3s ease; animation: slideInBottom 3s ease;
}
.card .panel .rank { -webkit-animation: fadeInBottom 4s ease; animation: fadeInBottom 4s ease;
}
.card .panel .suit { -webkit-animation: fadeInRight 4s ease; animation: fadeInRight 4s ease;
}
.card .panel .icon { -webkit-animation: scaleIn 3s ease; animation: scaleIn 3s ease;
}
.card .content { -webkit-animation: spinIn 3s ease; animation: spinIn 3s ease;
}
.card .ripple { position: absolute; top: 50%; left: 50%; background: #f7f7f7; width: 30px; height: 30px; border-radius: 100%; margin: -15px 0 0 -15px; -webkit-animation: ripple 1.5s ease; animation: ripple 1.5s ease; opacity: 0; -webkit-animation-delay: 1s; animation-delay: 1s;
}
.card .ripple:nth-child(2) { background: #ffffff; -webkit-animation-delay: 1.3s; animation-delay: 1.3s;
}
/* Keyframes */
@-webkit-keyframes card { 0% { -webkit-transform: translateY(200%) rotate(90deg); transform: translateY(200%) rotate(90deg); }
}
@keyframes card { 0% { -webkit-transform: translateY(200%) rotate(90deg); transform: translateY(200%) rotate(90deg); }
}
@-webkit-keyframes ripple { 0% { display: block; -webkit-transform: scale(0); transform: scale(0); opacity: 1; } 50% { opacity: 1; } 100% { -webkit-transform: scale(50); transform: scale(50); opacity: 0; }
}
@keyframes ripple { 0% { display: block; -webkit-transform: scale(0); transform: scale(0); opacity: 1; } 50% { opacity: 1; } 100% { -webkit-transform: scale(50); transform: scale(50); opacity: 0; }
}
@-webkit-keyframes spinIn { 0% { opacity: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } 66% { opacity: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } 90% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@keyframes spinIn { 0% { opacity: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } 66% { opacity: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } 90% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@-webkit-keyframes scaleIn { 0% { -webkit-transform: scale(0); transform: scale(0); } 75% { -webkit-transform: scale(0); transform: scale(0); }
}
@keyframes scaleIn { 0% { -webkit-transform: scale(0); transform: scale(0); } 75% { -webkit-transform: scale(0); transform: scale(0); }
}
@-webkit-keyframes slideInTop { 0% { top: -200px; opacity: 0; } 66% { top: -200px; opacity: 0; } 100% { top: 0; }
}
@keyframes slideInTop { 0% { top: -200px; opacity: 0; } 66% { top: -200px; opacity: 0; } 100% { top: 0; }
}
@-webkit-keyframes slideInBottom { 0% { bottom: -200px; opacity: 0; } 66% { bottom: -200px; opacity: 0; } 100% { bottom: 0; }
}
@keyframes slideInBottom { 0% { bottom: -200px; opacity: 0; } 66% { bottom: -200px; opacity: 0; } 100% { bottom: 0; }
}
@-webkit-keyframes fadeInBottom { 0% { -webkit-transform: translateY(120%); transform: translateY(120%); opacity: 0; } 60% { -webkit-transform: translateY(30%); transform: translateY(30%); opacity: 0; }
}
@keyframes fadeInBottom { 0% { -webkit-transform: translateY(120%); transform: translateY(120%); opacity: 0; } 60% { -webkit-transform: translateY(30%); transform: translateY(30%); opacity: 0; }
}
@-webkit-keyframes fadeInRight { 0% { -webkit-transform: translateX(120%); transform: translateX(120%); opacity: 0; } 60% { -webkit-transform: translateX(30%); transform: translateX(30%); opacity: 0; }
}
@keyframes fadeInRight { 0% { -webkit-transform: translateX(120%); transform: translateX(120%); opacity: 0; } 60% { -webkit-transform: translateX(30%); transform: translateX(30%); opacity: 0; }
}
@-webkit-keyframes buttonFadeInUp { 0% { bottom: 30px; opacity: 0; }
}
@keyframes buttonFadeInUp { 0% { bottom: 30px; opacity: 0; }
}

Material Playing Cards - Script Codes JS Codes

// Sorry JavaScript... But CSS wins this time. :(
Material Playing Cards - Script Codes
Material Playing Cards - Script Codes
Home Page Home
Developer Andy Tran
Username andytran
Uploaded June 12, 2022
Rating 4.5
Size 11,077 Kb
Views 54,648
Do you need developer help for Material Playing Cards?

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!

Andy Tran (andytran) Script Codes
Name
Flat Navigation
Draggable Chatbox
Progress Bar
Information Card Slider
Article News Card
Tabs Modal
Flat Login Form
Flat Pricing Table
Sign Up Form
Code Module - Slide In Banner
Create amazing love letters 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!