CodePen Embed - Pure CSS Playing Card No.1

Live

This Pen is owned by Ben Evans on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"ExaKmjw\",\"auto_save\":true},\"hashid\":\"ExaKmjw\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[\"purecss\",\"cssart\",\"cssonly\"],\"id\":41736039,\"user_id\":2262345,\"html\":\"    <screen>\\n        <hoverspace></hoverspace>\\n        <shadow></shadow>\\n        <card>\\n            <back></back>\\n            <front>\\n                \\n                <x>\\n                    <x></x>\\n                    <x>\\n                        <x> <x></x> </x>\\n                        \\n                        <x>\\n                            \\n                            <x> <x></x> <x></x> </x>\\n                            \\n                            <x> <x></x> </x>\\n                            <x></x>\\n                        </x>\\n                        <x></x> <x></x> <x></x> <x></x>\\n                        <x> <x></x> <x></x> <x></x> <x></x> <x></x> <x></x> <x></x> <x></x> </x>\\n                        <x></x> <x></x> <x></x> <x></x> <x></x> <x></x>\\n                    </x>\\n                </x>\\n                \\n                <x>\\n                    <x></x>\\n                    <x>\\n                        <x> <x></x> </x>\\n                        \\n                        <x>\\n                            \\n                            <x> <x></x> <x></x> </x>\\n                            \\n                            <x> <x></x> </x> <x></x>\\n                        </x>\\n                        <x></x> <x></x> <x></x> <x></x>\\n                        <x> <x></x> <x></x> <x></x> <x></x> <x></x> <x></x> <x></x> <x></x> </x>\\n                        <x></x> <x></x> <x></x> <x></x> <x></x> <x></x>\\n                    </x>\\n                </x>\\n            </front>\\n        </card>\\n    </screen>\",\"css\":\"$body: #190d23;\\n$none: rgba(#fff, 0);\\n$card: #f5e3e3;\\n$blue: #302e9b;\\n$red: #b32b28;\\n$yellow: #bdb725;\\n\\nhtml {\\n  font-size: 1vmin;\\n  background: radial-gradient(#bd243f, $body);\\n}\\n\\n@media (min-width: 500px) {\\n  html {\\n    font-size: 5px;\\n  }\\n}\\n\\nbody {\\n  color: $body;\\n  font-size: 12rem;\\n  padding: 1rem;\\n  font-family: \\\"Courier New\\\";\\n  overflow: hidden;\\n}\\n\\nscreen {\\n  &,\\n  *,\\n  *:before,\\n  *:after {\\n    box-sizing: border-box;\\n    content: \\\"\\\";\\n    display: block;\\n    transform-style: preserve-3d;\\n    position: relative;\\n    perspective: 200rem;\\n  }\\n}\\n\\ncard {\\n  margin: auto;\\n  height: 96rem;\\n  width: 64.5rem;\\n  background: #fff;\\n  border-radius: 5rem;\\n  transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0) rotate(1deg);\\n  position: relative;\\n  animation: rotate 3s linear;\\n\\n  & *,\\n  & *:before,\\n  & *:after,\\n  &:before,\\n  &:after {\\n    position: absolute;\\n    left: 0;\\n    top: 0;\\n  }\\n\\n  &:before,\\n  &:after {\\n    width: 100%;\\n    height: 100%;\\n    transform: translate3d(0, 0, -0.2rem) rotateY(180deg);\\n    border-radius: 5rem;\\n    animation: light 3s linear;\\n    box-shadow: inset 0 0 1rem rgba($body, 0.5);\\n    background-image: linear-gradient(\\n      to right bottom,\\n      rgba($body, 0.2),\\n      $none,\\n      rgba(#fff, 0.1),\\n      $none,\\n      rgba($body, 0.3)\\n    );\\n  }\\n\\n  &:after {\\n    transform: translate3d(0, 0, 0.2rem) rotateY(0deg);\\n    animation: light 3s linear reverse;\\n  }\\n}\\n\\nback {\\n  box-shadow: 0 0 0 1rem $blue, inset 0 0 0 1rem $blue, inset 0 0 0 2rem $card;\\n  border-radius: 1rem;\\n  height: 93%;\\n  width: 90%;\\n  border: 2rem solid $none;\\n  background-position: 0.9rem 0.99rem;\\n  background-image: repeating-linear-gradient(\\n      45deg,\\n      $none,\\n      $none 0.99rem,\\n      $blue 0.99rem,\\n      $blue 1.98rem\\n    ),\\n    repeating-linear-gradient(\\n      -45deg,\\n      $none,\\n      $none 0.99rem,\\n      $blue 0.99rem,\\n      $blue 1.98rem\\n    );\\n  transform: translate3d(0, 0, -0.1rem) rotateY(180deg);\\n  bottom: 0;\\n  right: 0;\\n  margin: auto;\\n}\\n\\nshadow {\\n  margin: auto;\\n  height: 100rem;\\n  width: 70rem;\\n  background: radial-gradient($body, $none);\\n  background: $body;\\n  border-radius: 10rem;\\n  position: relative;\\n  animation: shadow 3s linear;\\n  position: absolute;\\n  left: 0;\\n  right: 0;\\n  top: 0;\\n  transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(0deg) skewY(0)\\n    scale(1);\\n  opacity: 0.2;\\n  box-shadow: 0 0 2vmin $body, 0 0 5vmin $body;\\n}\\n\\nhoverspace {\\n  height: 100%;\\n  width: 50rem;\\n  position: absolute;\\n  transform: translate3d(0, 0, 50rem);\\n  top: 0;\\n  left: 0;\\n  right: 0;\\n  margin: auto;\\n  cursor: grab;\\n\\n  &:hover ~ card {\\n    animation: rotatehover 3s linear;\\n\\n    &:before,\\n    &:after {\\n      animation: lighthover 3s linear;\\n    }\\n\\n    &:after {\\n      animation: lighthover 3s linear reverse;\\n    }\\n  }\\n\\n  &:hover ~ shadow {\\n    animation: shadowhover 3s linear;\\n  }\\n}\\n\\n@keyframes rotate {\\n  100% {\\n    transform: translate3d(0, 0, 0) rotate3d(1, 1, 0, -360deg) rotate(1deg);\\n  }\\n}\\n\\n@keyframes rotatehover {\\n  100% {\\n    transform: translate3d(0, 0, 0) rotate3d(1, 1, 0, -360deg) rotate(1deg);\\n  }\\n}\\n\\n@keyframes light {\\n  0%,\\n  100%,\\n  50% {\\n    background-color: $none;\\n  }\\n\\n  25% {\\n    background-color: rgba($card, 0.7);\\n  }\\n\\n  75% {\\n    background-color: $body;\\n  }\\n}\\n\\n@keyframes lighthover {\\n  0%,\\n  100%,\\n  50% {\\n    background-color: $none;\\n  }\\n\\n  25% {\\n    background-color: rgba($card, 0.7);\\n  }\\n\\n  75% {\\n    background-color: $body;\\n  }\\n}\\n\\n@keyframes shadow {\\n  25% {\\n    transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(90deg)\\n      skewY(-90deg);\\n    opacity: 0;\\n  }\\n\\n  50% {\\n    transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(90deg)\\n      skewY(0);\\n    opacity: 0.2;\\n  }\\n\\n  75% {\\n    transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(90deg)\\n      skewY(90deg);\\n    opacity: 0;\\n  }\\n\\n  100% {\\n    transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(180deg)\\n      skewY(0);\\n    opacity: 0.2;\\n  }\\n}\\n\\n@keyframes shadowhover {\\n  25% {\\n    transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(90deg)\\n      skewY(-90deg);\\n    opacity: 0;\\n  }\\n\\n  50% {\\n    transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(90deg)\\n      skewY(0);\\n    opacity: 0.2;\\n  }\\n\\n  75% {\\n    transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(90deg)\\n      skewY(90deg);\\n    opacity: 0;\\n  }\\n\\n  100% {\\n    transform: translate3d(0, 90rem, -50rem) rotateX(90deg) rotate(180deg)\\n      skewY(0);\\n    opacity: 0.2;\\n  }\\n}\\n\\n//king\\nfront {\\n  transform: translate3d(0, 0, 0.1rem) rotateY(0deg);\\n  height: 100%;\\n  width: 100%;\\n\\n  //number\\n  & > * {\\n    width: 100%;\\n    height: 100%;\\n    position: absolute;\\n    top: 0;\\n    left: 0;\\n\\n    & > *:nth-of-type(1) {\\n      transform: translate3d(2rem, 13rem, 0) scaleX(0.7);\\n      height: 4rem;\\n      width: 4rem;\\n      background: $red;\\n      border-radius: 50%;\\n      box-shadow: 3.25rem 0 0 $red;\\n\\n      &:before {\\n        transform: translate3d(1.7rem, 1.7rem, 0) rotate(45deg);\\n        background: $red;\\n        width: 4rem;\\n        height: 4rem;\\n      }\\n\\n      &:after {\\n        content: \\\"K\\\";\\n        color: $red;\\n        transform: translate3d(0, -12rem, 0);\\n      }\\n    }\\n    //picture\\n    & > *:nth-of-type(2) {\\n      border: 0.5rem solid $blue;\\n      width: 68%;\\n      height: 79.5%;\\n      bottom: 0;\\n      right: 0;\\n      margin: auto;\\n      border-radius: 0.5rem;\\n      overflow: hidden;\\n      //crown\\n      & > *:nth-of-type(6) {\\n        background: $yellow;\\n        box-shadow: inset 0 0 0 0.1rem #fff, inset 0 0 0 0.6rem $blue;\\n        width: 30rem;\\n        height: 30rem;\\n        transform: translate3d(7rem, -23rem, 0) rotate(37deg) skewY(20deg);\\n        overflow: hidden;\\n\\n        &:after {\\n          background: #fff;\\n          width: 40rem;\\n          height: 10rem;\\n          border-radius: 50%;\\n          transform: translate3d(4rem, 25.5rem, 0) rotate(-50deg);\\n          box-shadow: 0 0 0 1.5rem $body;\\n        }\\n\\n        &:before {\\n          width: 1.5rem;\\n          height: 1.5rem;\\n          transform: translate3d(16.5rem, 26.5rem, 0) rotate(-1deg);\\n          background: $body;\\n          box-shadow: 0 0 0 1.5rem $yellow, 0 0 0 2rem $body, 5rem -5rem 0 $body,\\n            5rem -5rem 0 1.5rem $yellow, 5rem -5rem 0 2rem $body,\\n            10rem -10rem 0 $body, 10rem -10rem 0 1.5rem $yellow,\\n            10rem -10rem 0 2rem $body;\\n        }\\n      }\\n      //heart\\n      & > *:nth-of-type(8) {\\n        transform: translate3d(0.5rem, 2.5rem, 0) scaleX(0.7);\\n        height: 8rem;\\n        width: 8rem;\\n        background: $red;\\n        border-radius: 50%;\\n        box-shadow: 6.5rem 0 0 $red;\\n\\n        &:before {\\n          transform: translate3d(3.25rem, 3.25rem, 0) rotate(45deg);\\n          background: $red;\\n          width: 8rem;\\n          height: 8rem;\\n        }\\n      }\\n      //face\\n      & > *:nth-of-type(7) {\\n        width: 40rem;\\n        height: 20rem;\\n        transform: translate3d(-0.5rem, 6.5rem, 0);\\n        border-radius: 50%;\\n        overflow: hidden;\\n\\n        &:after {\\n          width: 5rem;\\n          height: 14rem;\\n          border-radius: 3rem;\\n          transform: translate3d(21.5rem, -1rem, 0) rotate(-20deg) skewY(-10deg);\\n          box-shadow: 0.4rem 0.4rem 0 $blue, 1rem 0.8rem 0 #fff,\\n            1.4rem 1.2rem 0 $blue, 2rem 1.6rem 0 #fff, 2.4rem 2rem 0 $blue,\\n            3rem 2.4rem 0 #fff, 3.4rem 2.8rem 0 $blue, 4rem 3.2rem 0 #fff,\\n            4.4rem 3.6rem 0 $blue;\\n        }\\n        //spiral\\n        &:before {\\n          width: 1rem;\\n          height: 1rem;\\n          background: #fff;\\n          transform: translate3d(13.35rem, 7.85rem, 0);\\n          border-radius: 50%;\\n          box-shadow: 0.4rem 0 0 $blue, 0.4rem 0.4rem 0 0.3rem #fff,\\n            0.1rem 0.4rem 0 0.6rem $blue;\\n        }\\n        //hair\\n        & > *:nth-of-type(1) {\\n          width: 3rem;\\n          height: 14rem;\\n          border-radius: 2rem;\\n          transform: translate3d(15rem, -4rem, 0) rotate(25deg);\\n          box-shadow: 0.4rem 0.4rem 0 $blue, 1rem 0.8rem 0 #fff,\\n            1.4rem 1.2rem 0 $blue, 2rem 1.6rem 0 #fff, 2.4rem 2rem 0 $blue,\\n            3rem 2.4rem 0 #fff, 3.4rem 2.8rem 0 $blue, 4rem 2.3rem 0 #fff,\\n            4.4rem 2.6rem 0 $blue, 5rem 2rem 0 #fff, 5.4rem 2.1rem 0 $blue;\\n          //face shape\\n          &:after {\\n            background: #fff;\\n            width: 10.8rem;\\n            height: 12rem;\\n            border-radius: 5rem 0 60% 2rem / 1.25rem 0 60% 5rem;\\n            transform: translate3d(1.5rem, 1rem, 0) rotate(-29deg);\\n            box-shadow: -0.4rem -0.3rem 0 $blue;\\n          }\\n          //big beardy bit\\n          &:before {\\n            width: 7rem;\\n            height: 10rem;\\n            border-radius: 2.5rem;\\n            transform: translate3d(6.5rem, 4rem, 0) rotate(-55deg);\\n            border: 0.4rem solid #fff;\\n            box-shadow: 0 0 0 0.4rem $blue, inset 0 0 0 0.4rem $blue,\\n              inset 0.5rem 0 0 0.4rem #fff, inset 0.9rem 0 0 0.4rem $blue,\\n              inset 1.4rem 0.2rem 0 0.4rem #fff,\\n              inset 1.8rem 0.2rem 0 0.4rem $blue,\\n              inset 2.3rem 0.4rem 0 0.4rem #fff,\\n              inset 2.7rem 0.4rem 0 0.4rem $blue,\\n              inset 3.2rem 0.8rem 0 0.4rem #fff,\\n              inset 3.6rem 0.8rem 0 0.4rem $blue, inset -0.5rem 0 0 0.4rem #fff,\\n              inset -0.9rem 0 0 0.4rem $blue, inset -1.4rem 0.2rem 0 0.4rem #fff,\\n              inset -1.8rem 0.2rem 0 0.4rem $blue,\\n              inset -2.3rem 0.4rem 0 0.4rem #fff,\\n              inset -2.7rem 0.4rem 0 0.4rem $blue;\\n          }\\n        }\\n        //more curls\\n        & > *:nth-of-type(2) {\\n          width: 1.5rem;\\n          height: 1.5rem;\\n          background: #fff;\\n          transform: translate3d(25rem, 10.65rem, 0);\\n          border-radius: 50%;\\n          box-shadow: 0.4rem 0 0 $blue, 0.4rem 0.4rem 0 0.4rem #fff,\\n            0.1rem 0.4rem 0 0.6rem $blue;\\n\\n          &:after {\\n            width: 1rem;\\n            height: 1rem;\\n            background: #fff;\\n            transform: translate3d(-1.5rem, 1.2rem, 0) rotate(-70deg);\\n            border-radius: 50%;\\n            box-shadow: -0.4rem 0 0 $blue, -0.4rem 0.4rem 0 0.4rem #fff,\\n              -0.1rem 0.4rem 0 0.6rem $blue;\\n          }\\n\\n          &:before {\\n            width: 0.75rem;\\n            height: 0.75rem;\\n            background: #fff;\\n            transform: translate3d(-11.25rem, -7rem, 0) rotate(-50deg);\\n            border-radius: 50%;\\n            box-shadow: 0.4rem 0 0 $blue, 0.4rem 0.4rem 0 0.3rem #fff,\\n              0.1rem 0.4rem 0 0.6rem $blue;\\n          }\\n        }\\n        //face\\n        //eyebrows\\n        & > *:nth-of-type(4) {\\n          width: 3rem;\\n          height: 1rem;\\n          border-radius: 50%;\\n          border-top: 0.4rem solid $blue;\\n          transform: translate3d(21rem, 1rem, 0);\\n          box-shadow: -5rem 0.4rem 0 #fff, -5.5rem 0 0 $blue;\\n          //none\\n          &:after {\\n            width: 0.3rem;\\n            height: 2rem;\\n            background: $blue;\\n            transform: translate3d(-2.65rem, 0, 0) rotate(-15deg);\\n          }\\n\\n          &:before {\\n            width: 2.5rem;\\n            height: 5rem;\\n            border-radius: 2rem;\\n            transform: translate3d(-2.5rem, 1.25rem, 0) rotate(15deg)\\n              skewY(-10deg);\\n            box-shadow: -0.2rem 0.3rem 0 $blue;\\n            background: #fff;\\n          }\\n        }\\n        //eye1\\n        & > *:nth-of-type(5) {\\n          width: 0.6rem;\\n          height: 0.6rem;\\n          background: $blue;\\n          border-radius: 50%;\\n          box-shadow: 0 0 0 0.5rem #fff, 0 0 0 0.8rem $blue;\\n          transform: translate3d(21.5rem, 3rem, 0) rotate(5deg);\\n\\n          &:before {\\n            width: 3.5rem;\\n            height: 3rem;\\n            border-radius: 50%;\\n            border-top: 0.4rem solid $blue;\\n            transform: translate3d(-1rem, -0.4rem, 0);\\n            box-shadow: 0 -0.8rem 0 -0.4rem #fff;\\n          }\\n\\n          &:after {\\n            width: 1.5rem;\\n            height: 0.75rem;\\n            border-radius: 50%;\\n            box-shadow: -0.2rem 0.2rem 0 0 $blue;\\n            transform: translate3d(-0.75rem, 1rem, 0) rotate(20deg);\\n          }\\n        }\\n        //eye2\\n        & > *:nth-of-type(6) {\\n          width: 0.6rem;\\n          height: 0.6rem;\\n          background: $blue;\\n          border-radius: 50%;\\n          box-shadow: 0 0 0 0.5rem #fff, 0 0 0 0.8rem $blue;\\n          transform: translate3d(16.6rem, 2.75rem, 0) rotate(5deg);\\n\\n          &:before {\\n            width: 3.5rem;\\n            height: 3rem;\\n            border-radius: 50%;\\n            border-top: 0.4rem solid $blue;\\n            transform: translate3d(-1rem, -0.4rem, 0);\\n            box-shadow: 0 -0.8rem 0 -0.4rem #fff;\\n          }\\n\\n          &:after {\\n            width: 1rem;\\n            height: 0.75rem;\\n            border-radius: 50%;\\n            box-shadow: 0 0.2rem 0 0 $blue;\\n            transform: translate3d(-0.75rem, 1rem, 0) rotate(30deg);\\n          }\\n        }\\n        //nose\\n        & > *:nth-of-type(3) {\\n          width: 2rem;\\n          height: 1.25rem;\\n          background: #fff;\\n          border-radius: 50%;\\n          box-shadow: 0.3rem 0 0 0 $blue;\\n          transform: translate3d(18.75rem, 6rem, 0) rotate(45deg);\\n\\n          &:before {\\n            width: 4rem;\\n            height: 4rem;\\n            transform: translate3d(0.25rem, 0.25rem, 0);\\n            box-shadow: -0.2rem -0.2rem 0 $blue;\\n            border-radius: 1rem;\\n          }\\n          //chin\\n          &:after {\\n            width: 1rem;\\n            height: 1rem;\\n            box-shadow: 0 -0.4rem 0 $blue;\\n            transform: translate3d(3.25rem, 3.25rem, 0) rotate(-45deg);\\n            border-radius: 50%;\\n          }\\n        }\\n        //mouth\\n        & > *:nth-of-type(7) {\\n          width: 0.6rem;\\n          height: 0.6rem;\\n          background: $blue;\\n          border-radius: 50%;\\n          box-shadow: 1rem 0 0 0 $blue, 0.5rem 0.3rem 0 0 $blue;\\n          transform: translate3d(18.75rem, 8.5rem, 0);\\n\\n          &:after {\\n            width: 3.2rem;\\n            height: 0.5rem;\\n            box-shadow: 0 -0.2rem 0 $blue;\\n            transform: translate3d(-0.7rem, 0.4rem, 0);\\n            border-radius: 50%;\\n          }\\n        }\\n      }\\n      //hand\\n      & > *:nth-of-type(5) {\\n        transform: translate3d(36rem, 5rem, 0);\\n        border: 0.3rem solid $blue;\\n        width: 2rem;\\n        height: 3.85rem;\\n        border-radius: 1rem;\\n        background: #fff;\\n        box-shadow: 0.75rem 0.3rem 0 -0.3rem #fff, 0.75rem 0.3rem 0 $blue,\\n          1.75rem 0.5rem 0 -0.5rem #fff, 1.75rem 0.5rem 0 -0.2rem $blue,\\n          2.65rem 0.6rem 0 -0.8rem #fff, 2.65rem 0.6rem 0 -0.4rem $blue;\\n\\n        &:before {\\n          transform: translate3d(-1rem, -0.75rem, 0);\\n          border: 0.5rem solid $blue;\\n          border-bottom: none;\\n          width: 1.65rem;\\n          height: 4rem;\\n          border-radius: 1rem 1rem 0 0;\\n          background: #fff;\\n        }\\n\\n        &:after {\\n          transform: translate3d(0, 3.5rem, 0);\\n          width: 2rem;\\n          height: 2rem;\\n          border-radius: 0 100% 0 0;\\n          box-shadow: 0.3rem -0.3rem 0 $blue;\\n        }\\n      }\\n      //sword handle\\n      & > *:nth-of-type(4) {\\n        transform: translate3d(35.25rem, 6.5rem, 0);\\n        border: 0.5rem solid $blue;\\n        width: 4.75rem;\\n        height: 5.5rem;\\n        border-radius: 50%;\\n        background: #fff;\\n\\n        &:before {\\n          transform: translate3d(4rem, -0.1rem, 0);\\n          width: 2rem;\\n          height: 2rem;\\n          border-radius: 100%;\\n          box-shadow: 0 0 0 0.5rem $blue, inset 0 -0.25rem 0 0.5rem $yellow,\\n            inset 0 -0.5rem 0 1rem $blue;\\n          background: $yellow;\\n        }\\n\\n        &:after {\\n          transform: translate3d(-1.5rem, -3rem, 0);\\n          width: 1rem;\\n          height: 7rem;\\n          border-radius: 0.5rem;\\n          box-shadow: 0 0 0 0.5rem $blue;\\n          background: $yellow;\\n        }\\n      }\\n      //sword blade\\n      & > *:nth-of-type(3) {\\n        transform: translate3d(31.25rem, 6rem, 0);\\n        border: 0.5rem solid $blue;\\n        width: 3rem;\\n        height: 3rem;\\n        box-shadow: inset 0 0 0 0.5rem #fff, inset 0 0 0 1rem $blue,\\n          -3rem 0 0 0 $blue;\\n\\n        &:before {\\n          transform: translate3d(4rem, 5rem, 0);\\n          width: 3.5rem;\\n          height: 1.5rem;\\n          border-radius: 50%;\\n          box-shadow: 0 0 0 0.5rem $blue;\\n          background: $yellow;\\n        }\\n\\n        &:after {\\n        }\\n      }\\n      //arm\\n      & > *:nth-of-type(1) {\\n        transform: translate3d(30rem, 13rem, 0);\\n        height: 20rem;\\n        width: 20rem;\\n        background: $yellow;\\n\\n        &:before {\\n          border-radius: 50%;\\n          background: #fff;\\n          width: 10rem;\\n          height: 30rem;\\n          box-shadow: -0.4rem 0.4rem 0 0 $blue, -12.5rem -1rem 0 0rem #fff,\\n            -12rem -1rem 0 0rem $blue;\\n          transform: translate3d(9rem, -22rem, 0);\\n        }\\n\\n        &:after {\\n          background: #fff;\\n          width: 30rem;\\n          height: 20rem;\\n          transform: translate3d(0rem, -20rem, 0);\\n        }\\n\\n        & > *:nth-of-type(1) {\\n          background: $red;\\n          border: 0.5rem solid $blue;\\n          transform: translate3d(5rem, 9rem, 0) rotate(-40deg) skewY(-30deg);\\n          width: 10rem;\\n          height: 10rem;\\n          box-shadow: 0 0 0 1rem $yellow, 0 0 0 1.5rem $blue;\\n          z-index: -1;\\n          border-radius: 50% 0;\\n\\n          &:before {\\n            background: $red;\\n            border: 0.5rem solid $blue;\\n            transform: translate3d(-4rem, -5.5rem, 0) rotate(20deg) skewY(0deg);\\n            width: 10rem;\\n            height: 10rem;\\n            box-shadow: 0 0 0 1rem $yellow, 0 0 0 1.5rem $blue;\\n            border-radius: 50% 0;\\n          }\\n\\n          &:after {\\n            background: $blue;\\n            transform: translate3d(11.75rem, -11.75rem, 0) rotate(15deg)\\n              skewY(0deg);\\n            width: 10rem;\\n            height: 10rem;\\n            box-shadow: 0 0 0 0.5rem $yellow, 0 0 0 1rem $blue;\\n            border-radius: 50% 0;\\n          }\\n        }\\n      }\\n      //body\\n      & > *:nth-of-type(2) {\\n        border: 0.5rem solid $blue;\\n        transform: translate3d(-6.5rem, 16rem, 0);\\n        width: 56rem;\\n        height: 43rem;\\n        border-radius: 50% 48%;\\n        box-shadow: inset 0 0 0 1rem $yellow, inset 0 0 0 4.5rem $blue,\\n          inset 0 0 0 5rem $yellow, inset 0 0 0 5.5rem $blue;\\n        background: linear-gradient($red, $red 50%, #fff 50%, #fff);\\n        background-size: 100% 1rem;\\n        overflow: hidden;\\n\\n        &:before {\\n          width: 2rem;\\n          height: 2rem;\\n          background: #bdb725;\\n          transform: translate3d(45.75rem, 31.4rem, 0);\\n          box-shadow: -2.5rem 2rem 0 0 $yellow, -5.5rem 4rem 0 0 $yellow;\\n        }\\n\\n        &:after {\\n          width: 2rem;\\n          height: 2rem;\\n          background: $body;\\n          transform: translate3d(45.7rem, 31.3rem, 0) rotate(-45deg);\\n          box-shadow: inset 0 0 0 0.55rem $yellow,\\n            -3.25rem -0.25rem 0 -0.55rem $body, -3.25rem -0.25rem 0 0 $yellow,\\n            -6.75rem -1rem 0 -0.55rem $body, -6.75rem -1rem 0 0 $yellow;\\n        }\\n\\n        & > *:nth-of-type(2) {\\n          width: 50rem;\\n          height: 60rem;\\n          border: 5rem solid #fff;\\n          border-left-width: 3rem;\\n          transform: translate3d(30rem, -9rem, 0);\\n          box-shadow: inset 0 0 0 0.5rem $blue, 0 0 0 0.5rem $blue;\\n          border-radius: 50%;\\n          overflow: hidden;\\n\\n          &:before {\\n            width: 40rem;\\n            height: 31rem;\\n            background: $red;\\n            box-shadow: inset 5rem 14rem 0 0 $blue, inset 0 14.9rem 0 0 $yellow,\\n              inset 0 15.3rem 0 0 $blue;\\n            transform: translate3d(0, 0, 0);\\n          }\\n\\n          &:after {\\n            width: 2rem;\\n            background: $yellow;\\n            height: 30rem;\\n            transform: translate3d(10.5rem, 0rem, 0);\\n            border: solid 0.5rem $blue;\\n          }\\n\\n          & > *:nth-of-type(1) {\\n            width: 24rem;\\n            height: 24rem;\\n            border: 1rem solid $body;\\n            transform: translate3d(-15rem, 6rem, 0);\\n            border-radius: 50%;\\n            box-shadow: inset 0 0 0 1rem $yellow, inset 0 0 0 1.5rem $body,\\n              inset 0 0 0 3.5rem #fff, inset 0 0 0 4rem $body,\\n              inset 0 0 0 4.5rem $yellow, inset 0 0 0 5rem $body;\\n            background: linear-gradient($red, $red 50%, #fff 50%, #fff);\\n            background-size: 100% 1rem;\\n\\n            &:before {\\n              width: 18rem;\\n              height: 18rem;\\n              border: 1rem dotted $red;\\n              bottom: 0;\\n              right: 0;\\n              margin: auto;\\n              border-radius: 50%;\\n            }\\n\\n            &:after {\\n              width: 5rem;\\n              height: 5rem;\\n              transform: translate3d(29rem, 5rem, 0) rotate(45deg);\\n              background: $red;\\n              box-shadow: 0 0 0 0.4rem $blue, 0 0 0 0.9rem $yellow,\\n                0 0 0 1.1rem $blue, 0 0 0 1.6rem $yellow, 0 0 0 2rem $blue,\\n                4rem 4rem 0 0 $red, 4rem 4rem 0 0.4rem $blue,\\n                4rem 4rem 0 0.9rem $yellow, 4rem 4rem 0 1.1rem $blue,\\n                4rem 4rem 0 1.6rem $yellow, 4rem 4rem 0 2rem $blue,\\n                8rem 8rem 0 0 $red, 8rem 8rem 0 0.4rem $blue,\\n                8rem 8rem 0 0.9rem $yellow, 8rem 8rem 0 1.1rem $blue,\\n                8rem 8rem 0 1.6rem $yellow, 8rem 8rem 0 2rem $blue,\\n                -4rem -4rem 0 0 $red, -4rem -4rem 0 0.4rem $blue,\\n                -4rem -4rem 0 0.9rem $yellow, -4rem -4rem 0 1.1rem $blue,\\n                -4rem -4rem 0 1.6rem $yellow, -4rem -4rem 0 2rem $blue;\\n            }\\n          }\\n        }\\n        //inner shirt\\n        & > *:nth-of-type(1) {\\n          width: 16rem;\\n          height: 53rem;\\n          transform: translate3d(20rem, 0rem, 0);\\n          overflow: hidden;\\n\\n          &:before {\\n            height: 20rem;\\n            width: 35rem;\\n            background: $red;\\n            transform: translate3d(-10rem, -10rem, 0) rotate(-45deg);\\n          }\\n\\n          &:after {\\n            height: 5rem;\\n            width: 30rem;\\n            background: #fff;\\n            transform: translate3d(-10rem, 10rem, 0) rotate(-45deg);\\n            border: 0.5rem solid #fff;\\n            box-shadow: inset 0 0 0 0.4rem $blue, 0 0 0 0.4rem $blue;\\n            background: #fff;\\n            background-image: radial-gradient(\\n                $red 25%,\\n                $yellow 35%,\\n                $body 45%,\\n                transparent 0\\n              ),\\n              radial-gradient($red 25%, $yellow 35%, $body 45%, transparent 0);\\n            background-size: 6rem 6rem;\\n            background-position: 0 0, 3rem 3rem;\\n          }\\n\\n          & > *:nth-of-type(1) {\\n            transform: translate3d(0rem, 18rem, 0);\\n            background: $blue;\\n            height: 5rem;\\n            width: 20rem;\\n\\n            &:before {\\n              height: 20rem;\\n              width: 35rem;\\n              background: $red;\\n              transform: translate3d(-10rem, 15rem, 0) rotate(-45deg);\\n            }\\n\\n            &:after {\\n              height: 5rem;\\n              width: 30rem;\\n              background: #fff;\\n              transform: translate3d(-10rem, 12rem, 0) rotate(-45deg);\\n              border: 0.5rem solid #fff;\\n              box-shadow: inset 0 0 0 0.4rem $blue, 0 0 0 0.4rem $blue;\\n              background: #fff;\\n              background-image: radial-gradient(\\n                  $red 25%,\\n                  $yellow 35%,\\n                  $body 45%,\\n                  transparent 0\\n                ),\\n                radial-gradient($red 25%, $yellow 35%, $body 45%, transparent 0);\\n              background-size: 6rem 6rem;\\n              background-position: 0 0, 3rem 3rem;\\n            }\\n          }\\n        }\\n        //decoration\\n        & > *:nth-of-type(3) {\\n          width: 50rem;\\n          height: 60rem;\\n          border: 2rem dotted $blue;\\n          transform: translate3d(31rem, -9rem, 0);\\n          border-radius: 50%;\\n        }\\n      }\\n\\n      & > *:nth-of-type(9) {\\n        width: 50rem;\\n        height: 37rem;\\n        transform: translate3d(25rem, 19rem, 0);\\n        overflow: hidden;\\n\\n        &:after {\\n          width: 50rem;\\n          height: 53rem;\\n          transform: translate3d(2rem, -8rem, 0);\\n          box-shadow: inset 0 0 0 0.5rem #302e9b, 0 0 0 1rem #fff;\\n          border-radius: 50%;\\n        }\\n\\n        &:before {\\n          width: 15rem;\\n          background: $body;\\n          height: 2rem;\\n          transform: translate3d(8.5rem, 0, 0) skewX(-35deg);\\n          box-shadow: 0 0 0 0.5rem $blue, 0 0 0 1rem $body, 0 0 0 1.5rem $yellow;\\n        }\\n      }\\n\\n      & > *:nth-of-type(12) {\\n        transform: translate3d(-1rem, 21.5rem, 0);\\n        width: 45rem;\\n        height: 32rem;\\n        border-radius: 50%;\\n        overflow: hidden;\\n\\n        &:before {\\n          width: 20rem;\\n          height: 8rem;\\n          background: repeating-linear-gradient(\\n              -45deg,\\n              $blue,\\n              $blue 0.2rem,\\n              $none 0.2rem,\\n              $none 1rem\\n            ),\\n            $yellow;\\n          transform: translate3d(38rem, 19rem, 0);\\n          border: 0.5rem solid $blue;\\n        }\\n\\n        &:after {\\n          width: 2.5rem;\\n          height: 5rem;\\n          transform: translate3d(33.5rem, 20.25rem, 0);\\n          background: $yellow;\\n          border: 0.4rem solid $blue;\\n          border-radius: 50%;\\n        }\\n      }\\n      // bottom hand\\n      & > *:nth-of-type(13) {\\n        transform: translate3d(28.5rem, 46rem, 0);\\n        border: 0.4rem solid $blue;\\n        border-top: none;\\n        width: 4.25rem;\\n        height: 2rem;\\n        border-radius: 1.5rem 0 100% 0.75rem;\\n        background: #fff;\\n        box-shadow: 0.75rem -1rem 0 $blue;\\n\\n        &:before {\\n          transform: translate3d(-4rem, -2rem, 0);\\n          border: 0.4rem solid $blue;\\n          border-right: none;\\n          width: 5.5rem;\\n          height: 1.8rem;\\n          border-radius: 1rem 0 0 1rem;\\n          background: #fff;\\n          box-shadow: 0.7rem 1rem 0 -0.4rem #fff, 0.3rem 1.4rem 0 -0.4rem $blue,\\n            0.8rem -1.3rem 0 -0.5rem #fff, 0.8rem -1.3rem 0 -0.1rem $blue,\\n            1.8rem -2.3rem 0 -0.6rem #fff, 1.8rem -2.3rem 0 -0.2rem $blue;\\n        }\\n\\n        &:after {\\n          transform: translate3d(1rem, -4.2rem, 0);\\n          width: 4rem;\\n          height: 4.5rem;\\n          border-radius: 0 100% 100% 0;\\n          border: 0.4rem solid $blue;\\n          border-left: none;\\n          border-bottom: none;\\n          background: #fff;\\n        }\\n      }\\n      // bottom wrist\\n      & > *:nth-of-type(10) {\\n        width: 10rem;\\n        height: 8rem;\\n        transform: translate3d(32.5rem, 40.5rem, 0);\\n        overflow: hidden;\\n\\n        &:before {\\n          border-radius: 50%;\\n          transform: translate3d(-2.5rem, -2.5rem, 0);\\n          width: 7.5rem;\\n          height: 5rem;\\n          border: 0.5rem solid $blue;\\n          box-shadow: 0 0 0 1rem $yellow;\\n        }\\n\\n        &:after {\\n          border-radius: 50%;\\n          transform: translate3d(-2.5rem, 5rem, 0);\\n          width: 7.5rem;\\n          height: 6rem;\\n          border: 0.5rem solid $blue;\\n          box-shadow: 0 0 0 1rem $yellow;\\n        }\\n      }\\n      //arm\\n      & > *:nth-of-type(11) {\\n        width: 10rem;\\n        height: 4rem;\\n        transform: translate3d(33.75rem, 42.2rem, 0) scaleY(0.7);\\n        overflow: hidden;\\n\\n        &:before {\\n        }\\n\\n        &:after {\\n          width: 2.5rem;\\n          height: 2.5rem;\\n          transform: translate3d(0rem, 0.5rem, 0) rotate(45deg);\\n          background: $blue;\\n          border: 0.75rem solid $yellow;\\n          box-shadow: 0 0 0 0.5rem $blue, 0 0 0 2rem $yellow;\\n        }\\n      }\\n    }\\n  }\\n\\n  & > *:nth-of-type(2) {\\n    transform: rotate(180deg);\\n\\n    & > *:nth-of-type(2) {\\n      & > *:nth-of-type(2) {\\n        &:before {\\n          transform: translate3d(45.75rem, 32.4rem, 0);\\n        }\\n\\n        &:after {\\n          transform: translate3d(45.7rem, 32.3rem, 0) rotate(-45deg);\\n        }\\n\\n        background: none;\\n        border: none;\\n        box-shadow: none;\\n\\n        & > *:nth-of-type(1) {\\n          display: none;\\n        }\\n      }\\n    }\\n  }\\n}\\n\",\"js\":\"// No images, just CSS\\n\\n// www.instagram.com/ivorjetski\\n// twitter.com/ivorjetski\\n// www.youtube.com/ivorjetski\\n\\n// This is just one playing card so we are probably going to need 51 others! :O Fork and help! It would be great to see 51 different styles!\\n\\n// Follow me for CSS only card games\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2019-12-10T20:38:24.000Z\",\"updated_at\":\"2021-10-26T17:18:22.724Z\",\"title\":\"Pure CSS Playing Card No.1 - King of Hearts\",\"description\":\"The King of Hearts - No images, just CSS.\\n\\nIt was mainly an experiment with  lighting.\\n\\nWatch a short video of the making of here:\\nwww.youtube.com/ivorjetski\\nSubscribe for more.\\n\\n This is one playing card. We are probably going to need 51 others! :O Fork and help! It would be great to see 51 different styles!\\n\\nThe simpler, the better, for the browsers  sake.\\n\\nFollow me for CSS only card games...\\n\\nwww.instagram.com/ivorjetski\\n\\nwww.twitter.com/ivorjetski\",\"slug_hash\":\"ExaKmjw\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":13,\"custom_screenshot_filename\":null,\"loves_count\":938,\"pick\":false,\"popularity_score\":10749,\"views_count\":59288,\"pick_visible_at\":null,\"cpid\":\"016ef188-ca00-75b5-b929-f7d78d46f586\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}