codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Pure CSS Flip French Playing Cards</title>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Marvel:700' rel='stylesheet' type='text/css'>
<style type="text/css">
/* --- MAIN --- */
body {
background: #000408;
text-align: center;
}
h1 {
position: relative;
font: bolder 22px/30px "Arial Black", Gadget, sans-serif;
color: #fff;
z-index: 1;
}
.table {
position: relative;
width: 1230px;
background: #082;
background: linear-gradient(#093, #082, #070);
margin: 0 auto;
padding: 18px 18px 30px;
display: table;
line-height: 0;
border-radius: 15px;
box-sizing: border-box;
box-shadow: 1px 1px 4px 1px rgba(255, 250, 255, .5) inset, -1px -1px 4px 1px #002 inset, 3px 3px 80px 15px #000;
}
.deck {
display: table-cell;
vertical-align: middle;
}
/* --- CARD SETTINGS --- */
.deck>input,
.deck>u,
.deck>b {
width: 84px;
height: 126px;
position: relative;
}
.deck>input {
margin: 0 5px 10px;
z-index: 999;
cursor: pointer;
opacity: 0;
}
.deck>u,
.deck>b {
left: -5px; /* Subtract margin value */
margin-left: -86px; /* Subtract width value */
display: inline-block;
text-align: center;
vertical-align: top;
border-radius: 8px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* --- FRONT CONTENT --- */
.deck>u{
background: #f8fff9;
text-decoration: none;
font-size: 16px;
}
.deck>u::before,
.deck>u::after {
position: absolute;
display: block;
font-family: Marvel, "Trebuchet MS", Helvetica, sans-serif;
}
.deck>u::before {
top: 10px;
left: 2px;
width: 20px;
font-size: 1.38em;
line-height: 1em;
}
.deck>u::after {
bottom: 14px;
right: 7px;
width: 63%;
height: 70%;
padding-top: 5%;
white-space: pre;
border: 1px solid;
border-radius: 4px;
overflow: hidden;
box-sizing: border-box;
}
/* --- COMMON RULES FOR CARD SUIT --- */
.deck>[class^=h],
.deck>[class^=d]{
color: #f21;
border-color: #f21;
}
.deck>[class^=c],
.deck>[class^=s]{
color:#123;
border-color: #123;
}
/* --- COMMON RULES FOR CARD VALUE --- */
.deck>[class$=A]::after{font-size:4em;line-height:1.2em}
.deck>[class$='2']::after,
.deck>[class$='3']::after,
.deck>[class$='4']::after,
.deck>[class$='5']::after,
.deck>[class$='6']::after,
.deck>[class$='7']::after{font-size: 1.6em;line-height:.6em}
.deck>[class$='8']::after,
.deck>[class$='9']::after,
.deck>[class$='0']::after{font-size: 1.6em;line-height:.2em}
.deck>[class$=J]::after,
.deck>[class$=Q]::after,
.deck>[class$=K]::after{font-size:3em;line-height:.8em}
/* Hearts */
.deck>.hA::before{content:'A \2665'}
.deck>.hA::after{content:'\2665';}
.deck>.h2::before{content:'2 \2665'}
.deck>.h2::after{content:'\2665\a\a\a\a\2665'}
.deck>.h3::before{content:'3 \2665'}
.deck>.h3::after{content:'\2665\a\a\2665\a\a\2665'}
.deck>.h4::before{content:'4 \2665'}
.deck>.h4::after{content:'\2665 \2665\a\a\a\a\2665 \2665'}
.deck>.h5::before{content:'5 \2665'}
.deck>.h5::after{content:'\2665 \2665\a\a\2665\a\a\2665 \2665'}
.deck>.h6::before{content:'6 \2665'}
.deck>.h6::after{content:'\2665 \2665\a\a\2665 \2665\a\a\2665 \2665'}
.deck>.h7::before{content:'7 \2665'}
.deck>.h7::after{content:'\2665 \2665\a\2665\a\2665 \2665\a\a\2665 \2665'}
.deck>.h8::before{content:'8 \2665'}
.deck>.h8::after{content:'\a\2665 \2665\a\a\a\a\2665 \2665\a\a\a\a\2665 \2665\a\a\a\a\2665 \2665'}
.deck>.h9::before{content:'9 \2665'}
.deck>.h9::after{content:'\a\2665 \2665\a\a\2665\a\a\2665 \2665\a\a\a\a\2665 \2665\a\a\a\a\2665 \2665'}
.deck>.h10::before{content:'10 \2665'}
.deck>.h10::after{content:'\a\2665 \2665\a\a\2665\a\a\2665 \2665\a\a\a\a\2665 \2665\a\a\2665\a\a\2665 \2665'}
.deck>.hJ::before{content:'J \2665'}
.deck>.hJ::after{content:'J\a\2665'}
.deck>.hQ::before{content:'Q \2665'}
.deck>.hQ::after{content:'Q\a\2665'}
.deck>.hK::before{content:'K \2665'}
.deck>.hK::after{content:'K\a\2665'}
/* Clubs */
.deck>.cA::before{content:'A \2663'}
.deck>.cA::after{content:'\2663'}
.deck>.c2::before{content:'2 \2663'}
.deck>.c2::after{content:'\2663\a\a\a\a\2663'}
.deck>.c3::before{content:'3 \2663'}
.deck>.c3::after{content:'\2663\a\a\2663\a\a\2663'}
.deck>.c4::before{content:'4 \2663'}
.deck>.c4::after{content:'\2663 \2663\a\a\a\a\2663 \2663'}
.deck>.c5::before{content:'5 \2663'}
.deck>.c5::after{content:'\2663 \2663\a\a\2663\a\a\2663 \2663'}
.deck>.c6::before{content:'6 \2663'}
.deck>.c6::after{content:'\2663 \2663\a\a\2663 \2663\a\a\2663 \2663'}
.deck>.c7::before{content:'7 \2663'}
.deck>.c7::after{content:'\2663 \2663\a\2663\a\2663 \2663\a\a\2663 \2663'}
.deck>.c8::before{content:'8 \2663'}
.deck>.c8::after{content:'\a\2663 \2663\a\a\a\a\2663 \2663\a\a\a\a\2663 \2663\a\a\a\a\2663 \2663'}
.deck>.c9::before{content:'9 \2663'}
.deck>.c9::after{content:'\a\2663 \2663\a\a\2663\a\a\2663 \2663\a\a\a\a\2663 \2663\a\a\a\a\2663 \2663'}
.deck>.c10::before{content:'10 \2663'}
.deck>.c10::after{content:'\a\2663 \2663\a\a\2663\a\a\2663 \2663\a\a\a\a\2663 \2663\a\a\2663\a\a\2663 \2663'}
.deck>.cJ::before{content:'J \2663'}
.deck>.cJ::after{content:'J\a\2663'}
.deck>.cQ::before{content:'Q \2663'}
.deck>.cQ::after{content:'Q\a\2663'}
.deck>.cK::before{content:'K \2663'}
.deck>.cK::after{content:'K\a\2663'}
/* Diamonds */
.deck>.dA::before{content:'A \2666'}
.deck>.dA::after{content:'\2666'}
.deck>.d2::before{content:'2 \2666'}
.deck>.d2::after{content:'\2666\a\a\a\a\2666'}
.deck>.d3::before{content:'3 \2666'}
.deck>.d3::after{content:'\2666\a\a\2666\a\a\2666'}
.deck>.d4::before{content:'4 \2666'}
.deck>.d4::after{content:'\2666 \2666\a\a\a\a\2666 \2666'}
.deck>.d5::before{content:'5 \2666'}
.deck>.d5::after{content:'\2666 \2666\a\a\2666\a\a\2666 \2666'}
.deck>.d6::before{content:'6 \2666'}
.deck>.d6::after{content:'\2666 \2666\a\a\2666 \2666\a\a\2666 \2666'}
.deck>.d7::before{content:'7 \2666'}
.deck>.d7::after{content:'\2666 \2666\a\2666\a\2666 \2666\a\a\2666 \2666'}
.deck>.d8::before{content:'8 \2666'}
.deck>.d8::after{content:'\a\2666 \2666\a\a\a\a\2666 \2666\a\a\a\a\2666 \2666\a\a\a\a\2666 \2666'}
.deck>.d9::before{content:'9 \2666'}
.deck>.d9::after{content:'\a\2666 \2666\a\a\2666\a\a\2666 \2666\a\a\a\a\2666 \2666\a\a\a\a\2666 \2666'}
.deck>.d10::before{content:'10 \2666'}
.deck>.d10::after{content:'\a\2666 \2666\a\a\2666\a\a\2666 \2666\a\a\a\a\2666 \2666\a\a\2666\a\a\2666 \2666'}
.deck>.dJ::before{content:'J \2666'}
.deck>.dJ::after{content:'J\a\2666'}
.deck>.dQ::before{content:'Q \2666'}
.deck>.dQ::after{content:'Q\a\2666'}
.deck>.dK::before{content:'K \2666'}
.deck>.dK::after{content:'K\a\2666'}
/* Spades */
.deck>.sA::before{content:'A \2660'}
.deck>.sA::after{content:'\2660'}
.deck>.s2::before{content:'2 \2660'}
.deck>.s2::after{content:'\2660\a\a\a\a\2660'}
.deck>.s3::before{content:'3 \2660'}
.deck>.s3::after{content:'\2660\a\a\2660\a\a\2660'}
.deck>.s4::before{content:'4 \2660'}
.deck>.s4::after{content:'\2660 \2660\a\a\a\a\2660 \2660'}
.deck>.s5::before{content:'5 \2660'}
.deck>.s5::after{content:'\2660 \2660\a\a\2660\a\a\2660 \2660'}
.deck>.s6::before{content:'6 \2660'}
.deck>.s6::after{content:'\2660 \2660\a\a\2660 \2660\a\a\2660 \2660'}
.deck>.s7::before{content:'7 \2660'}
.deck>.s7::after{content:'\2660 \2660\a\2660\a\2660 \2660\a\a\2660 \2660'}
.deck>.s8::before{content:'8 \2660'}
.deck>.s8::after{content:'\a\2660 \2660\a\a\a\a\2660 \2660\a\a\a\a\2660 \2660\a\a\a\a\2660 \2660'}
.deck>.s9::before{content:'9 \2660'}
.deck>.s9::after{content:'\a\2660 \2660\a\a\2660\a\a\2660 \2660\a\a\a\a\2660 \2660\a\a\a\a\2660 \2660'}
.deck>.s10::before{content:'10 \2660'}
.deck>.s10::after{content:'\a\2660 \2660\a\a\2660\a\a\2660 \2660\a\a\a\a\2660 \2660\a\a\2660\a\a\2660 \2660'}
.deck>.sJ::before{content:'J \2660'}
.deck>.sJ::after{content:'J\a\2660'}
.deck>.sQ::before{content:'Q \2660'}
.deck>.sQ::after{content:'Q\a\2660'}
.deck>.sK::before{content:'K \2660'}
.deck>.sK::after{content:'K\a\2660'}
/* --- BACK CONTENT --- */
.deck>b {
background: #ebe119;
background: linear-gradient(#ebe119, #dabb1e);
border: 5px solid #f8fff9;
box-sizing: border-box;
}
.deck>b::before,
.deck>b::after {
content: '';
display: block;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
background: url('http://forum.html.it/forum/images/statusicon/forum_new-48.png') center/36px repeat;
border-radius: inherit;
opacity: .2;
}
.deck>b::after {
background-position: calc(50% + 18px) calc(50% + 18px);
}
/* --- ANIMATION AND 3D SETTINGS --- */
.deck {
perspective: 1450px;
}
.deck>u,
.deck>b {
transition: all .8s;
backface-visibility: hidden;
transform-style: preserve-3d;
z-index: 0;
}
.deck>input:checked + u,
.deck>input:checked + u + b {
z-index: 100;
}
.deck>input:focus + u,
.deck>input:focus + u + b {
transition-property: transform, filter, box-shadow; /* Exclude z-index to immediately overlay */
outline: 0;
z-index: 900;
}
/* --- FRONT ANIMATION --- */
.deck>u {
transform: translateX(160%) rotateY(-180deg);
transform-origin: -30% center;
box-shadow: 130px 30px 40px -20px rgba(0, 0, 0, 0);
filter: brightness(3);
}
.deck>input:checked + u {
transform: translateX(0%) rotateY(0deg);
box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
filter: brightness(1);
}
/* --- BACK ANIMATION --- */
.deck>b {
transform: translateX(0%) rotateY(0deg);
transform-origin: 130% center;
box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
filter: brightness(1);
}
.deck>input:checked + u + b {
transform: translateX(-160%) rotateY(180deg);
box-shadow: 80px 10px 20px -40px rgba(0, 0, 0, 0);
filter: brightness(0);
}
/* Edge hack - Prevent click during transition, otherwise the animation breaks */
@supports (-ms-ime-align:auto) {
.deck>input {
animation: step-end .8s; // Time is the same as the main transition
}
.deck>u,
.deck>b {
cursor: pointer;
}
.deck>input:checked {
animation-name: noclick1;
}
.deck>input:not(:checked) {
animation-name: noclick2;
}
@keyframes noclick1 {
0% { visibility: hidden; }
100% { visibility: visible; }
}
@keyframes noclick2 {
0% { visibility: hidden; }
100% { visibility: visible; }
}
}
</style>
</head>
Rispondi quotando
