Pixel Ghost

Just a little fun with CSS

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Pixel Ghost</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="ghost"></div>
<h1>Ghost</h1>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
@import url(https://fonts.googleapis.com/css?family=Sniglet:800);
body {
  width: 100%;
  height: auto;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I4YzZkZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZkODhiNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b8c6df), color-stop(100%, #6d88b7));
  background-image: -moz-linear-gradient(top, #b8c6df 0%, #6d88b7 100%);
  background-image: -webkit-linear-gradient(top, #b8c6df 0%, #6d88b7 100%);
  background-image: linear-gradient(to bottom, #b8c6df 0%, #6d88b7 100%);
  background-repeat: no-repeat;
}

h1 {
  width: 200px;
  position: relative;
  margin: 10px auto 0;
  font-family: Sniglet;
  font-size: 60px;
  letter-spacing: -2px;
  color: rgba(207, 209, 212, 0.8);
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5), -4px 4px 0 rgba(0, 0, 0, 0.5), 4px -4px 0 rgba(0, 0, 0, 0.5), 0px 4px 0 rgba(0, 0, 0, 0.5), -4px 0px 0 rgba(0, 0, 0, 0.5), 0px -4px 0 rgba(0, 0, 0, 0.5), 4px 0px 0 rgba(0, 0, 0, 0.5), -4px -4px 0 rgba(0, 0, 0, 0.5), 0px -5px 0 rgba(0, 0, 0, 0.5), 0px 5px 0 rgba(0, 0, 0, 0.5), 5px 0px 0 rgba(0, 0, 0, 0.5), -5px 0px 0 rgba(0, 0, 0, 0.5);
}
h1:after {
  content: "Ghost";
  text-shadow: none;
  color: rgba(250, 252, 255, 0.9);
  display: block;
  position: absolute;
  top: 4px;
  left: 2px;
  font-size: 55px;
  letter-spacing: 1px;
}

.ghost {
  width: 130px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}
.ghost:before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: transparent;
  box-shadow: 24px 72px #000000, 30px 78px #000000, 36px 84px #000000, 78px 78px #000000, 84px 72px #000000, 66px 54px #000000, 66px 48px #000000, 66px 42px #000000, 48px 90px #000000, 66px 90px #000000, 72px 84px #000000, 54px 90px #000000, 72px 54px #000000, 72px 48px #000000, 72px 42px #000000, 72px 36px #000000, 42px 54px #000000, 42px 48px #000000, 42px 42px #000000, 42px 36px #000000, 36px 54px #000000, 36px 48px #000000, 36px 42px #000000, 36px 36px #000000, 42px 90px #000000, 48px 102px #000000, 48px 96px #000000, 54px 108px #000000, 60px 90px #000000, 60px 102px #000000, 60px 96px #000000, 54px 102px #ff0303, 54px 96px #ff0303, 66px 30px #000000, 36px 60px #000000, 24px 54px #000000, 24px 48px #000000, 24px 36px #000000, 24px 30px #000000, 42px 12px #000000, 42px 18px #000000, 36px 18px #000000, 30px 24px #000000, 30px 18px #000000, 24px 24px #000000, 24px 42px #000000, 42px 30px #000000, 48px 6px #000000, 54px 6px #000000, 66px 6px #000000, 60px 6px #000000, 78px 6px #000000, 90px 6px #000000, 72px 6px #000000, 84px 6px #000000, 96px 6px #000000, 102px 12px #000000, 108px 18px #000000, 84px 54px #000000, 84px 48px #000000, 84px 42px #000000, 84px 36px #000000, 84px 30px #000000, 84px 24px #000000, 78px 24px #000000, 90px 42px #000000, 96px 48px #000000, 108px 48px #000000, 102px 48px #000000, 114px 48px #000000, 114px 42px #000000, 108px 36px #000000, 108px 30px #000000, 108px 24px #000000, 90px 60px #000000, 96px 60px #000000, 102px 66px #000000, 102px 78px #000000, 102px 72px #000000, 102px 84px #000000, 96px 90px #000000, 18px 60px #000000, 12px 60px #000000, 12px 66px #000000, 12px 72px #000000, 12px 78px #000000, 12px 84px #000000, 18px 90px #000000, 24px 96px #000000, 30px 102px #000000, 36px 102px #000000, 66px 102px #000000, 78px 102px #000000, 72px 102px #000000, 90px 96px #000000, 84px 102px #000000, 18px 66px #fafcff, 30px 66px #fafcff, 24px 66px #fafcff, 24px 60px #fafcff, 30px 60px #fafcff, 30px 54px #fafcff, 30px 48px #fafcff, 30px 36px #fafcff, 30px 30px #fafcff, 30px 42px #fafcff, 36px 30px #fafcff, 36px 24px #fafcff, 42px 24px #fafcff, 48px 24px #fafcff, 54px 30px #fafcff, 54px 48px #fafcff, 54px 54px #fafcff, 48px 18px #fafcff, 48px 12px #fafcff, 54px 42px #fafcff, 54px 36px #fafcff, 60px 30px #fafcff, 66px 18px #fafcff, 54px 12px #fafcff, 54px 18px #fafcff, 54px 24px #fafcff, 60px 24px #fafcff, 60px 18px #fafcff, 66px 12px #fafcff, 60px 12px #fafcff, 36px 66px #fafcff, 78px 66px #fafcff, 60px 60px #fafcff, 72px 60px #000000, 84px 66px #fafcff, 90px 66px #fafcff, 96px 66px #fafcff, 90px 78px #fafcff, 90px 72px #fafcff, 78px 96px #fafcff, 90px 90px #fafcff, 84px 90px #fafcff, 90px 84px #fafcff, 96px 84px #fafcff, 96px 78px #fafcff, 96px 72px #fafcff, 42px 102px #000000, 54px 84px #fafcff, 60px 84px #fafcff, 66px 84px #fafcff, 66px 78px #fafcff, 60px 78px #fafcff, 72px 78px #fafcff, 78px 72px #fafcff, 72px 72px #fafcff, 48px 84px #fafcff, 48px 78px #fafcff, 42px 84px #fafcff, 42px 78px #fafcff, 36px 72px #fafcff, 30px 72px #fafcff, 36px 78px #fafcff, 24px 90px #fafcff, 24px 84px #fafcff, 18px 84px #fafcff, 18px 78px #fafcff, 18px 72px #fafcff, 72px 24px #fafcff, 66px 24px #fafcff, 96px 36px #fafcff, 90px 18px #fafcff, 72px 18px #fafcff, 78px 18px #fafcff, 84px 18px #fafcff, 78px 12px #fafcff, 72px 12px #fafcff, 90px 12px #fafcff, 84px 12px #fafcff, 96px 12px #fafcff, 102px 18px #fafcff, 96px 24px #fafcff, 96px 30px #fafcff, 96px 18px #fafcff, 102px 24px #fafcff, 102px 30px #fafcff, 102px 36px #fafcff, 108px 42px #fafcff, 90px 24px #cfd1d4, 90px 30px #cfd1d4, 90px 36px #cfd1d4, 102px 42px #cfd1d4, 24px 78px #cfd1d4, 30px 84px #cfd1d4, 36px 90px #cfd1d4, 66px 96px #cfd1d4, 72px 90px #cfd1d4, 78px 90px #cfd1d4, 84px 84px #cfd1d4, 84px 78px #cfd1d4, 78px 84px #cfd1d4, 72px 96px #cfd1d4, 84px 96px #cfd1d4, 42px 96px #cfd1d4, 36px 96px #cfd1d4, 30px 96px #cfd1d4, 30px 90px #cfd1d4, 96px 42px #cfd1d4, 78px 60px #cfd1d4, 78px 54px #cfd1d4, 78px 48px #cfd1d4, 78px 42px #cfd1d4, 78px 36px #cfd1d4, 78px 30px #cfd1d4, 72px 30px #cfd1d4, 48px 30px #cfd1d4, 42px 60px #cfd1d4, 54px 72px #fafcff, 54px 78px #fafcff, 54px 66px #000000, 60px 66px #000000, 60px 72px #fafcff, 48px 72px #fafcff, 42px 72px #000000, 66px 72px #000000, 66px 36px #000000, 48px 36px #cfd1d4, 48px 42px #cfd1d4, 48px 48px #cfd1d4, 48px 54px #cfd1d4, 60px 36px #fafcff, 60px 42px #fafcff, 60px 48px #fafcff, 60px 54px #fafcff, 72px 66px #cfd1d4, 66px 66px #cfd1d4, 84px 60px #cfd1d4, 42px 66px #cfd1d4, 48px 66px #000000, 54px 60px #cfd1d4, 48px 60px #cfd1d4, 66px 60px #cfd1d4;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Pixel Ghost ) is write by JPablo Lomeli, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © JPablo Lomeli