Santa Link is Coming to Town~

In this example below you will see how to do a Santa Link is Coming to Town~ with some HTML / CSS and Javascript

Link sprite from the Legend of Zelda (NES) with a santa hat. Created using a single div and CSS only.

Thumbnail
This awesome code was written by praliedutzel, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright praliedutzel ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Santa Link is Coming to Town~</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--
  Merry Christmas and happy holidays! <3
-->
<div class="link"></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/praliedutzel/santa-link-is-coming-to-town~-QyKdRg */
body {
  background-color: #111;
}

.link {
  background-color: #D58417;
  width: 20px;
  height: 20px;
  margin-top: 100px;
  margin-left: 40px;
  box-shadow: 0 20px #D58417, 0 40px #D58417, 20px 40px #D58417, 0 60px #D58417, 20px 60px #D58417, 20px 80px #D58417, 40px 80px #D58417, 60px 80px #D58417, 60px 60px #D58417, 60px 40px #D58417, 60px 100px #D58417, 80px 100px #D58417, 80px 80px #D58417, 100px 80px #D58417, 100px 60px #D58417, 100px 40px #D58417, 120px 40px #D58417, 120px 60px #D58417, 120px 80px #D58417, 140px 80px #D58417, 140px 100px #D58417, 140px 120px #D58417, 120px 120px #D58417, 100px 120px #D58417, 160px 100px #D58417, 160px 80px #D58417, 160px 60px #D58417, 160px 40px #D58417, 180px 80px #D58417, 200px 80px #D58417, 200px 60px #D58417, 220px 60px #D58417, 200px 40px #D58417, 220px 40px #D58417, 220px 20px #D58417, 220px 0 #D58417, 220px 120px #D58417, 220px 140px #D58417, 20px 140px #D58417, 0 160px #D58417, 20px 160px #D58417, 40px 160px #D58417, 20px 180px #D58417, 20px 200px #D58417, 100px 160px #D58417, 100px 180px #D58417, 100px 200px #D58417, 100px 220px #D58417, 80px 240px #D58417, 60px 240px #D58417, 40px 240px #D58417, 20px 240px #D58417, 0 240px #D58417;
}

.link:before {
  content: "";
  position: absolute;
  display: block;
  background-color: #6F3402;
  width: 20px;
  height: 20px;
  margin-top: 60px;
  margin-left: 40px;
  box-shadow: 0 -20px #6F3402, 0 -40px #6F3402, 20px -40px #6F3402, 20px -60px #6F3402, 40px -60px #6F3402, 40px -40px #6F3402, 60px -40px #6F3402, 60px -60px #6F3402, 80px -60px #6F3402, 80px -40px #6F3402, 100px -40px #6F3402, 100px -60px #6F3402, 120px -60px #6F3402, 120px -40px #6F3402, 140px -40px #6F3402, 140px -20px #6F3402, 140px 0 #6F3402, 100px 0 #6F3402, 100px -20px #78BF13, 40px 0 #6F3402, 40px -20px #78BF13, 60px 40px #6F3402, 80px 40px #6F3402, 0 40px #78BF13, 40px 60px #6F3402, 20px 60px #6F3402, 0 60px #6F3402, -20px 60px #6F3402, -40px 60px #6F3402, -60px 80px #6F3402, -40px 80px #6F3402, 0 80px #6F3402, 20px 80px #6F3402, 40px 80px #6F3402, 60px 80px #6F3402, 40px 100px #6F3402, 20px 100px #6F3402, -60px 100px #6F3402, -60px 120px #6F3402, -40px 120px #6F3402, 0 120px #6F3402, 20px 120px #6F3402, 40px 120px #6F3402, 40px 140px #6F3402, 20px 140px #6F3402, 0 140px #6F3402, -40px 140px #6F3402, -60px 140px #6F3402, -60px 160px #6F3402, -40px 160px #6F3402, -20px 160px #6F3402, 0 160px #6F3402, 20px 160px #6F3402, 40px 160px #6F3402, 100px 200px #6F3402, 120px 200px #6F3402, 140px 200px #6F3402, 140px 180px #6F3402, 120px 180px #6F3402, 100px 180px #6F3402, 140px 160px #6F3402, 120px 160px #78BF13, 100px 160px #78BF13, 80px 160px #78BF13, 80px 140px #6F3402, 100px 140px #6F3402, 120px 140px #78BF13, 140px 140px #78BF13, 160px 140px #78BF13, 160px 120px #78BF13, 140px 120px #6F3402, 120px 120px #6F3402, 100px 120px #6F3402, 80px 120px #78BF13, 80px 100px #6F3402, 100px 100px #6F3402, 120px 100px #78BF13, 140px 100px #78BF13, 160px 100px #6F3402, 160px 80px #78BF13, 140px 80px #78BF13, 120px 80px #78BF13, 100px 80px #78BF13, 80px 80px #78BF13, 120px 60px #78BF13, 140px 60px #78BF13, 160px 60px #78BF13, 140px 40px #78BF13, 160px 40px #6F3402, 180px 40px #6F3402, 180px 20px #6F3402;
}

.link:after {
  content: "";
  position: absolute;
  display: block;
  background-color: white;
  width: 20px;
  height: 20px;
  margin-left: 40px;
  box-shadow: 0 -20px #D82800, 20px -20px white, 40px -20px white, 60px -20px white, 80px -20px white, 100px -20px white, 120px -20px white, 140px -20px #D82800, 140px 0 white, 120px -40px #D82800, 100px -40px #D82800, 80px -40px #D82800, 60px -40px #D82800, 40px -40px #D82800, 20px -40px #D82800, 40px -60px #D82800, 60px -60px #D82800, 80px -60px #D82800, 100px -60px #D82800, 120px -60px #D82800, 120px -80px #D82800, 100px -80px #D82800, 80px -80px #D82800, 140px -80px #D82800, 160px -60px #D82800, 180px -40px white;
}

Comments