Neumorphism Yu-Gi-Oh! Card | CSS Hover Animation Effects | Web UI Design in Sketch

10/17/2020

Demo

Full Screen

Video

YouTube Channel

Code

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Neumorphism Yu-Gi-Oh! Monster Card</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="container">
      <div class="card">
        <div class="monster-name">
          <h2>B<span>LUE</span>-E<span>YES </span>W<span>HITE </span>D<span>RAGON</span></h2>
          <div class="attribute"><img src="attribute.png"></div>
        </div>
        <div class="level">
          <img src="star.png">
          <img src="star.png">
          <img src="star.png">
          <img src="star.png">
          <img src="star.png">
          <img src="star.png">
          <img src="star.png">
        </div>
        <div class="monster-image">
          <img src="BlueEyesWhiteDragon.png">
        </div>
        <div class="description">
          <p class="type">[Dragon]</p>
          <p>This legendary dragon is a powerful engine of destruction. Virtually invincible,
            very few have faced this awesome creature and lived to tell the tale.</p>
          <p class="atk-def">ATK/3000 DEF/2500</p>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

@import url("https://use.typekit.net/grv0vbg.css");
body {
  margin: 0;
  padding: 0;
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-style: normal;
  background: #ecf4fe;
}
p {
  margin: 0;
}
#container {
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 0;
  box-sizing: border-box;
}
.box {
  width:
}
.card {
  cursor: pointer;
  width: 280px;
  padding: 15px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  box-shadow: -5px -5px 5px rgba(255, 255, 255, 1),
              -4px -4px 4px rgba(255, 255, 255, .5),
              inset 1px 1px 2px rgba(255, 255, 255, .1),
              5px 5px 5px rgba(0, 0, 0, .15);
}
.card .monster-name {
  width: 100%;
  padding: 10px 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  box-shadow: -4px -4px 4px rgba(255, 255, 255, 1),
              -4px -4px 4px rgba(255, 255, 255, .5),
              inset 1px 1px 2px rgba(255, 255, 255, .1),
              2px 2px 5px rgba(0, 0, 0, .15);
}
.card .monster-name h2 {
  color: #126f97;
  font-size: 18px;
  margin: 0;
}
.card .monster-name h2 span {
  font-size: 14px;
}
.card .monster-name .attribute {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
  box-shadow: -2px -2px 5px rgba(255, 255, 255, 1),
              -2px -2px 5px rgba(255, 255, 255, .5),
              inset 2px 2px 4px rgba(255, 255, 255, .1),
              2px 2px 8px rgba(0, 0, 0, .15);
}
.card .monster-name .attribute img {
  width: 15px;
}
.card .level {
  width: 100%;
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.card .level img {
  width: 12px;
  padding: 3px;
  border-radius: 50%;
  box-shadow: -2px -2px 5px rgba(255, 255, 255, 1),
              -2px -2px 5px rgba(255, 255, 255, .5),
              inset 2px 2px 4px rgba(255, 255, 255, .1),
              2px 2px 8px rgba(0, 0, 0, .15);
  margin-left: 5px;
}
.card .monster-image {
  width: 90%;
  margin-top: 15px;
  padding: 12px 12px 7px 12px;
  border-radius: 5px;
  box-shadow: -4px -4px 4px rgba(255, 255, 255, 1),
              -4px -4px 4px rgba(255, 255, 255, .5),
              inset 1px 1px 2px rgba(255, 255, 255, .1),
              2px 2px 5px rgba(0, 0, 0, .15);
  box-sizing: border-box;
}
.card .monster-image img {
  width: 100%;
}
.card .description {
  width: 100%;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: -4px -4px 4px rgba(255, 255, 255, 1),
              -4px -4px 4px rgba(255, 255, 255, .5),
              inset 1px 1px 2px rgba(255, 255, 255, .1),
              2px 2px 5px rgba(0, 0, 0, .15);
  box-sizing: border-box;
}
.card .description .type {
  font-size: 12px;
  letter-spacing: 1.2px;
  margin-bottom: 5px;
}
.card .description .atk-def {
  margin-top: 10px;
  padding-top: 5px;
  border-top: solid 1px #d8d8d8;
  font-size: 12px;
  text-align: right;
}
.card:hover {
  box-shadow: inset -5px -5px 5px rgba(255, 255, 255, 1),
              inset -4px -4px 4px rgba(255, 255, 255, .5),
              inset 1px 1px 2px rgba(255, 255, 255, .1),
              inset 5px 5px 5px rgba(0, 0, 0, .15);
}
.card:hover .monster-name,
.card:hover .monster-image,
.card:hover .description {
  box-shadow: inset -4px -4px 4px rgba(255, 255, 255, 1),
              inset -4px -4px 4px rgba(255, 255, 255, .5),
              inset 1px 1px 2px rgba(255, 255, 255, .1),
              inset 2px 2px 5px rgba(0, 0, 0, .15);
}
.card:hover .monster-name .attribute,
.card:hover .level img {
  box-shadow: inset -1px -1px 2px rgba(255, 255, 255, 1),
              inset -1px -1px 2px rgba(255, 255, 255, .5),
              inset 1px 1px 2px rgba(255, 255, 255, .1),
              inset 1px 1px 4px rgba(0, 0, 0, .15);
}
.card:hover p,
.card:hover h2,
.card:hover img {
  transform: scale(.98);
}