Neumorphism Yu-Gi-Oh! Card | CSS Hover Animation Effects | Web UI Design in Sketch
10/17/2020
Contents
Demo
Video
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);
}