17+ CSS Logo Examples

This post contains a total of 17+ CSS Logo Examples with Source Code. All these Logos are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Logo Examples

1. By Ivan Drinchev

Made by Ivan Drinchev. SoundCloud Animated CSS Logo. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
.block {
  width: 330px;
  position: relative;
  margin: 0 auto;
}
.block.orange {
  background: #FE4B00;
}

.logo {
  height: 170px;
}

.text, .about {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'Arial';
}

.text {
  padding: 0 0 10px 0;
  color: white;
  font-size: 30px;
  letter-spacing: 5px;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}

.about {
  font-size: 12px;
  padding: 10px 0;
}
.about a {
  color: #FE4B00;
  border-bottom: 1px solid #FE4B00;
  text-decoration: none;
}

.lines, .clouds {
  width: 165px;
  height: 100%;
}

.lines {
  float: left;
  background: #FE4B00;
}

.clouds {
  overflow: hidden;
  float: right;
  position: relative;
}

.bottom-cloud-part {
  width: 110px;
  position: absolute;
  bottom: 20px;
  left: 0px;
  background: white;
  height: 50px;
  border-radius: 5px;
  -moz-box-shadow: -12px 1px 3px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: -12px 1px 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: -12px 1px 3px 3px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.cloud-circle {
  position: absolute;
  background: white;
  border-radius: 1000px;
  z-index: 2;
}

.cloud-circle.small {
  width: 72.5px;
  height: 72.5px;
  bottom: 21px;
  right: 20px;
  -moz-box-shadow: 0px 1px 3px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 1px 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 3px 3px rgba(0, 0, 0, 0.2);
}
.cloud-circle.small:after {
  position: relative;
  content: '';
  display: block;
  background: white;
  height: 42.5px;
  bottom: -30px;
  left: -40px;
}

.cloud-circle.big {
  width: 125px;
  height: 125px;
  bottom: 20px;
  left: -33px;
}

.line {
  background: white;
  display: block;
  float: left;
  border-radius: 20px;
  -moz-box-shadow: 0px 0px 0px 3px #fff, 0px 3px 3px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0px 0px 3px #fff, 0px 3px 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 0px 3px #fff, 0px 3px 3px 3px rgba(0, 0, 0, 0.2);
  margin-left: 9px;
  position: relative;
  margin-top: 37px;
  width: 3px;
}
.line:first-child {
  margin-left: 23px;
}

.line.a {
  height: 20px;
  bottom: -70px;
  -webkit-animation-delay: 0.2s;
}

.line.b {
  height: 40px;
  bottom: -60px;
  -webkit-animation-delay: 0.4s;
}

.line.c {
  height: 50px;
  bottom: -55px;
  -webkit-animation-delay: 0.6s;
}

.line.d {
  height: 60px;
  bottom: -50px;
  -webkit-animation-delay: 0.8s;
}

.line.e {
  height: 55px;
  bottom: -55px;
  -webkit-animation-delay: 1.0s;
}

.line.f {
  height: 70px;
  bottom: -40px;
  -webkit-animation-delay: 1.2s;
}

.line.g {
  height: 85px;
  bottom: -25px;
  -webkit-animation-delay: 1.4s;
}

.line.h {
  height: 95px;
  bottom: -15px;
  -webkit-animation-delay: 1.6s;
}

.line.i {
  height: 90px;
  bottom: -20px;
  -webkit-animation-delay: 1.8s;
}

.line.j {
  height: 85px;
  bottom: -25px;
  -webkit-animation-delay: 2.0s;
}

.line.k {
  height: 95px;
  bottom: -15px;
  -webkit-animation-delay: 2.2s;
}

.line.l {
  height: 105px;
  bottom: -5px;
  -webkit-animation-delay: 2.4s;
}

@-webkit-keyframes 'animate' {
  0% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes 'cloudy' {
  0% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -moz-transform: scale(1.01) translateX(0) translateY(-1px);
    -ms-transform: scale(1.01) translateX(0) translateY(-1px);
    -webkit-transform: scale(1.01) translateX(0) translateY(-1px);
    transform: scale(1.01) translateX(0) translateY(-1px);
  }
  100% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.line {
  animation: animate 0.8s infinite ease-out;
}

.cloud-circle {
  animation: cloudy 0.8s infinite ease-in-out;
  animation-delay: 2.8s;
}
</style>
</head>
<body>
  <div class='logo orange block'>
  <div class='lines'>
    <div class='line a'></div>
    <div class='line b'></div>
    <div class='line c'></div>
    <div class='line d'></div>
    <div class='line e'></div>
    <div class='line f'></div>
    <div class='line g'></div>
    <div class='line h'></div>
    <div class='line i'></div>
    <div class='line j'></div>
    <div class='line k'></div>
    <div class='line l'></div>
  </div>
  <div class='clouds'>
    <div class='cloud-circle small'></div>
    <div class='cloud-circle big'></div>
    <div class='bottom-cloud-part'></div>
  </div>
</div>
<div class='text orange block'>Soundcloud</div>
<div class='about block'><a href='http://www.drinchev.com'>hire me!</a>
</body>
</html>

2. By roydukkey

Made by roydukkey. Pure CSS Animated Sushihanna Logo. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Sansita+One);
.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 70px;
  margin-top: -100px;
  margin-left: -75px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #ffffff), color-stop(100%, #cccccc));
  background-image: -moz-linear-gradient(bottom, #ffffff, #cccccc);
  background-image: -webkit-linear-gradient(bottom, #ffffff, #cccccc);
  background-image: linear-gradient(to top, #ffffff, #cccccc);
}
.logo:before, .logo:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background: #3a3a3c;
  z-index: -1;
}
.logo:before {
  top: 50px;
  height: 100%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: 0 1px 5px 0px #404040;
  -webkit-box-shadow: 0 1px 5px 0px #404040;
  box-shadow: 0 1px 5px 0px #404040;
}
.logo:after {
  top: 50%;
  height: 50px;
}
.logo strong {
  position: absolute;
  top: 120px;
  left: 0;
  margin-top: 0.25em;
  margin-left: -2em;
  color: #3a3a3c;
  font: 400 80px "Sansita One", cursive;
  line-height: 80px;
  white-space: nowrap;
}
.logo strong span {
  color: #ff9900;
}
.logo .hanna {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15.4px;
  height: 15.4px;
  margin-top: -7.7px;
  margin-left: -7.7px;
  background: #ff5900;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 1;
  -webkit-animation: rotate-hanna 2s 1;
  -moz-animation: rotate-hanna 2s 1;
  -o-animation: rotate-hanna 2s 1;
  animation: rotate-hanna 2s 1;
}
.logo .hanna span {
  background: #ff9900;
  position: absolute;
  top: -1.54px;
  left: -1.54px;
  width: 18.48px;
  height: 18.48px;
  border-top: 0 solid transparent;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-border-radius-bottomleft: 0;
  -webkit-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-animation: fade-petals 1s 1;
  -moz-animation: fade-petals 1s 1;
  -o-animation: fade-petals 1s 1;
  animation: fade-petals 1s 1;
}
.logo .hanna span:nth-child(1) {
  -moz-transform: rotate(90deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
  -ms-transform: rotate(90deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
  -webkit-transform: rotate(90deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
  transform: rotate(90deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
}
.logo .hanna span:nth-child(2) {
  -moz-transform: rotate(162deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
  -ms-transform: rotate(162deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
  -webkit-transform: rotate(162deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
  transform: rotate(162deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
}
.logo .hanna span:nth-child(3) {
  -moz-transform: rotate(234deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
  -ms-transform: rotate(234deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
  -webkit-transform: rotate(234deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
  transform: rotate(234deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
}
.logo .hanna span:nth-child(4) {
  -moz-transform: rotate(306deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
  -ms-transform: rotate(306deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
  -webkit-transform: rotate(306deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
  transform: rotate(306deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
}
.logo .hanna span:nth-child(5) {
  -moz-transform: rotate(378deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
  -ms-transform: rotate(378deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
  -webkit-transform: rotate(378deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
  transform: rotate(378deg) skewX(-12deg) skewY(-4deg) translate(-18.48px, -9.24px);
}
.logo .leaf {
  position: absolute;
  bottom: 45px;
  right: -30px;
  width: 100px;
  height: 100px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI5NjMxOSIvPjxzdG9wIG9mZnNldD0iODglIiBzdG9wLWNvbG9yPSIjOGNjNjNjIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOGNjNjNjIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #296319), color-stop(88%, #8cc63c), color-stop(100%, #8cc63c));
  background-image: -moz-linear-gradient(bottom, #296319, #8cc63c 88%, #8cc63c);
  background-image: -webkit-linear-gradient(bottom, #296319, #8cc63c 88%, #8cc63c);
  background-image: linear-gradient(to top, #296319, #8cc63c 88%, #8cc63c);
  -moz-border-radius: 100% 0 100% 0;
  -webkit-border-radius: 100%;
  border-radius: 100% 0 100% 0;
  -moz-box-shadow: 0 5px 5px -5px #404040;
  -webkit-box-shadow: 0 5px 5px -5px #404040;
  box-shadow: 0 5px 5px -5px #404040;
  -moz-transform: rotate(33deg) translate(100px, 100px);
  -ms-transform: rotate(33deg) translate(100px, 100px);
  -webkit-transform: rotate(33deg) translate(100px, 100px);
  transform: rotate(33deg) translate(100px, 100px);
  -webkit-animation: falling-leaf 2s 1;
  -moz-animation: falling-leaf 2s 1;
  -o-animation: falling-leaf 2s 1;
  animation: falling-leaf 2s 1;
}
.logo .leaf:before {
  content: "";
  position: absolute;
  top: -42px;
  right: -50px;
  width: 130px;
  height: 50px;
  background: white;
  -moz-border-radius: 100% 0 100% 0;
  -webkit-border-radius: 100%;
  border-radius: 100% 0 100% 0;
  -moz-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg);
}
.logo .leaf:after {
  content: "";
  position: absolute;
  top: -15px;
  right: 0;
  width: 28px;
  height: 28px;
  background: #8cc63c;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: -1;
}
.logo .leaf .vein {
  position: absolute;
  bottom: 32px;
  left: -13px;
  width: 115px;
  height: 20px;
  border-width: 0 0 4px 0;
  border-style: solid;
  border-color: #fff;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-transform: rotate(-43deg);
  -ms-transform: rotate(-43deg);
  -webkit-transform: rotate(-43deg);
  transform: rotate(-43deg);
}

@-webkit-keyframes rotate-hanna {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate-hanna {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate-hanna {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate-hanna {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes fade-petals {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fade-petals {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fade-petals {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-petals {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes falling-leaf {
  from {
    opacity: 0;
    -moz-transform: rotate(0deg) translate(100px, 100px);
    -ms-transform: rotate(0deg) translate(100px, 100px);
    -webkit-transform: rotate(0deg) translate(100px, 100px);
    transform: rotate(0deg) translate(100px, 100px);
  }
  50% {
    opacity: 0;
    -moz-transform: rotate(0deg) translate(100px, 100px);
    -ms-transform: rotate(0deg) translate(100px, 100px);
    -webkit-transform: rotate(0deg) translate(100px, 100px);
    transform: rotate(0deg) translate(100px, 100px);
  }
  to {
    opacity: 1;
    -moz-transform: rotate(33deg) translate(100px, 100px);
    -ms-transform: rotate(33deg) translate(100px, 100px);
    -webkit-transform: rotate(33deg) translate(100px, 100px);
    transform: rotate(33deg) translate(100px, 100px);
  }
}
@-moz-keyframes falling-leaf {
  from {
    opacity: 0;
    -moz-transform: rotate(0deg) translate(100px, 100px);
    -ms-transform: rotate(0deg) translate(100px, 100px);
    -webkit-transform: rotate(0deg) translate(100px, 100px);
    transform: rotate(0deg) translate(100px, 100px);
  }
  50% {
    opacity: 0;
    -moz-transform: rotate(0deg) translate(100px, 100px);
    -ms-transform: rotate(0deg) translate(100px, 100px);
    -webkit-transform: rotate(0deg) translate(100px, 100px);
    transform: rotate(0deg) translate(100px, 100px);
  }
  to {
    opacity: 1;
    -moz-transform: rotate(33deg) translate(100px, 100px);
    -ms-transform: rotate(33deg) translate(100px, 100px);
    -webkit-transform: rotate(33deg) translate(100px, 100px);
    transform: rotate(33deg) translate(100px, 100px);
  }
}
@-o-keyframes falling-leaf {
  from {
    opacity: 0;
    -moz-transform: rotate(0deg) translate(100px, 100px);
    -ms-transform: rotate(0deg) translate(100px, 100px);
    -webkit-transform: rotate(0deg) translate(100px, 100px);
    transform: rotate(0deg) translate(100px, 100px);
  }
  50% {
    opacity: 0;
    -moz-transform: rotate(0deg) translate(100px, 100px);
    -ms-transform: rotate(0deg) translate(100px, 100px);
    -webkit-transform: rotate(0deg) translate(100px, 100px);
    transform: rotate(0deg) translate(100px, 100px);
  }
  to {
    opacity: 1;
    -moz-transform: rotate(33deg) translate(100px, 100px);
    -ms-transform: rotate(33deg) translate(100px, 100px);
    -webkit-transform: rotate(33deg) translate(100px, 100px);
    transform: rotate(33deg) translate(100px, 100px);
  }
}
@keyframes falling-leaf {
  from {
    opacity: 0;
    -moz-transform: rotate(0deg) translate(100px, 100px);
    -ms-transform: rotate(0deg) translate(100px, 100px);
    -webkit-transform: rotate(0deg) translate(100px, 100px);
    transform: rotate(0deg) translate(100px, 100px);
  }
  50% {
    opacity: 0;
    -moz-transform: rotate(0deg) translate(100px, 100px);
    -ms-transform: rotate(0deg) translate(100px, 100px);
    -webkit-transform: rotate(0deg) translate(100px, 100px);
    transform: rotate(0deg) translate(100px, 100px);
  }
  to {
    opacity: 1;
    -moz-transform: rotate(33deg) translate(100px, 100px);
    -ms-transform: rotate(33deg) translate(100px, 100px);
    -webkit-transform: rotate(33deg) translate(100px, 100px);
    transform: rotate(33deg) translate(100px, 100px);
  }
}
</style>
</head>
<body>
  <div class="logo">
  <span class="hanna">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </span>
  <span class="leaf"><span class="vein"></span></span>
  <strong>Sushi<span>hanna</span></strong>
</div>
</body>
</html>

3. By Jure Ravlić

Made by Jure Ravlić. The Doors Logo. Source

css logo by jure ravlic
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Chicle' rel='stylesheet' type='text/css'>
<style>
* {
 margin: 0;
  padding: 0;}

html {
box-shadow: 0 0 200px rgba(0,0,0,0.8)  inset;
  overfolow: hidden;
height: 100%}
body { 
background-color:#CFCBC4;
background:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/bedge_grunge.png); 
}

.wrapper {
  width:100%;
  height:100%;
  
}
.cfix {margin: 0 auto; 
width: 960px;}

#box {
  padding:40px 0 10px  50px;
  margin: 0px 0 0 200px;
  
}

.the {
  position:absolute;
  margin: -2px 0 0 -65px;
  font-family: 'Chicle', cursive;
  font-size: 40px;
  color:#333; 
  text-transform: uppercase;
  
}
.info {
width:960px;
margin: 60px auto 0 auto;
text-align: center;
  color: #433b24;
    text-shadow: 1px 1px rgba(255,255,255,0.4);
  font-size: 18px;
}

.l1,.l2,.l3,.l4,.l5,.l1:before, .l1:after, .l2:before, .l2:after,
.l3:before, .l3:after, .l4:before, .l4:after, .l5:before, .l5:after { display: block;
  background: #333;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;

}

.lt-ie9 .wrapper {
display: none;}


/*************************************************/

.l1:before { position: absolute; content:""; display: block; width: 70px; height: 127px;border-radius: 62px  0 0 62px; 
  margin: 53px 0 0 -78px;
  }

.l1 {
  width: 63px;
  height: 180px;
  margin: 0 0 0 0px ;   
}

.l1:after { position: absolute;content:""; display: block; width: 60px;  
  height: 125px;
 
  border-radius:  60px 0 0 60px ; 
  transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  margin: 32px 0 0 62px;}



.l2 {
  width: 60px;  
  height: 125px;
  
  border-radius:  0 60px  60px 0 ; 
  transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  position: absolute;
  margin: -143px 0 0 120px;
  
}

.l3:before { position: absolute; content:""; display: block;
  position: absolute;content:""; display: block; width: 60px;  
  height: 125px;
  
  border-radius:  0 60px  60px 0 ; 
  transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  margin:19px 0 0 -59px;
}

.l3 {  width: 60px;
  height: 130px;  
  margin:-130px 0 0 300px;
}

.l3:after { position: absolute; content:""; display: block; width: 66px;
  height: 34px;
  margin:-32px 0 0 60px;
  border-radius: 90px 70px 0 0; 
  
}


.l4:before {display: block; content:""; 
 
  position: absolute;
  width: 20px; height: 20px;
  -moz-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  width: 60px;  
  height: 125px;  
  z-index: 200;
  margin: -52px 0 0 -186px;
  border-radius: 60px 0 0 60px ;
}

.l4 {
  width: 57px; 
  height: 29px;
  margin: -92px 0 0 369px;
  border-radius: 0 0  120px 120px;   
}

.l4:after {position: absolute; 
  content:""; display: block;
  
  width: 55px; height: 63px;
  margin: -75px 0 0 56px;
  border-radius: 40px 0 0  40px
}

.l5:before {display: block;
  content: "";
  width: 57px; 
  height: 50px; 
  
  margin: -77px 0 0 60px;
  position: absolute;
  border-radius: 0 42px 0 0;
}

.l5 { width: 52px;
  height: 50px;
  margin:11px 0 0 430px;
  border-radius: 0 0 0 42px;
}
.l5:after {display: block; content: "";
  margin:-51px 0 0 60px; 
  position: absolute;
  width: 57px;
  height: 62px;
  
  border-radius: 0 100px 100px 0;
}
</style>
</head>
<div class="wrapper">	
  <header class="cfix">
	<div id="box"> 
		<h1>
          <span class="the">The </span><span class="l1">D</span><span class="l2">o</span><span class="l3">o</span><span class="l4">r</span><span class="l5">s</span><span class="tm"></span></h1>
   </div>    
 </header>
  <section class="info">
     <p>Author: Jure Ravlić | 
      <a href="http://spletidej.com" TARGET="_blank">spletidej.com</a></p>
    <p> Version: 2.0 | update: semantically correct (remove CSS)</p>
   </section>
  
</div>
</body>
</html>

4. By Raja

Made by Raja. Animated React Logo. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  margin: 0;
}

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #282C33;
}

.react {
  width: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10rem;
  animation: anim__rotate 8.2s linear infinite;
}
.react__spoke {
  position: absolute;
  border: 0.45rem #55DBF8 solid;
  height: 4rem;
  width: 11rem;
  border-radius: 250%;
}
.react__spoke--1 {
  transform: rotate(60deg);
}
.react__spoke--2 {
  transform: rotate(-60deg);
}
.react__spoke--3 {
  height: 2.2rem;
  width: 2.2rem;
  background-color: #55DBF8;
  border-radius: 50%;
  position: absolute;
}

@keyframes anim__rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
</head>
<body>
  <div class="container">
  <div class="react">
    <div class="react__spoke react__spoke--0"></div>
    <div class="react__spoke react__spoke--1"></div>
    <div class="react__spoke react__spoke--2"></div>
    <div class="react__spoke--3"></div>
  </div>
</div>
</body>
</html>

5. By Artur

Made by Artur. Aviasales logo. Source

css logo by arthur
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
<style>
body {
  margin: 0 auto;
  padding: 5rem;
  width: 820px;
  background: #00b0dd;
  font-size: 2rem;
  font-family: Open Sans;
}
a {
  color: #fff;
  text-decoration: none;
  line-height: 1.2;
}
a div {
  float: left;
}
.aviasales {
  margin-top: 2rem;
  font-size: 5rem;
}
.logo {
  overflow: hidden;
  margin-right: 4rem;
  padding: 4.3rem 0;
  width: 333px;
  border-radius: 30px;
  background: #fff;
}
.door {
  position: relative;
  margin-right: 30px;
  width: 53px;
  height: 65px;
  border-radius: 23px;
  background: #00b0dd;
}
.door:after {
  position: absolute;
  top: 30px;
  left: 7px;
  width: 20px;
  height: 25px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  border-radius: 0 20px;
  background: transparent;
  content: '';
}
.first-door {
  margin-left: -25px;
}
.first-door:after {
  content: none;
}
.last-door {
  margin-right: -30px;
}
.last-door:after {
  content: none;
}
.center-door:before {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 70px;
  height: 105px;
  border: 6px solid #00b0dd;
  border-radius: 35px;
  content: '';
}
.cf:after {
  display: table;
  content: '';
  clear: both;
}
</style>
</head>
<body>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300&amp;subset=latin,cyrillic">
<a href="#" class="cf">
  <div class="logo">
    <div class="door first-door"></div>
    <div class="door"></div>
    <div class="door center-door"></div>
    <div class="door"></div>
    <div class="door last-door"></div>
  </div>
  <div class="aviasales">aviasales.ru</div>
  <div>Lorem Ipsum</div>
</a>
</body>
</html>

6. By ahopetoday

Made by ahopetoday. Git Logo in HTML/CSS. Source

css logo by ahopetoday
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  padding: 0;
  margin: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  background-color: azure;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  }

#logo {
  width: 50vh;
  height: 50vh;
  background-color: #f05030;
  border-radius: 4vh;
  transform: rotate(45deg);
  
}

.line {
  background-color: azure;
}

.circle {
  background-color: azure;
  height: 10vh;
  width: 10vh;
  border-radius: 5vh;
}

#lineLong {
  top: 23vh;
  left: 5vh;
  height: 4vh;
  width: 80%;
  position: relative;
  transform: rotate(45deg);
}

#lineShort {
  top: 6vh;
  height: 4vh;
  width: 35vh;
  position: relative;
}

#circleOne {
  top: -1vh;
  left: 7vh;
  position: relative;
}

#circleTwo {
  top: -11vh;
  left: 33vh;
  position: relative;
}

#circleThree {
  top: 5vh;
  left: 33vh;
  position: relative;
}
</style>
</head>
<body>
  <div id="container">
    <div id="logo">
      <div id="lineLong" class="line"></div>
      <div id="lineShort"class="line"></div>
      <div id="circleOne" class="circle"></div>
      <div id="circleTwo" class="circle"></div>
      <div id="circleThree" class="circle"></div>    
    </div>
  </div>
</body>
</html>

7. By Dmitry

Made by Dmitry. Target Logo. Source

css logo by dmitry
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
.wrapper {
  width: 350px;
  margin: 100px auto;
}

.out_circle {
  float: left;
  margin: 0 5px;
  background-color: #E32636;
  border-radius: 50%;
  height: 4em;
  width: 4em;
}

.dot {
  position: relative;
  top: .65em;
  left: .65em;
  height: 1.75em;
  width: 1.75em;
  border-radius: 50%;
  background-color: #E32636;
  border: .5em solid white;
  z-index: 2;
}


.target {
  height: 4em;
  line-height: 4em;
  font: bold 4em helvetica;
}

em {
  position: relative;
  bottom: .2em;
  right: 1em;
  display: inline-block;
  font: bold .1em helvetica;
  border: 1px solid #000;
  border-radius: 50%;
  height: 12em;
  width: 12em;
  text-align: center;
  line-height: 1.2em;
}
</style>
</head>
<body>
  <div class='wrapper'>
  <div class='out_circle'>
    <div class='dot'></div>
  </div>
  <div class='target'>TARGET</div>
</div>
</body>
</html>

8. By Johan van Tongeren

Made by Johan van Tongeren. DC Shoes CSS logo. Source

css logo by johan van tongeren
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.DC {
  position: absolute;
  width: 354px;
  height: 296px;
  top: 33px;
  left: 50%;
  margin-left: -175px;
  opacity: 1;
  
}
.S {
   border-bottom: 45px solid red;
   border-left: 11px solid transparent;
   border-right: 11px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: 100px;
   right: 20px;
   display: block;
   content: '';
   -webkit-transform: rotate(0deg);
}
.S:before {
   border-bottom: 45px solid red;
   border-left: 11px solid transparent;
   border-right: 11px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: 10px;
   right: -26px;
   display: block;
   content: '';
   -webkit-transform: rotate(50deg);
}
.S:after {
   border-bottom: 45px solid red;
   border-left: 11px solid transparent;
   border-right: 11px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: 10px;
   right: 5px;
   display: block;
   content: '';
   -webkit-transform: rotate(-50deg);
}
.S span {
   border-bottom: 45px solid red;
   border-left: 11px solid transparent;
   border-right: 11px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: 39px;
   right: -19px;
   display: block;
   content: '';
   -webkit-transform: rotate(151deg);
}
.S span:before {
   border-bottom: 45px solid red;
   border-left: 11px solid transparent;
   border-right: 11px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: 8px;
   right: -26px;
   display: block;
   content: '';
   -webkit-transform: rotate(55deg);
}
.S span:after {
   border-bottom: 45px solid red;
   border-left: 11px solid transparent;
   border-right: 11px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: 5px;
   right: 6px;
   display: block;
   content: '';
   -webkit-transform: rotate(-50deg);
}
.S b {
   border-bottom: 45px solid red;
   border-left: 11px solid transparent;
   border-right: 11px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: 28px;
   right: 9px;
   display: block;
   content: '';
   -webkit-transform: rotate(-106deg);
}
.D {
  -webkit-transform: scaley(.88);
  position: absolute;
  left: 0px;
  top: -17px;
  width: 126px;
  height: 200px;
  background: transparent;
  border: 65px solid red;
  border-radius: 0px 280px 280px 0;
  box-shadow: 0 -3px 0 0 red, 0 3px 0 0 red;
}
.D:before {
  content: '';
  position: absolute;
  left: -67px;
  top: 116px;
  width: 69px;
  height: 40px;
  background: #FFF;
}
.C {
  -webkit-transform: scaley(.88);
  position: absolute;
  top: -17px;
  left: 98px;
  width: 126px;
  height: 200px;
  background: transparent;
  border: 65px solid red;
  border-radius: 280px 0 0 280px;
  box-shadow: 0 -3px 0 0 red, 0 3px 0 0 red;
  opacity: 1;
}
.C:before {
  content: '';
  position: absolute;
  right: -68px;
  top: 32px;
  width: 71px;
  height: 123px;
  background: #FFF;
}
</style>
</head>
<body>
  <div class="DC">
  <div class="D"></div>
  <div class="C"></div>
  <div class="S">
    <span></span><b></b>
  </div>
</div>
</body>
</html>

9. By Philip Da Silva

Made by Philip Da Silva. Windows 8 Logo with Animated Loader. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
html {
  height: 100%;
  width: 100%;
  background: #000;
}

div.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7.5em;
  height: 5.9375em;
  margin: -7.5em 0 0 -4em;
  outline: 1px solid transparent;
  font-size: 1.2em;
  background-color: #26AAE1;
  transform: perspective(30px) rotateY(-3deg);
}
div.logo::before {
  content: "";
  position: absolute;
  top: 50%;
  height: 0.25em;
  width: 101%;
  margin: -0.125em 0 0 -1px;
  background-color: #000;
}
div.logo::after {
  content: "";
  position: absolute;
  left: 50%;
  height: 101%;
  width: 0.25em;
  margin-left: -0.125em;
  background-color: #000;
}

div.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 5em;
  width: 5em;
  margin: 2.5em auto auto -2.5em;
  list-style: none;
  overflow: hidden;
}
div.loader span {
  position: absolute;
  top: 5em;
  left: 0;
  width: 5em;
  height: 5em;
  animation-iteration-count: infinite;
  animation-name: loader;
  animation-duration: 4.7s;
}
div.loader span:nth-child(2) {
  animation-delay: 0.24s;
}
div.loader span:nth-child(3) {
  animation-delay: 0.48s;
}
div.loader span:nth-child(4) {
  animation-delay: 0.72s;
}
div.loader span:nth-child(5) {
  animation-delay: 0.96s;
}
div.loader span::before {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 0;
  height: 0.5em;
  width: 0.5em;
  margin-right: -0.25em;
  border-radius: 0.3125em;
  outline: 1px solid transparent;
  background-color: #FFF;
}

@keyframes loader {
  0% {
    top: 0;
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0, 0.7, 1, 0.3);
  }
  35% {
    transform: rotate(360deg);
    animation-timing-function: cubic-bezier(0, 0.7, 1, 0.3);
  }
  68% {
    top: 0;
    transform: rotate(720deg);
    animation-timing-function: cubic-bezier(0, 0.7, 1, 0.3);
  }
  95% {
    top: 5em;
    transform: rotate(690deg);
  }
  100% {
    top: 0;
    transform: rotate(690deg);
  }
}
</style>
</head>
<body>
  <div class="logo"></div>
<div class="loader">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
</body>
</html>

10. By Josetxu

Made by Josetxu. Batman Signal Animated Logo with Pure CSS. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
:root {
	--bg: #fff4d1;
	--w1: conic-gradient(from 90deg at 50% 50%, #fff491 0% 25%, #fff0 0% 100%)
		no-repeat;
	--w2: conic-gradient(from 90deg at 50% 50%, #ffdf81 0% 25%, #fff0 0% 100%)
		no-repeat;
	--w3: conic-gradient(from 90deg at 50% 50%, #ffb84f 0% 25%, #fff0 0% 100%)
		no-repeat;
	--w4: conic-gradient(from 90deg at 50% 50%, #ff926f 0% 25%, #fff0 0% 100%)
		no-repeat;
	--w5: conic-gradient(from 90deg at 50% 50%, #acb0b1 0% 25%, #fff0 0% 100%)
		no-repeat;
	--w6: conic-gradient(from 90deg at 50% 50%, #9dc8dc 0% 25%, #fff0 0% 100%)
		no-repeat;
	--w7: conic-gradient(from 90deg at 50% 50%, #577c9a 0% 25%, #fff0 0% 100%)
		no-repeat;
	--w8: conic-gradient(from 90deg at 50% 50%, #2b4e5f 0% 25%, #fff0 0% 100%)
		no-repeat;
}

* {
	transform-style: preserve-3d;
}

body {
	margin: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-color: #1f1f1f;
	background-image: linear-gradient(315deg, #0cbaba 0%, #380036 74%);
	cursor: pointer;
}

.sky {
	background: linear-gradient(0deg, #673ab78a, #3c3c3c94);
	height: 100vh;
}

.sky:after {
	content: "";
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0vh;
	background-image: radial-gradient(2px 2px at 20px 30px, #484341, transparent),
		radial-gradient(2px 2px at 43px 75px, #735454, transparent),
		radial-gradient(2px 1px at 54px 184px, #828282, transparent),
		radial-gradient(2px 2px at 93px 47px, #654b49, transparent),
		radial-gradient(1px 1px at 148px 87px, #3a1919, transparent),
		radial-gradient(2px 2px at 193px 137px, #a26662, transparent),
		radial-gradient(1px 2px at 210px 154px, #805241, transparent),
		radial-gradient(2px 2px at 243px 102px, #866356, transparent),
		radial-gradient(2px 1px at 264px 184px, #794937, transparent),
		radial-gradient(2px 2px at 293px 44px, #735454, transparent),
		radial-gradient(1px 1px at 223px 62px, #ad968e, transparent),
		radial-gradient(2px 2px at 249px 162px, #884228, transparent),
		radial-gradient(2px 2px at 73px 99px, #442e26, transparent),
		radial-gradient(1px 1px at 163px 42px, #403433, transparent),
		linear-gradient(180deg, #fff0 10%, #000 25%, #111 50%, #222 75%, #111 100%);
	background-repeat: no-repeat, repeat;
	background-size: 333px 263px, 333px 163px, 333px 163px, 333px 163px,
		333px 163px, 333px 163px, 333px 163px, 333px 163px, 333px 163px, 333px 163px,
		333px 163px, 333px 163px, 333px 163px, 333px 163px, 100% 100%;
	opacity: 0.5;
	mix-blend-mode: color-burn;
}

.moon {
	position: absolute;
	z-index: 2;
	width: 20vmin;
	height: 20vmin;
	left: 20vmin;
	top: 15vmin;
	opacity: 1;
	border-radius: 100%;
	animation: start-moon 3s ease 0s 1;
	background: radial-gradient(
			circle at 50% 50%,
			#fdfdfd 0% 7vmin,
			#ffffff00 7.25vmin 100%
		),
		#fff;
	box-shadow: 0 0 8em 4em #6493a9, 0 0 8em -16em #ff660000 inset,
		0 0 20px 5px #fdfdfd;
	mix-blend-mode: exclusion;
}

.moon:before {
	content: "";
	background: radial-gradient(
		circle at 100% 60%,
		#ffffff00 0% 60%,
		#dddddd 75% 100%
	);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0%;
	left: 0%;
	border-radius: 100%;
}

.moon:after {
	content: "";
	background: radial-gradient(
		circle at 0% 40%,
		#efefef 0% 60%,
		#ededed 75% 100%
	);
	width: 4.5vmin;
	height: 4.5vmin;
	position: absolute;
	top: 20%;
	left: 20%;
	border-radius: 100%;
	filter: blur(2px);
}

.light {
	mix-blend-mode: soft-light;
	/* background: #fff4d2;*/
	width: 22vmin;
	height: 22vmin;
	border-radius: 100%;
	position: absolute;
	top: 14vmin;
	left: 19vmin;
	transform: rotate(-45deg);
	opacity: 0;
	animation: start 5s ease 0s 1, blink-off 0.2s ease 0s 2;
}

.light:before {
	content: "";
	position: absolute;
	border: 8vmin solid transparent;
	border-top: 150vmin solid #fff4d2;
	top: 14vmin;
	left: 0.5vmin;
	border-radius: 0.5vmin;
	opacity: 0.65;
	filter: blur(3px);
	width: 5vmin;
}

.light:after {
	content: "";
	mix-blend-mode: soft-light;
	background: #fff4d2;
	width: 22vmin;
	height: 22vmin;
	border-radius: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(-45deg);
	filter: blur(2px);
}

body:hover .light {
	animation-iteration-count: 0;
}

body:active .light {
	opacity: 1;
	animation: start 1s ease 0s 1, blink-on 0.15s ease 0s 2;
	cursor: none;
}

@keyframes blink-off {
	40% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
}
@keyframes blink-on {
	40% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
}

@keyframes start {
	20%,
	80% {
		opacity: 1;
	}
}

/*** 
	Batman logo by Stephen Greig:
	http://tangledindesign.com/famous-logos-in-css3-the-dark-knight/
***/
#batman-logo {
	filter: contrast(1.5) blur(0.5px);
	height: 4.35vmin;
	overflow: hidden;
	position: absolute;
	width: 16vmin;
	background: #000;
	left: 1.85vmin;
	top: 9.75vmin;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		right top,
		color-stop(0, rgb(72, 84, 92)),
		color-stop(0.63, rgb(25, 26, 26)),
		color-stop(0.86, rgb(26, 26, 26))
	);
	background-image: -moz-linear-gradient(
		/* Remember Browser specific prefixes! */ left bottom,
		/* Gradient start point (the angle) */ rgb(72, 84, 92) 0%,
		/* First colour and start point */ rgb(25, 26, 26) 63%,
		/* Second colour and start point */ rgb(26, 26, 26) 86%
	);
	background-image: -o-linear-gradient(
		left bottom,
		rgb(72, 84, 92) 0%,
		rgb(25, 26, 26) 63%,
		rgb(26, 26, 26) 86%
	);
	transform: rotateZ(48deg) rotateY(15deg) rotateX(0deg) scaleY(1.75)
		scaleX(1.25);
	box-shadow: 0 0 10vmin 2vmin #fff;
	border-radius: 5% 5% 100% 100%;
}

#batman-logo div {
	position: absolute;
}

#left-white {
	background: var(--bg);
	border-radius: 3.2vmin 5.12vmin 0.96vmin 1.16vmin / 2.56vmin 3.2vmin 1.16vmin
		1.16vmin;
	width: 7.36vmin;
	height: 2.56vmin;
	top: -0.032vmin;
	left: -5.056vmin;
}

#left-white:after {
	content: "";
	position: absolute;
	background: var(--bg);
	width: 10.656vmin;
	height: 7.04vmin;
	border-radius: 0 12.8vmin 12.8vmin 12.8vmin / 0 9.6vmin 9.6vmin 9.6vmin;
	top: 2.336vmin;
	left: 2.816vmin;
}

#right-white {
	background: var(--bg);
	border-radius: 5.12vmin 3.2vmin 1.16vmin 0.96vmin / 3.2vmin 2.56vmin 1.16vmin
		1.16vmin;
	width: 7.36vmin;
	height: 2.56vmin;
	top: -0.032vmin;
	right: -5.056vmin;
}

#right-white:after {
	content: "";
	position: absolute;
	background: var(--bg);
	width: 12.256vmin;
	height: 7.04vmin;
	border-radius: 12.8vmin 0 12.8vmin 12.8vmin / 9.6vmin 0 9.6vmin 9.6vmin;
	top: 2.336vmin;
	right: 1.216vmin;
}

#top-white {
	width: 0.384vmin;
	top: 0;
	left: 7.664vmin;
	border-left: 0.384vmin solid #fff0;
	border-right: 0.384vmin solid #fff0;
	border-top: 0.64vmin solid #fff;
}

#top-white:before {
	content: "";
	position: absolute;
	width: 2.08vmin;
	height: 2.464vmin;
	background: var(--bg);
	border-radius: 0.96vmin 0.32vmin 0.32vmin 0.96vmin / 2.56vmin 1.16vmin 1.16vmin
		1.16vmin;
	top: -2.08vmin;
	right: 0.576vmin;
	-moz-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
	-o-transform: rotate(5deg);
}

#top-white:after {
	content: "";
	position: absolute;
	width: 2.08vmin;
	height: 2.464vmin;
	background: var(--bg);
	border-radius: 0.32vmin 0.96vmin 0.96vmin 0.32vmin / 1.16vmin 2.56vmin 1.16vmin
		1.16vmin;
	top: -2.08vmin;
	left: 0.576vmin;
	-moz-transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
}

#lighting {
	width: 3.2vmin;
	height: 3.2vmin;
	background: var(--bg);
	border-radius: 2.4vmin;
	left: 3.2vmin;
	top: -0.32vmin;
	opacity: 0.02;
	box-shadow: #fff 0 0 2.24vmin;
	-webkit-box-shadow: #fff 0 0 2.24vmin;
	-moz-box-shadow: #fff 0 0 2.24vmin;
}
/*** END Batman logo by Stephen Greig ***/

.skyline {
	height: 65vh;
	position: absolute;
	background: linear-gradient(75deg, #09080c, #0f0323), #0f0323;
	bottom: 0;
	width: 100vw;

	background: var(--w5) 0.5% 54%, var(--w6) 2.5% 56.25%, var(--w7) 0.25% 64.85%,
		var(--w8) 0.75% 84.25%, var(--w6) 19.685% 44.2%, var(--w5) 22.35% 44.25%,
		var(--w7) 15.75% 55.25%, var(--w6) 16.6% 58.25%, var(--w8) 21.475% 54%,
		var(--w8) 23.35% 65.5%, var(--w5) 13.85% 62.25%, var(--w6) 19.35% 65.25%,
		var(--w6) 22.45% 54%, var(--w7) 22.35% 68.15%, var(--w8) 35.35% 55.25%,
		var(--w8) 34.1% 61.25%, var(--w7) 33.1% 84%, var(--w5) 32.35% 73.25%,
		var(--w6) 47.35% 71.25%, var(--w5) 51.5% 82.25%, var(--w8) 41.55% 50%,
		var(--w6) 42.5% 50%, var(--w7) 38.95% 65%, var(--w8) 44.5% 68%,
		var(--w6) 40.55% 50%, var(--w5) 44.85% 59%, var(--w7) 53.25% 66%,
		var(--w8) 49.55% 60%, var(--w6) 50.55% 70%, var(--w5) 53.75% 74%,
		var(--w5) 51.55% 70%, var(--w6) 51.55% 76%, var(--w7) 62.4% 67%,
		var(--w7) 54.75% 57%, var(--w8) 63% 55.5%, var(--w5) 70.5% 66%,
		var(--w6) 68.5% 69%, var(--w7) 70% 51%, var(--w8) 71% 51%, var(--w7) 68.5% 54%,
		var(--w6) 77% 74%, var(--w7) 72% 61%, var(--w5) 78% 55%, var(--w6) 78% 57%,
		var(--w6) 88% 66%, var(--w5) 93.35% 27.5%, var(--w5) 91% 32%,
		var(--w8) 89% 66%, var(--w8) 91% 34.5%, var(--w7) 91% 37%, var(--w7) 91% 41%,
		var(--w6) 99% 86%, var(--w6) 92% 39%, var(--w5) 92% 43%, var(--w7) 93.5% 55%,
		var(--w5) 93% 46%, linear-gradient(75deg, #150e21, #0f0323), #0f0323;

	background-size: 1vw 1vh, 1vw 1.5vh, 1vw 1vh, 1vw 1vh, 1vw 2vh, 1vw 2vh,
		1.15vw 1.25vh, 0.5vw 0.75vh, 1vw 2vh, 0.51vw 1vh, 1vw 1vh, 1vw 2vh, 1vw 1vh,
		1vw 2vh, 1vw 1vh, 1vw 1vh, 1vw 1vh, 0.5vw 1vh, 1vw 2vh, 1vw 1vh, 1vw 1.5vh,
		1vw 2vh, 0.5vw 0.5vh, 1vw 1vh, 1vw 1vh, 0.75vw 1vh, 1vw 1vh, 0.75vw 1.2vh,
		1vw 1vh, 1vw 1vh, 0.75vw 2vh, 1vw 1.25vh, 0.75vw 1vh, 0.5vw 1vh, 1vw 1vh,
		1vw 0.5vh, 1vw 1vh, 1vw 2vh, 1vw 1.25vh, 1.2vw 1.2vh, 0.75vw 1vh, 1vw 2vh,
		1vw 2vh, 1vw 1vh, 1vw 1vh, 1vw 2vh, 1vw 2vh, 1vw 1.5vh, 1vw 1vh, 1vw 2vh,
		1vw 1vh, 0.5vw 1.25vh, 1vw 1.25vh, 1vw 2vh, 1vw 1vh, 1vw 1.2vh, 100% 100%;

	clip-path: polygon(
		0% 100%,
		0% 100%,
		100% 100%,
		100% 100%,
		100% 65%,
		100% 65%,
		97% 65%,
		97% 65%,
		97% 63%,
		97% 63%,
		95% 64%,
		95% 64%,
		94% 32%,
		94% 32%,
		94% 31%,
		94% 31%,
		94% 28%,
		94% 28%,
		93% 23%,
		93% 23%,
		92% 9%,
		92% 9%,
		92% 23%,
		92% 23%,
		91% 28%,
		91% 28%,
		91% 31%,
		91% 31%,
		90% 32%,
		90% 32%,
		90% 64%,
		90% 64%,
		87% 64%,
		87% 64%,
		87% 67%,
		87% 67%,
		86% 67%,
		86% 67%,
		85% 65%,
		85% 67%,
		84% 65%,
		84% 65%,
		84% 66%,
		84% 66%,
		82% 64%,
		85% 70%,
		83% 57%,
		83% 57%,
		81% 58%,
		81% 58%,
		80% 54%,
		81% 54%,
		81% 54%,
		80% 54%,
		80% 51%,
		80% 52%,
		79% 51%,
		79% 51%,
		79% 49%,
		79% 49%,
		79% 48%,
		79% 48%,
		79% 50%,
		79% 50%,
		78% 50%,
		78% 50%,
		78% 53%,
		78% 53%,
		77% 54%,
		77% 54%,
		77% 65%,
		77% 65%,
		75% 65%,
		75% 65%,
		74% 63%,
		74% 63%,
		73% 63%,
		73% 63%,
		73% 54%,
		73% 54%,
		72% 53%,
		72% 53%,
		72% 50%,
		72% 50%,
		69% 50%,
		69% 50%,
		69% 53%,
		69% 53%,
		66% 53%,
		66% 53%,
		66% 55%,
		66% 55%,
		66% 55%,
		66% 55%,
		66% 58%,
		66% 58%,
		65% 58%,
		65% 58%,
		64% 62%,
		64% 61%,
		64% 62%,
		64% 62%,
		64% 54%,
		64% 54%,
		59% 54%,
		60% 54%,
		59% 53%,
		59% 53%,
		58% 53%,
		58% 53%,
		58% 52%,
		58% 52%,
		56% 52%,
		56% 52%,
		56% 53%,
		56% 53%,
		55% 53%,
		55% 53%,
		54% 56%,
		55% 56%,
		53% 56%,
		53% 56%,
		53% 58%,
		53% 58%,
		52% 58%,
		52% 58%,
		51% 54%,
		51% 54%,
		50% 54%,
		50% 54%,
		49% 50%,
		49% 50%,
		47% 50%,
		47% 50%,
		47% 52%,
		47% 52%,
		47% 55%,
		47% 55%,
		47% 63%,
		47% 63%,
		46% 64%,
		46% 64%,
		46% 57%,
		46% 57%,
		45% 57%,
		45% 57%,
		45% 49%,
		45% 49%,
		44% 48%,
		44% 49%,
		44% 46%,
		45% 46%,
		40% 46%,
		41% 46%,
		40% 49%,
		40% 49%,
		39% 49%,
		39% 49%,
		39% 56%,
		39% 56%,
		39% 56%,
		39% 56%,
		38% 53%,
		38% 53%,
		37% 54%,
		35% 54%,
		35% 60%,
		35% 60%,
		34% 60%,
		34% 60%,
		33% 48%,
		33% 48%,
		30% 48%,
		30% 48%,
		30% 45%,
		30% 42%,
		29% 43%,
		29% 45%,
		29% 47%,
		29% 47%,
		29% 47%,
		29% 47%,
		29% 59%,
		28% 59%,
		28% 59%,
		28% 59%,
		28% 52%,
		28% 52%,
		25% 52%,
		25.25% 52%,
		25% 38%,
		25% 38%,
		23% 40%,
		24% 40%,
		20% 40%,
		20% 40%,
		18% 38%,
		18% 38%,
		17.75% 53%,
		18% 53%,
		17% 53%,
		17% 53%,
		17% 54%,
		17% 54%,
		16% 53%,
		16% 53%,
		16% 44%,
		16% 44%,
		12% 44%,
		12% 44%,
		12% 53%,
		12% 53%,
		11% 53%,
		12% 53%,
		11% 47%,
		11% 47%,
		10% 47%,
		10% 47%,
		10% 45%,
		10% 45%,
		9% 45%,
		9% 45%,
		9% 48%,
		9% 48%,
		8% 48%,
		8% 48%,
		8% 51%,
		8% 51%,
		6% 53%,
		6% 53%,
		6% 63%,
		5% 63%,
		4% 61%,
		4% 62%,
		4% 53%,
		4% 53%,
		0% 50%,
		0% 50%,
		0% 95%,
		0% 100%
	);
}

.skyline:before {
	content: "CLICK \0026  HOLD TO CALL BATMAN";
	position: absolute;
	width: 100%;
	bottom: 2.25vmin;
	text-align: center;
	color: #292545;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	animation: call 3s ease 0s 1;
	transition: all 0.5s ease 0s;
}

body:active .skyline:before {
	opacity: 0;
	animation: call 3s ease 0s 1;
	transition: all 0.5s ease 0s;
}

.light + .skyline {
	height: 60vh;
	background: var(--w1) 10.5% 72%, var(--w2) 2.05% 69.25%, var(--w3) 3.25% 64.85%,
		var(--w4) 12.5% 61.25%, var(--w1) 10.55% 47%, var(--w2) 9.35% 50.25%,
		var(--w3) 6% 77.25%, var(--w4) 13.6% 85.25%, var(--w1) 12.475% 39%,
		var(--w2) 8.35% 65.25%, var(--w3) 9.35% 55.25%, var(--w4) 10.5% 55.25%,
		var(--w1) 11.55% 26%, var(--w2) 12.5% 35.15%, var(--w3) 7.35% 40.25%,
		var(--w4) 8.5% 32.25%, var(--w1) 20% 72%, var(--w2) 17.35% 74.25%,
		var(--w3) 17.35% 77.25%, var(--w4) 21.5% 82.25%, var(--w1) 29.55% 49%,
		var(--w1) 28% 54%, var(--w4) 27.95% 73%, var(--w3) 24.5% 78%,
		var(--w4) 30.55% 49%, var(--w3) 30.55% 63%, var(--w1) 29.25% 66%,
		var(--w2) 26.55% 60%, var(--w2) 34.55% 70%, var(--w4) 35.75% 73%,
		var(--w3) 34.55% 73%, var(--w1) 34.55% 76%, var(--w1) 47.85% 79%,
		var(--w2) 46.75% 79%, var(--w3) 41.75% 72.5%, var(--w4) 40.5% 76%,
		var(--w2) 60.5% 69%, var(--w3) 58% 54%, var(--w4) 59% 58%, var(--w1) 60.5% 49%,
		var(--w3) 73% 74%, var(--w4) 63.85% 62%, var(--w1) 65% 65%, var(--w2) 69% 75%,
		var(--w4) 92% 68%, var(--w1) 95.5% 58%, var(--w2) 94% 58%, var(--w3) 88% 75%,
		var(--w4) 81% 68.5%, var(--w2) 79.5% 55%, var(--w2) 83% 51%, var(--w1) 83% 72%,
		var(--w3) 60.15% 36%, var(--w1) 59% 40%, var(--w2) 57.75% 36%,
		var(--w1) 57% 46%, linear-gradient(20deg, #030510, #000);

	background-size: 1vw 1.2vh, 0.7vw 1vh, 0.7vw 1vh, 1vw 1.2vh, 1vw 1.2vh,
		1vw 1.2vh, 1vw 1vh, 1vw 1vh, 1vw 1vh, 1vw 1.2vh, 1vw 1.2vh, 1vw 1.2vh, 1vw 1vh,
		1vw 1vh, 1vw 1vh, 1vw 1vh, 1vw 1vh, 0.5vw 1vh, 0.5vw 1vh, 0.751vw 1vh,
		0.75vw 1.5vh, 0.75vw 1.5vh, 0.75vw 1.5vh, 0.75vw 1.5vh, 0.75vw 1.5vh,
		0.75vw 1.5vh, 0.75vw 1.5vh, 0.75vw 1.5vh, 1vw 1vh, 1vw 1vh, 1vw 1vh, 1vw 1vh,
		1vw 1.2vh, 1vw 1.2vh, 1vw 2vh, 1vw 1vh, 1vw 1vh, 1vw 1vh, 1vw 1vh, 1vw 1vh,
		1vw 2vh, 0.7vw 1vh, 0.7vw 1vh, 0.8vw 1.2vh, 1vw 1.2vh, 0.8vw 1vh, 0.81vw 1vh,
		1vw 1vh, 1vw 1.3vh, 1vw 1.3vh, 1vw 1.3vh, 1vw 1.3vh, 1vw 1vh, 1vw 1vh, 1vw 1vh,
		1vw 1vh, 100% 100%;

	clip-path: polygon(
		100% 99%,
		100% 86%,
		98% 87%,
		98% 81%,
		97% 81%,
		97% 52%,
		95% 53%,
		95% 42%,
		94% 42%,
		94% 54%,
		91% 54%,
		92% 66%,
		91% 66%,
		91% 81%,
		90% 81%,
		90% 90%,
		89% 90%,
		89% 73%,
		87% 68%,
		86% 68%,
		85% 70%,
		84% 41%,
		83% 41%,
		79% 53%,
		78% 52%,
		78% 78%,
		76% 77%,
		76% 64%,
		75% 64%,
		75% 67%,
		72% 66%,
		72% 80%,
		71% 80%,
		71% 83%,
		71% 83%,
		70% 76%,
		70% 76%,
		70% 71%,
		66% 72%,
		66% 59%,
		65% 56%,
		65% 53%,
		64% 54%,
		63% 59%,
		63% 73%,
		62% 73%,
		62% 32%,
		55% 32%,
		56% 76%,
		55% 77%,
		55% 80%,
		53% 80%,
		52% 88%,
		51% 88%,
		51% 85%,
		50% 84%,
		50% 75%,
		49% 75%,
		48% 72%,
		47% 72%,
		47% 75%,
		45% 75%,
		45% 85%,
		44% 84%,
		44% 80%,
		43% 79%,
		43% 71%,
		42% 68%,
		39% 68%,
		37% 80%,
		37% 68%,
		34% 68%,
		34% 80%,
		34% 81%,
		34% 84%,
		33% 84%,
		33% 77%,
		32% 77%,
		32% 63%,
		32% 63%,
		32% 48%,
		31% 46%,
		30% 40%,
		29% 36%,
		29% 32%,
		29% 25%,
		28% 32%,
		28% 36%,
		28% 40%,
		27% 46%,
		26% 48%,
		26% 62%,
		26% 63%,
		26% 75%,
		24% 76%,
		24% 82%,
		23% 82%,
		23% 80%,
		22% 80%,
		22% 72%,
		21% 69%,
		20% 69%,
		19% 72%,
		17% 72%,
		17% 82%,
		17% 86%,
		15% 86%,
		15% 75%,
		14% 75%,
		15% 42%,
		14% 42%,
		14% 34%,
		13% 34%,
		13% 25%,
		12% 25%,
		12% 23%,
		11% 23%,
		11% 17%,
		10% 17%,
		10% 0%,
		10% 16%,
		9% 17%,
		9% 24%,
		8% 26%,
		9% 26%,
		8% 26%,
		8% 35%,
		7% 35%,
		7% 42%,
		7% 42%,
		7% 75%,
		6% 75%,
		6% 88%,
		5% 88%,
		5% 85%,
		4% 84%,
		5% 63%,
		2% 63%,
		2% 85%,
		1% 86%,
		1% 80%,
		1% 80%,
		1% 71%,
		0% 69%,
		0% 100%
	);
}

@keyframes call {
	0%,
	80% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@media only screen and (orientation: portrait) {
	.light {
		transform: rotate(-15deg);
	}
	#batman-logo {
		transform: scale(1.15) rotate(17deg);
		left: 2.5vmin;
	}
	.light:before {
		border-top: 250vmin solid #fff4d2;
	}
}

/*** BATMAN ***/

.batman {
	position: absolute;
	background-size: cover;
	width: 45vmin;
	height: 33vmin;
	z-index: 333;
	top: 0vh;
	right: 3vmin;
	transform: scale(0.5);
	transform-origin: right bottom;
}

/*
body:active .batman {
	transform: scale(0.75);
	transition: 1s ease 0.25s;
}
*/

.batman * {
	position: absolute;
}

.head {
	background: #000;
	width: 4.5vmin;
	height: 5vmin;
	top: 2%;
	transform: rotate(-55deg);
	border-radius: 63% 39% 63% 10%;
	transform-origin: center bottom;
	left: 13%;
	transition: 1s ease 0.25s;
}

body:active .batman .head {
	transform: rotate(-15deg);
	transition: 1s ease 0.25s;
}

.head:before {
	content: "";
	background: #000;
	width: 2vmin;
	height: 2vmin;
	position: absolute;
	left: 41%;
	top: 67%;
	transform: rotate(22deg);
}

.head:after {
	content: "";
	background: #000;
	width: 2vmin;
	height: 2vmin;
	position: absolute;
	left: 65%;
	top: 6%;
	transform: rotate(17deg);
	border-radius: 10% 50% 0 0;
}

.ears {
	width: 2vmin;
	height: 2vmin;
	top: -17%;
	left: 71%;
}

.ears span {
	border: 1vmin solid transparent;
	border-right-color: #000;
	left: -20%;
	top: 6%;
}

.ears span + span {
	left: -38%;
	border-width: 0.75vmin;
	transform: rotate(-9deg);
}

.nose {
	border: 1.25vmin solid transparent;
	border-bottom-color: #000;
	transform: rotate(3deg);
	left: -5px;
	border-radius: 0.25vmin;
}

.mouth {
	background: #000;
	width: 1vmin;
	height: 0.5vmin;
	border-radius: 100%;
	left: -2%;
	top: 55%;
}

.body {
	width: 8vmin;
	height: 14vmin;
	left: 11%;
	top: 13%;
}

.body span:nth-child(1):before {
	content: "";
	width: 2.5vmin;
	height: 3vmin;
	background: #000;
	position: absolute;
	border-radius: 100%;
	transform: rotate(-20deg);
	left: 11%;
	top: -3%;
}

.body span {
	width: 5vmin;
	height: 7vmin;
	background: #000;
	border-radius: 100%;
	left: 12%;
	top: 4%;
	transform: rotate(32deg);
}

.body span + span {
	height: 8vmin;
	border-radius: 46%;
	left: 8%;
	top: 25%;
	transform: rotate(-5deg);
}

.body span + span + span {
	height: 3vmin;
	left: 10%;
	top: 67%;
}

.leg {
	width: 12vmin;
	height: 17vmin;
	top: 49%;
	left: 6%;
}

.leg span {
	background: #000;
	width: 3.5vmin;
	height: 7vmin;
	top: 1%;
	left: 22%;
	transform: rotate(8deg);
	border-radius: 20%;
}

.leg span + span {
	height: 2.75vmin;
	top: 32%;
	left: 18%;
	border-radius: 100%;
	transform: rotate(-28deg);
}

.leg span + span + span {
	width: 2.75vmin;
	height: 5vmin;
	top: 43%;
	left: 20%;
	border-radius: 5% 5% 35% 30%;
	transform: rotate(1deg);
	background: #000;
}

.leg span + span + span + span {
	width: 2.25vmin;
	height: 6vmin;
	top: 65%;
	left: 17%;
	border-radius: 0 0 40% 0;
	transform: rotate(10deg);
}

.leg + .leg {
	left: 9%;
	transform: rotate(-8deg);
	transform-origin: center top;
}

.leg + .leg span:nth-child(4) {
	transform: rotate(-14deg);
	left: 29%;
}

.foot {
	background: #000;
	width: 4.5vmin;
	height: 2vmin;
	border-radius: 100% 30% 10% 10%;
	top: 97%;
	left: 5%;
}

.foot + .foot {
	left: 18%;
	transform: rotate(-8deg);
}

.cape {
	width: 34.5vmin;
	height: 25vmin;
	top: 14%;
	left: 20%;
	overflow: hidden;
	transform: rotate(-2deg);
	transform-origin: left top;
	animation: up-down 5s ease-in-out 0s infinite alternate;
}

@keyframes up-down {
	30% {
		transform: rotate(2deg);
	}
	65% {
		transform: rotate(17deg);
	}
}

.cape-shape {
	background: #000;
	width: 36vmin;
	height: 26.5vmin;
	top: -0.75vmin;
	left: -0.5vmin;
	clip-path: polygon(
		0% 2%,
		2% 2%,
		4% 4%,
		7% 8%,
		11% 12%,
		19% 18%,
		25% 21%,
		35% 25%,
		45% 27%,
		54% 30%,
		59% 28%,
		65% 27%,
		68% 26%,
		72% 28%,
		75% 29%,
		79% 34%,
		82% 37%,
		87% 39%,
		91% 43%,
		95% 47%,
		97% 50%,
		88% 46%,
		83% 45%,
		79% 46%,
		77% 48%,
		76% 50%,
		76% 52%,
		77% 52%,
		79% 54%,
		82% 56%,
		85% 59%,
		79% 58%,
		75% 58%,
		72% 59%,
		71% 60%,
		71% 61%,
		70% 63%,
		71% 67%,
		72% 70%,
		74% 76%,
		76% 81%,
		79% 86%,
		81% 88%,
		84% 91%,
		87% 95%,
		79% 92%,
		69% 89%,
		63% 84%,
		58% 81%,
		55% 78%,
		54% 78%,
		54% 79%,
		55% 81%,
		61% 96%,
		57% 94%,
		52% 89%,
		48% 86%,
		45% 85%,
		43% 84%,
		42% 85%,
		40% 86%,
		38% 85%,
		36% 83%,
		33% 80%,
		31% 78%,
		29% 78%,
		27% 78%,
		26% 79%,
		26% 82%,
		26% 85%,
		28% 88%,
		30% 94%,
		26% 91%,
		24% 88%,
		22% 87%,
		21% 88%,
		21% 90%,
		21% 95%,
		21% 97%,
		22% 98%,
		18% 97%,
		16% 94%,
		13% 84%,
		10% 72%,
		6% 66%,
		3% 63%,
		0% 58%
	);
	transform: rotate(0deg);
	transition: 2s ease 0s;
	animation: wind 5s ease 0s infinite, rota 0.43s ease 0s infinite alternate;
}

@keyframes rota {
	50% {
		transform: rotate(0.75deg);
	}
}

@keyframes wind {
	50% {
		clip-path: polygon(
			0% 1%,
			1% 1%,
			3% 3%,
			7% 5%,
			11% 8%,
			19% 9%,
			25% 11%,
			35% 11%,
			45% 10%,
			54% 9%,
			59% 8%,
			65% 10%,
			68% 14%,
			72% 18%,
			75% 22%,
			79% 28%,
			82% 34%,
			87% 39%,
			91% 43%,
			92% 47%,
			95% 50%,
			88% 46%,
			83% 45%,
			79% 46%,
			77% 48%,
			76% 50%,
			76% 52%,
			77% 52%,
			79% 54%,
			82% 55%,
			85% 57%,
			79% 58%,
			75% 59%,
			72% 62%,
			71% 63%,
			71% 65%,
			70% 66%,
			71% 67%,
			72% 70%,
			74% 76%,
			76% 81%,
			79% 86%,
			81% 87%,
			84% 92%,
			85% 100%,
			79% 95%,
			69% 89%,
			63% 84%,
			58% 81%,
			45% 58%,
			54% 78%,
			54% 79%,
			55% 81%,
			61% 96%,
			52% 88%,
			52% 89%,
			48% 86%,
			45% 85%,
			43% 84%,
			42% 89%,
			40% 86%,
			38% 85%,
			36% 83%,
			33% 80%,
			33% 81%,
			29% 78%,
			27% 78%,
			22% 72%,
			26% 82%,
			26% 85%,
			28% 88%,
			30% 94%,
			26% 91%,
			24% 88%,
			22% 87%,
			21% 88%,
			21% 90%,
			21% 95%,
			21% 98%,
			22% 100%,
			19% 95%,
			17% 91%,
			13% 84%,
			8% 75%,
			6% 66%,
			3% 63%,
			0% 58%
		);
	}
}

.watchtower {
	width: 44vmin;
	height: 25%;
	background: #000;
	bottom: -9vmin;
	transform: rotate(0deg);
	right: -6vmin;
}

.watchtower:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	left: -8vmin;
	top: 0vmin;
	border: 4vmin solid #fff0;
	border-color: #000 #000 #fff0 #fff0;
}

.watchtower:after {
	content: "";
	position: absolute;
	width: 30%;
	height: 200%;
	background: #000;
	top: -2vmin;
	border-radius: 5% 0 0 150%;
	right: 0;
}

.watchtower span {
	background: black;
	width: 3vmin;
	height: 1vmin;
	top: 31%;
	left: -6vmin;
	box-shadow: 3vmin 3vmin 0 0vmin;
}

.watchtower span + span {
	background: black;
	left: 13vmin;
	position: absolute;
	top: 14vmin;
	box-shadow: none;
	width: 100%;
	transform: rotate(34deg);
	height: 2vmin;
}

.watchtower span + span:before {
	content: "";
	background: black;
	width: 2vmin;
	height: 3vmin;
	position: absolute;
	right: 20vmin;
	top: -3vmin;
}
</style>
</head>
<body>
  <div class="sky">
	<div class="moon"></div>
</div>

<div class="skyline"></div>

<div class="light">
	<!--
	Batman logo by Stephen Greig:
	http://tangledindesign.com/famous-logos-in-css3-the-dark-knight/
-->
	<div id="batman-logo">
		<div id="left-white"></div>
		<div id="right-white"></div>
		<div id="top-white"></div>
	</div>

</div>

<div class="skyline"></div>

<div class="batman">
	<div class="head">
		<div class="ears">
			<span></span>
			<span></span>
		</div>
		<div class="nose"></div>
		<div class="mouth"></div>
	</div>
	<div class="body">
		<span></span>
		<span></span>
		<span></span>
	</div>
	<div class="leg">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
	<div class="leg">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
	<div class="foot"></div>
	<div class="foot"></div>
	<div class="cape">
		<div class="cape-shape"></div>
	</div>
	<div class="watchtower">
		<span></span>
		<span></span>
	</div>
</div>
</body>
</html>

11. By JoΓ£o Santos

Made by JoΓ£o Santos. Animated CSS Nintendo Switch Logo. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
html, body {
  height: 100%;
  font-size: 10px;
}

body {
  background: #E80000;
  font-size: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nintendo-switch {
  width: 46em;
  height: 46em;
  position: relative;
}
.nintendo-switch:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 22.2em;
  height: 100%;
  box-sizing: border-box;
  border: solid 3.7em #fff;
  border-top-left-radius: 12em;
  border-bottom-left-radius: 12em;
  border-top-right-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
  background: radial-gradient(circle, #fff 50%, transparent 51%) top 4em left 2em no-repeat;
  background-size: 12em 12em;
}
.nintendo-switch:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 19em;
  height: 100%;
  box-sizing: border-box;
  border-top-right-radius: 12em;
  border-bottom-right-radius: 12em;
  border-top-left-radius: 0.4em;
  border-bottom-left-radius: 0.4em;
  background: #fff radial-gradient(circle, #E80000 53%, transparent 54%) bottom 14.8em right 4em no-repeat;
  background-size: 12em 12em;
}
.nintendo-switch:hover {
  cursor: pointer;
}
.nintendo-switch:hover:after {
  -webkit-animation: bounce 1s linear both;
          animation: bounce 1s linear both;
}

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
@media all and (max-width: 480px) {
  body {
    font-size: 0.5em;
  }
}
</style>
</head>
<body>
  <div class="nintendo-switch"></div>
</body>
</html>

12. By Steven Fabre

Made by Steven Fabre. Campaign Monitor Logo with Hover Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/* Colors */
/* Ratios */
/* Sizes */
body {
  background: #2f353e;
}

#logo {
  width: 120px;
  height: 79px;
  margin: 0 auto;
  position: absolute;
  overflow: hidden;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  top: 50%;
  left: 50%;
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}
#logo:hover .rectangle-1 {
  background: #7ebd26;
}
#logo:hover .rectangle-3 {
  background: #BADA41;
}
#logo .rectangle-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 79px;
  background: #19a9e5;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}
#logo .rectangle-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 240px;
  height: 79px;
  -moz-transform: translateY(-96px) rotate(34deg);
  -ms-transform: translateY(-96px) rotate(34deg);
  -webkit-transform: translateY(-96px) rotate(34deg);
  transform: translateY(-96px) rotate(34deg);
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  background: #2f353e;
}
#logo .rectangle-3 {
  position: absolute;
  top: 0;
  right: 0;
  width: 144px;
  height: 79px;
  -moz-transform: rotate(-34deg);
  -ms-transform: rotate(-34deg);
  -webkit-transform: rotate(-34deg);
  transform: rotate(-34deg);
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  -webkit-transform-origin: right top;
  transform-origin: right top;
  background: #72d0eb;
}
#logo .rectangle-4 {
  position: absolute;
  bottom: -158px;
  left: -180px;
  width: 360px;
  height: 158px;
  background: #2f353e;
}
#logo .rectangle-5 {
  position: absolute;
  top: 0;
  right: -120px;
  width: 120px;
  height: 118.5px;
  background: #2f353e;
}
</style>
</head>
<body>
  <a href="https://www.campaignmonitor.com" id="logo">
    <div class="rectangle-1">
    </div>
    <div class="rectangle-2">
    </div>
    <div class="rectangle-3">
    </div>
    <div class="rectangle-4">
    </div>
    <div class="rectangle-5">
    </div>
</a>
</body>
</html>

13. By Tristan White

Made by Tristan White. Animated Cube Logo. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
#logo {
  position: relative;
  height: 200px;
  width: 300px;
  padding: 0;
  margin: 75px auto;
  transform: scale(1);
}
#logo .cube-1, #logo .cube-2, #logo .cube-3 {
  -webkit-animation: rotate 7000ms linear infinite;
          animation: rotate 7000ms linear infinite;
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateY(45deg) rotateX(80deg) rotateZ(-90deg);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#logo .cube-1 .face, #logo .cube-2 .face, #logo .cube-3 .face {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
#logo .cube-1 {
  left: 15%;
  top: 28%;
  height: 100px;
  width: 100px;
}
#logo .cube-1 .front {
  background: #28e1bd;
  transform: translateZ(50px);
}
#logo .cube-1 .back {
  background: #1dd2af;
  transform: translateZ(-50px);
}
#logo .cube-1 .left {
  background: #1abc9c;
  transform: translateX(-50px) rotateY(90deg);
}
#logo .cube-1 .right {
  background: #18af91;
  transform: translateX(50px) rotateY(90deg);
}
#logo .cube-1 .top {
  background: #169f84;
  transform: translateY(-50px) rotateX(90deg);
}
#logo .cube-1 .bottom {
  background: #148f77;
  transform: translateY(50px) rotateX(90deg);
}
#logo .cube-2 {
  left: 67%;
  top: 38%;
  height: 65px;
  width: 65px;
}
#logo .cube-2 .front {
  background: #ff7e55;
  transform: translateZ(32.5px);
}
#logo .cube-2 .back {
  background: #ff6a3c;
  transform: translateZ(-32.5px);
}
#logo .cube-2 .left {
  background: #ff5722;
  transform: translateX(-32.5px) rotateY(90deg);
}
#logo .cube-2 .right {
  background: #ff4b13;
  transform: translateX(32.5px) rotateY(90deg);
}
#logo .cube-2 .top {
  background: #ff3e01;
  transform: translateY(-32.5px) rotateX(90deg);
}
#logo .cube-2 .bottom {
  background: #ee3900;
  transform: translateY(32.5px) rotateX(90deg);
}
#logo .cube-3 {
  left: 60%;
  top: 7%;
  height: 35px;
  width: 35px;
}
#logo .cube-3 .front {
  background: #7d8bd5;
  transform: translateZ(17.5px);
}
#logo .cube-3 .back {
  background: #6a79ce;
  transform: translateZ(-17.5px);
}
#logo .cube-3 .left {
  background: #5768c8;
  transform: translateX(-17.5px) rotateY(90deg);
}
#logo .cube-3 .right {
  background: #4b5ec4;
  transform: translateX(17.5px) rotateY(90deg);
}
#logo .cube-3 .top {
  background: #3f52bf;
  transform: translateY(-17.5px) rotateX(90deg);
}
#logo .cube-3 .bottom {
  background: #3a4cb2;
  transform: translateY(17.5px) rotateX(90deg);
}
@-webkit-keyframes rotate {
  100% {
    transform: rotateY(360deg) rotateX(720deg) rotateZ(1080deg);
  }
}
@keyframes rotate {
  100% {
    transform: rotateY(360deg) rotateX(720deg) rotateZ(1080deg);
  }
}
</style>
</head>
<body>
  <div id="logo">
  <div class="cube-1">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face left"></div>
    <div class="face right"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
  </div>

  <div class="cube-2">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face left"></div>
    <div class="face right"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
  </div>

  <div class="cube-3">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face left"></div>
    <div class="face right"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
  </div>
</div>
</body>
</html>

14. By omar bourhaouta

Made by omar bourhaouta. Pure CSS Logo of LogoDust. Source

css logo by bourhaouta
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
:root {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #5a83f9;
  background-image: url("https://images.unsplash.com/photo-1430609098125-581618d0482f?ixlib=rb-0.3.5&q=80&fm=jpg");
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
}
.logo {
  position: relative;
  height: 190px;
  width: 210px;
  overflow: hidden;
}
.shapes:before,
.shapes:after {
  content: '';
  position: absolute;
}
.shapes:before {
  background-color: #fff;
  top: 0;
  right: 0;
  height: 135px;
  width: 67.5px;
  border-radius: 0 67.5px 67.5px 0;
}
.shapes:after {
  bottom: -12px;
  right: 0;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  border-width: 67px 0 0 67px;
}
.lines {
  height: inherit;
  width: 142.5px;
  overflow: hidden;
}
.dash {
  background-color: #fff;
  border-radius: 8.636363636363637px;
  height: inherit;
}
.line {
  display: flex;
  height: 17.272727272727273px;
}
.line .dash:last-child {
  flex: 1;
  margin: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.line-1 .dash {
  width: 22px;
  margin-right: 7px;
}
.line-1 .dash:first-child {
  width: 40px;
  margin-right: 18px;
}
.line-2 .dash {
  margin-left: 55%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex: 1;
}
.line-3 .dash:first-child {
  margin-left: 40px;
  width: 52px;
}
.line-3 .dash:last-child {
  margin-left: 10px;
}
.line-4 .dash:first-child {
  margin-left: 20px;
  width: 22px;
}
.line-4 .dash:last-child {
  margin-left: 10px;
}
.line-5 .dash:first-child {
  margin-left: 10px;
  width: 65px;
}
.line-5 .dash:last-child {
  margin-left: 35px;
}
.line-6 .dash:first-child {
  margin-left: 40px;
  width: 22px;
}
.line-6 .dash:last-child {
  margin-left: 5px;
}
.divider {
  height: 17.272727272727273px;
  border-radius: 8.636363636363637px;
  width: 95%;
  background-color: transparent;
  box-shadow: 20px 0 0 0 #fff;
}
</style>
</head>
<body>
  <div class="logo">
  <div class="lines">
    <div class="line line-1">
      <div class="dash"></div>
      <div class="dash"></div>
      <div class="dash"></div>
    </div>
    <div class="divider"></div>
    <div class="line line-2">
      <div class="dash"></div>
    </div>
    <div class="divider"></div>
    <div class="line line-3">
      <div class="dash"></div>
      <div class="dash"></div>
    </div>
    <div class="divider"></div>
    <div class="line line-4">
      <div class="dash"></div>
      <div class="dash"></div>
    </div>
    <div class="divider"></div>
    <div class="line line-5">
      <div class="dash"></div>
      <div class="dash"></div>
    </div>
    <div class="divider"></div>
    <div class="line line-6">
      <div class="dash"></div>
      <div class="dash"></div>
    </div>
  </div>
  <div class="shapes"></div>
</div>
</body>
</html>

15. By sunil chatterji

Made by Sunil chatterji. W3schools Logo. Source

css logo by sunil chatterji
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
.wrapper{
  margin:100px auto;
  width:100px;
  height:80px;
  border-radius:5px;
  background:#87c71d;
  position:relative;
}

.section1{
  position:absolute;
  top:19px;
  left:10px;
}

.hide{
  position:absolute;
  width:45px;
  height:10px;
  background:#87c71d;
  z-index:3;
}

.www{
  width:15px;
  height:15px;
  border-top:none;
   border:5px solid #fff;
  border-radius:15px;
  position:absolute;
}
 
.A{
  left:19px;  z-index:2;
}

.three{
  position:absolute;
  width:30px;
  height:30px;
  border:5px solid #fff;  
  border-radius:30px;
}

.C{
  left:50px;
  top:3px;
}

.D{
  left:50px;
  bottom:3px;
}

.hide2{
  position:absolute;
  width:19px;
  height:45px;
  background:#87c71d;
  top:20px;
  left:50px;
  z-index:1;
}

p{
  position:absolute;
  top:44px;
  left:3px;
  font-weight:bold;
  font-family:arial-bold;
  color:#ffffff;
  font-size:16px
}

font{
  font-size:9px;
  font-weight:bold;
  font-family: arial-bold;
  color:#fff;
  position:absolute;
  bottom:17px;
  left:47px;
  z-index:30;
}
</style>
</head>
<body>
  <div class="wrapper">
  <div class="section1">
    <div class="hide"></div>
    <div class="www A"></div>
    <div class="www B"></div>
  </div>
  <div class="section2">
    <div class="hide2"></div>
    <div class="three C"></div>
    <div class="three D"></div>
  </div>
  <p>schools</p>
  <font>TM</font>
</div>
</body>
</html>

16. By Yusuf BakΔ±r

Made by Yusuf BakΔ±r. A4 Logo. Source

css logo by yusuf bakir
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
.a4{
	width: 208px;
	height: 174px;
   overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
   transition:500ms;   
   -webkit-transition:500ms;
   -ms-transition:500ms;
}

.a4 .letter-a{
	width: 131px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}


.a4 .letter-a:after{
	content: "";
	width: 13px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: #fff;
}

.a4 .letter-a .first{
	position: absolute;
	top: 0;
	right: 0;
	width: 80px;
	height: 106px;
	background: #fff;
}


.a4 .letter-a .first .first-a{
	position: absolute;
	top: 40px;
	right: 13px;
	width: 40px;
	height: 53px;
	background: #231F20;
}

.a4 .letter-a .first:before,
.a4 .letter-a .first .first-a:before,
.a4 .letter-a .second:before,
.a4 .letter-a .second .second-a:before,
.a4 .letter-a .second .second-a:after{
	content: "";
	position: absolute;
	width: 100%;
	height: 250%;
	top: 0;
	left: 0;
	background: #231F20;
	transform: rotate(37deg);
	-webkit-transform: rotate(37deg);
	-ms-transform: rotate(37deg);
	transform-origin: 100% 0%;
	-webkit-transform-origin: 100% 0%;
	-ms-transform-origin: 100% 0%;
	z-index: 2;
}

.a4 .letter-a .first .first-a:before{
	background: #fff;
	z-index: 1;
	height: 130%;
}


.a4 .letter-a .second{
	width: 100%;
	height: 50px;
	background: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
}

.a4 .letter-a .second:before{
	height: 100%;
    top: 53px;
    left: -118px;
    transform: rotate(-142deg);
	-webkit-transform: rotate(-142deg);
	-ms-transform: rotate(-142deg);
}

.a4 .letter-a .second:after{
	content: "";
  	position: absolute;
  	right: 13px;
  	top: 13.5px;
  	height: 14px;
  	width: 56.3%;
  	background: rgba(35, 31, 32, 0.6);
  	z-index: 2;
}

.a4 .letter-a .second .second-a{
	position: absolute;
	bottom: -.4px;
	left: 50%;
	width: 74.5px;
	height: 37px;
	background: #fff;
	margin-left: -22px;
	z-index: 2;
	overflow: hidden;
}

.a4 .letter-a .second .second-a:before{
	top: -21px;
	left: -25px;
}
.a4 .letter-a .second .second-a:after{
	top: 16px;
	left: 58px;
}

.a4 .letter-4{
	width: 77px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
}

.a4 .letter-4:before{
	content: "";
    width: 13px;
    height: 100%;
    position: absolute;
    left: 29px;
    top: 0;
    background: #fff;
}
.a4 .letter-4:after{
	content: "";
    width: 16px;
    height: 100%;
    position: absolute;
    left: 42px;
    top: 0;
    background: rgba(35, 31, 32, 0.6);
  	z-index: 2;
}

.a4 .letter-4 .first{
	position: absolute;
	right: 0;
	top: 0;
	width: 38px;
	height: 100%;
}

.a4 .letter-4 .first:before,
.a4 .letter-4 .first:after{
	content: "";
	width: 38px;
	height: 13px;
	background: #fff;
	position: absolute;
	top: 93px;
	left: 0;
}

.a4 .letter-4 .first:after{
	top: 125px
}

body{
	background: #231F20;
}

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin:0;
    padding:0;
   	text-decoration:none;
}
</style>
</head>
<body>
  <div class="a4">
   <div class="letter-a">
      <span class="first">
				         <span class="first-a"></span>
      </span>
      <span class="second">
         				<span class="second-a"></span>
      </span>
   </div>
   <div class="letter-4">
      <span class="first"></span>
   </div>
</div>
</body>
</html>

17. By Philip Da Silva

Made by Philip Da Silva. Codepen.io Logo with Hover Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body, html {
  background-image: linear-gradient(90deg, #1d1f20, #2f3031, #1d1f20);
  height: 100%;
}

div.codepen {
  display: block;
  position: relative;
  top: 50%;
  height: 16em;
  width: 16em;
  margin: -8em auto 0;
  border-radius: 8em;
  background-color: #121212;
  cursor: pointer;
  transition: color 0.8s linear, background 0.8s linear, box-shadow 0.1s linear, transform 0.1s linear;
}
div.codepen:hover {
  background-color: #DCDCDC;
}
div.codepen::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -4.5em 0 0 -0.4em;
  height: 0.8em;
  width: 0.8em;
  line-height: 0.8em;
  border-radius: 0.35em;
  outline: 1px solid transparent;
  color: #FFF;
  background: #FFF;
  overflow: visible;
  transform: rotate(42.5deg) skew(-15deg, -10deg);
  filter: blur(0);
  box-shadow: 0.3em 0 0, 0.6em 0 0, 0.9em 0 0, 1.2em 0 0, 1.5em 0 0, 1.8em 0 0, 2.1em 0 0, 2.4em 0 0, 2.7em 0 0, 3em 0 0, 3.3em 0 0, 3.6em 0 0, 3.9em 0 0, 4.2em 0 0, 4.5em 0 0, 4.6em 0 0, 4.95em 0 0, 4.95em 0.4em 0, 4.95em 0.6em 0, 4.95em 0.9em 0, 4.95em 1.2em 0, 4.95em 1.5em 0, 4.95em 1.8em 0, 4.95em 2.1em 0, 4.95em 2.4em 0, 4.95em 2.7em 0, 4.95em 3em 0, 4.95em 3.3em 0, 4.95em 3.6em 0, 4.95em 3.9em 0, 4.95em 4.2em 0, 4.95em 4.5em 0, 4.95em 4.8em 0, 0 0.3em 0, 0 0.6em 0, 0 0.9em 0, 0 1.2em 0, 0 1.5em 0, 0 1.8em 0, 0 2.1em 0, 0 2.4em 0, 0 2.7em 0, 0 3em 0, 0 3.3em 0, 0 3.6em 0, 0 3.9em 0, 0 4.2em 0, 0 4.5em 0, 0em 4.85em 0, 0.4em 4.9em 0, 0.6em 4.9em 0, 0.9em 4.9em 0, 1.2em 4.9em 0, 1.5em 4.9em 0, 1.8em 4.9em 0, 2.1em 4.9em 0, 2.4em 4.9em 0, 3em 4.9em 0, 3.3em 4.9em 0, 3.6em 4.9em 0, 3.9em 4.9em 0, 4.2em 4.9em 0, 4.5em 4.9em 0, 4.8em 4.9em 0, 4.9em 4.9em 0, 2.6em 2.5em 0, 2.9em 2.5em 0, 3.1em 2.5em 0, 3.4em 2.5em 0, 3.7em 2.5em 0, 4em 2.5em 0, 4.3em 2.5em 0, 4.6em 2.5em 0, 4.9em 2.5em 0, 5.1em 2.5em 0, 5.4em 2.5em 0, 5.7em 2.5em 0, 6em 2.5em 0, 6.3em 2.5em 0, 6.5em 2.5em 0, 6.8em 2.5em 0, 7.1em 2.56em 0, 7.2em 2.56em 0, 7.45em 2.5em 0, 7.45em 2.8em 0, 7.45em 2.9em 0, 7.45em 3.2em 0, 7.45em 3.5em 0, 7.45em 3.8em 0, 7.45em 4.1em 0, 7.45em 4.4em 0, 7.45em 4.7em 0, 7.45em 5em 0, 7.45em 5.3em 0, 7.45em 5.6em 0, 7.45em 5.9em 0, 7.45em 6.2em 0, 7.45em 6.5em 0, 7.45em 6.8em 0, 7.45em 7.1em 0, 2.6em 2.9em 0, 2.6em 3.2em 0, 2.6em 3.5em 0, 2.6em 3.8em 0, 2.6em 4.1em 0, 2.6em 4.4em 0, 2.6em 4.7em 0, 2.6em 5em 0, 2.6em 5.3em 0, 2.6em 5.6em 0, 2.6em 5.9em 0, 2.6em 6.2em 0, 2.6em 6.5em 0, 2.6em 6.8em 0, 2.6em 7em 0, 2.6em 7.35em 0, 2.9em 7.35em 0, 3.1em 7.35em 0, 3.4em 7.35em 0, 3.7em 7.35em 0, 4em 7.35em 0, 4.3em 7.35em 0, 4.6em 7.35em 0, 4.9em 7.35em 0, 5.2em 7.35em 0, 5.5em 7.35em 0, 5.8em 7.35em 0, 6.1em 7.35em 0, 6.4em 7.35em 0, 6.7em 7.35em 0, 7em 7.35em 0, 7.3em 7.35em 0, 7.45em 7.35em 0;
}
div.codepen::after {
  content: "";
  display: block;
  position: absolute;
  top: 3.8em;
  left: 50%;
  height: 3.15em;
  width: 0.8em;
  margin-left: -0.45em;
  border-radius: 0.4em;
  outline: 1px solid transparent;
  color: #FFF;
  background: #FFF;
  box-shadow: 4.45em 2.6em 0, -0.05em 5.4em 0, -4.4em 2.65em 0;
}
div.codepen:hover {
  box-shadow: 0 0 1em 0.1em rgba(0, 0, 0, 0.75);
  transform: scale(1.02);
}
div.codepen:hover::before, div.codepen:hover::after {
  color: #000;
  background: #000;
}
</style>
</head>
<body>
  <div class="codepen"></div>
</body>
</html>

18. By Fivera

Made by Fivera. Internet Explorer Logo using Pure CSS. Source

css logo by fivera
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  background-color: #fff;
	color: #000;
	font: 13px/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}


a { text-decoration: none; }
a:link,
a:visited { color: #C54E0B; }
a:focus,
a:hover,
a:active { color: #86180A; }

h3 { text-align: center; }

sup,
small { font-size: 0.7em; }

.wrapper {
  margin: 0 auto;
  position: relative;
  height: 600px;
  width: 700px;
}

.rendered {
  margin: 0 auto;
  height: 360px;
  width: 700px;
}

.wrapper p { margin: auto 0; }


#ie-icon,
#ie-icon div { position: absolute; }

#ie-icon {
  background: -moz-radial-gradient( center 0deg, circle closest-corner, #098dda 35%, #00163a 65%, rgba(0, 58, 104, 1) 100% );
  background: -webkit-gradient( radial, center center, 65, center center, 200, from(#098dda), color-stop(.95, #00163a), to(rgba(0, 58, 104, 1)) );
  background: radial-gradient( center 0deg, circle closest-corner, #098dda 35%, #00163a 65%, rgba(0, 58, 104, 1) 100% );
  height: 376px;
  left: 79px;
  top: 87px;
  width: 404px;
  
  -moz-border-radius: 202px / 188px;
  -webkit-border-radius: 202px 188px;
  border-radius: 202px / 188px;
  
  -moz-box-shadow:
    12px 5px 0px rgba(0, 13, 22, 1) inset, /* top left */
    -12px 5px 0px rgba(0, 13, 22, 1) inset, /* top right */
    12px 0px 0px rgba(0, 18, 49, 1) inset, /* bottom left */
    -12px 0px 5px rgba(0, 13, 49, 1) inset; /* bottom right */
  -webkit-box-shadow:
    12px 5px 0px rgba(0, 13, 22, 1) inset,
    -12px 5px 0px rgba(0, 13, 22, 1) inset,
    12px 0px 0px rgba(0, 18, 49, 1) inset,
    -12px 0px 5px rgba(0, 13, 49, 1) inset;
  box-shadow:
    12px 5px 0px rgba(0, 13, 22, 1) inset,
    -12px 5px 0px rgba(0, 13, 22, 1) inset,
    12px 0px 0px rgba(0, 18, 49, 1) inset,
    -12px 0px 5px rgba(0, 13, 49, 1) inset;

}


.icon-bg {
  background: -moz-linear-gradient( rgba(219, 227, 230, 1) 0%, rgba(4, 121, 176, 1) 25%, rgba(255, 255, 255, 0) 45%);
  /* -TODO */
  background: -webkit-gradient( linear, center center, center center, color-stop(0, (219, 227, 230, 1)), color-stop(0.45, rgba(4, 121, 176, 1)), color-stop(1, rgba(255, 255, 255, 0)) );
  background: linear-gradient( rgba(219, 227, 230, 1) 0%, rgba(4, 121, 176, 1) 25%, rgba(255, 255, 255, 0) 45%);
  height: 368px;
  left: 12px;
  top: 6px;
  width: 380px;
  
  -moz-border-radius: 190px / 184px;
  -webkit-border-radius: 190px 184px;
  border-radius: 190px / 184px;
  
  -moz-box-shadow: 3px -15px 17px rgba(0, 0, 40, 1) inset, -3px -15px 17px rgba(0, 0, 40, 1) inset;
  -webkit-box-shadow: 3px -15px 17px rgba(0, 0, 40, 1) inset, -3px -15px 17px rgba(0, 0, 40, 1) inset;
  box-shadow: 3px -15px 17px rgba(0, 0, 40, 1) inset, -3px -15px 17px rgba(0, 0, 40, 1) inset;
}


.spot {
  height: 50px;
  left: 120px;
  top: -60px;
  width: 140px;
  
  -moz-border-radius: 70px / 25px;
  -webkit-border-radius: 70px 25px;
  border-radius: 70px / 25px;
  
  -moz-box-shadow:
    0 355px 40px rgba(180, 242, 255, 1), /* bottom hightlight */
    0 350px 50px rgba(135, 234, 252, 1),
    40px 345px 50px rgba(138, 235, 252, .5),
    -40px 345px 50px rgba(138, 235, 252, .5),
    55px 340px 50px rgba(138, 235, 252, .5),
    -55px 340px 50px rgba(138, 235, 252, .5),
    65px 330px 50px rgba(41, 169, 234, .5),
    -65px 330px 50px rgba(41, 169, 234, .5),
    0 65px 15px rgba(255, 255, 255, .5), /* top hightlight */
    25px 75px 20px rgba(255, 255, 255, .3),
    -25px 75px 20px rgba(255, 255, 255, .3),
    45px 85px 20px rgba(255, 255, 255, .2),
    -45px 85px 20px rgba(255, 255, 255, .2),
    65px 95px 10px rgba(255, 255, 255, .1),
    -65px 95px 10px rgba(255, 255, 255, .1);
  -webkit-box-shadow:
    0 360px 40px rgba(180, 242, 255, 1), /* bottom hl */
    0 355px 50px rgba(135, 234, 252, 1),
    40px 350px 50px rgba(138, 235, 252, .5),
    -40px 350px 50px rgba(138, 235, 252, .5),
    55px 340px 50px rgba(138, 235, 252, .5),
    -55px 340px 50px rgba(138, 235, 252, .5),
    65px 330px 50px rgba(41, 169, 234, .5),
    -65px 330px 50px rgba(41, 169, 234, .5),
    0 65px 15px rgba(255, 255, 255, .5), /* top hl */
    25px 75px 20px rgba(255, 255, 255, .3),
    -25px 75px 20px rgba(255, 255, 255, .3),
    45px 85px 20px rgba(255, 255, 255, .2),
    -45px 85px 20px rgba(255, 255, 255, .2),
    65px 95px 10px rgba(255, 255, 255, .1),
    -65px 95px 10px rgba(255, 255, 255, .1);
  box-shadow:
    0 355px 40px rgba(180, 242, 255, 1), /* bottom hl */
    0 350px 50px rgba(135, 234, 252, 1),
    40px 345px 50px rgba(138, 235, 252, .5),
    -40px 345px 50px rgba(138, 235, 252, .5),
    55px 340px 50px rgba(138, 235, 252, .5),
    -55px 340px 50px rgba(138, 235, 252, .5),
    65px 330px 50px rgba(41, 169, 234, .5),
    -65px 330px 50px rgba(41, 169, 234, .5),
    0 65px 15px rgba(255, 255, 255, .5), /* top hl */
    25px 75px 20px rgba(255, 255, 255, .3),
    -25px 75px 20px rgba(255, 255, 255, .3),
    45px 85px 20px rgba(255, 255, 255, .2),
    -45px 85px 20px rgba(255, 255, 255, .2),
    65px 95px 10px rgba(255, 255, 255, .1),
    -65px 95px 10px rgba(255, 255, 255, .1);

}

.spot div:nth-of-type(7n+1),
.spot div:nth-of-type(8n+2) {
  background: -moz-linear-gradient( rgba(90, 136, 162, 0) 30%, rgba(18, 141, 188, 1) 100% );
  background: -webkit-gradient( linear, 0 50%, 30%, 0 50%, 100%, from(rgba(90, 136, 162, 0)), to(rgba(18, 141, 188, 1)) );
  background: linear-gradient( rgba(90, 136, 162, 0) 30%, rgba(18, 141, 188, 1) 100% );
  height: 136px;
  top: 75px;
  width: 80px;
  
  -moz-border-radius: 40px / 68px;
  -webkit-border-radius: 40px 68px;
  border-radius: 40px / 68px;
}


.spot div:nth-of-type(7n+1) {
  left: -76px;
  
  -moz-transform: rotate(50deg);
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
}

.spot div:nth-of-type(8n+2) {
  left: 137px;
  
  -moz-transform: rotate(-50deg);
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
}


.inside-edge-top,
.inside-edge-bottom,
.inside-edge-2-bottom {
  border-width: 3px;
  border-style: solid;
  -moz-border-top-colors: #2c81a8 #198dc5 #0b5476;
  -moz-border-left-colors: #2c81a8 #198dc5 #0b5476;
  -moz-border-bottom-colors: #289ad2 #97edff #55c1ed;
  -moz-border-right-colors: #2c81a8 #198dc5 #0b5476;
}


.inside-edge-top {
  background: -moz-linear-gradient(-90deg, #001c40, #00203f);
  background: linear-gradient(-90deg, #001c40, #00203f);
  /* -webkit background below */
  height: 74px;
  left: 130px;
  top: 86px;
  width: 140px;
  
  -moz-border-radius: 80px 80px 0 0 / 73px 73px 0 0;
  border-radius: 80px 80px 0 0 / 73px 73px 0 0;
  /* -webkit border radius below */
  
  -moz-box-shadow: 0 0 20px #032537;
  -webkit-box-shadow: 0 0 20px #032537;
  box-shadow: 0 0 20px #032537;
} 


.inside-edge-bottom {
  background: -moz-linear-gradient(-90deg, #00203f, #001c40);
  background: linear-gradient(-90deg, #00203f, #001c40);
  height: 82px;
  left: 130px;
  top: 207px;
  width: 136px;
  
  -moz-border-radius: 0 0 82px 82px / 0 0 73px 73px;
  border-radius: 0 0 82px 82px / 0 0 73px 73px;
  
  -moz-border-bottom-colors: #2c81a8 #198dc5 #0b5476;
  -moz-border-top-colors: #289ad2 #69d8fb #0b5476;
  
  -moz-box-shadow: 0 0 20px #032537;
  -webkit-box-shadow: 0 0 20px #032537;
  box-shadow: 0 0 20px #032537;
}


.inside-edge-2-bottom {
  background: -moz-linear-gradient(-90deg, #00203f, #001c40);
  background: linear-gradient(-90deg, #00203f, #001c40);
  border-left: 0;
  border-right: 0;
  
  -moz-border-bottom-colors: #2c81a8 #62cdf3 #0b5476;
  -moz-border-top-colors: #289ad2 #97edff #0b5476;
  
  -moz-border-radius: 0 10px 30px 0 / 0 10px 25px 0;
  border-radius: 0 10px 30px 0 / 0 10px 25px 0;
  
  height: 36px;
  left: 267px;
  top: 207px;
  width: 134px;
}


/* START Webkit Voodoo */
@media screen and (-webkit-min-device-pixel-ratio:0) {

  .inside-edge-top,
  .inside-edge-bottom,
  .inside-edge-2-bottom {
    border-color: #2c81a8; /* outside */
    border-width: 1px;
    position: relative;
    z-index: 10;
  }
  
  .inside-edge-top:before,
  .inside-edge-bottom:before,
  .inside-edge-2-bottom:before {
    border: 1px solid #198dc5; /* middle */
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }

  .inside-edge-top:after,
  .inside-edge-bottom:after,
  .inside-edge-2-bottom:after {
    border: 1px solid #0b5476; /* inside */
    bottom: 1px;
    content: "";
    display: block;
    left: 1px;
    position: absolute;
    right: 1px;
    top: 1px;
    z-index: -1;
  }

  .inside-edge-top,
  .inside-edge-top:before,
  .inside-edge-top:after {
    -webkit-border-top-left-radius: 80px 73px;
    -webkit-border-top-right-radius: 80px 73px;
  }

  .inside-edge-bottom,
  .inside-edge-bottom:before,
  .inside-edge-bottom:after {
    -webkit-border-bottom-right-radius: 82px 73px;
    -webkit-border-bottom-left-radius: 82px 73px;
  }

  .inside-edge-2-bottom,
  .inside-edge-2-bottom:before,
  .inside-edge-2-bottom:after {
    border-left: 0;
    border-right: 0;
    -webkit-border-top-right-radius: 10px 10px;
    -webkit-border-bottom-right-radius: 30px 25px;
  }

  .inside-edge-top {
    border-bottom-color: #289ad2;
    height: 78px;
    width: 144px;
  }

  .inside-edge-top:before {
    border-bottom-color: #97edff;
  }

  .inside-edge-top:after {
    background: -webkit-gradient( linear, left top, left bottom, from(#001c40), to(#00203f) );
    border-bottom-color: #55c1ed;
  }

  .inside-edge-bottom {
    border-top-color: #289ad2;
    height: 86px;
    width: 140px;
    z-index: 10;
  }

  .inside-edge-bottom:before {
    border-top-color: #69d8fb;
  }

  .inside-edge-bottom:after,
  .inside-edge-2-bottom:after {
    background: -webkit-gradient( linear, left top, left bottom, from(#00203f), to(#001c40) );
    border-top-color: #0b5476;
  }

  .inside-edge-2-bottom {
    border-top-color: #289ad2;
    height: 40px;
    width: 136px;
    z-index: 11;
  }

  .inside-edge-2-bottom:before {
    border-bottom-color: #62cdf3;
    border-top-color: #97edff;
  }
}

/* END Webkit Voodoo */


.inside-top,
.inside-bottom,
.inside-2-bottom {
  background: #fff;
  z-index: 12;
}


.inside-top {
  height: 60px;
  left: 141px;
  top: 96px;
  width: 124px;
  
  -moz-border-radius: 60px 62px 0 0 / 60px 62px 0 0;
  -webkit-border-radius: 60px 62px 0 0;
  border-radius: 60px 62px 0 0 / 60px 62px 0 0;
}


.inside-bottom {
  height: 69px;
  left: 140px;
  top: 217px;
  width: 122px;
  
  -moz-border-radius: 0 0 69px 69px / 0 0 61px 61px;
  -webkit-border-bottom-right-radius: 69px 61px;
  -webkit-border-bottom-left-radius: 69px 61px;
  border-radius: 0 0 69px 69px / 0 0 61px 61px;
}


.inside-2-bottom {
  height: 23px;
  left: 250px;
  top: 217px;
  width: 160px;
}


#planetary-ring {
  background: transparent;
  border: 4px solid #da8904;
  border-left-width: 1px;
  border-right: 0px none;
  clip: rect(0px,200px,670px,-100px);
  height: 580px;
  left: 154px;
  position: absolute;
  top: -25px;
  width: 230px;
  z-index: 15;
  
  -moz-transform: rotate(43deg);
  -webkit-transform: rotate(43deg);
  transform: rotate(43deg);
  
  -moz-border-radius: 115px / 295px;
  -webkit-border-radius: 115px 295px;
  border-radius: 115px / 295px;
  
  -moz-box-shadow:
    15px -20px 20px rgba(238, 167, 23, 1) inset,
    25px -20px 10px rgba(246, 191, 36, 1) inset,
    40px -20px 0px rgba(238, 165, 18, 0) inset,
    30px -20px 0px rgba(251, 208, 42, 1) inset,
    32px -22px 0px rgba(229, 181, 29, 0.5) inset,
    35px -17px 0px rgba(243, 190, 24, 0.9) inset,
    15px 10px 0px rgba(243, 190, 24, 0.9) inset, /* yellow shadow bg top */
    -3px 0px 2px rgba(255, 255, 255, 1),
    -7px 0px 0px rgba(252, 220, 65, 1),
    -30px 20px 3px rgba(255, 255, 0, .1),
    -30px 30px 3px rgba(255, 255, 0, .1),
    -30px 40px 3px rgba(255, 255, 0, .1),
    -30px 50px 3px rgba(255, 255, 0, .1);
  -webkit-box-shadow:
    15px -20px 20px rgba(238, 167, 23, 1) inset,
    25px -20px 10px rgba(246, 191, 36, 1) inset,
    40px -20px 0px rgba(238, 165, 18, 0) inset,
    30px -20px 0px rgba(251, 208, 42, 1) inset,
    32px -22px 0px rgba(229, 181, 29, 0.5) inset,
    35px -17px 0px rgba(243, 190, 24, 0.9) inset,
    15px 10px 0px rgba(243, 190, 24, 0.9) inset,
    -3px 0px 2px rgba(255, 255, 255, 1),
    -7px 0px 0px rgba(252, 220, 65, 1),
    -30px 20px 3px rgba(255, 255, 0, .1),
    -30px 30px 3px rgba(255, 255, 0, .1),
    -30px 40px 3px rgba(255, 255, 0, .1),
    -30px 50px 3px rgba(255, 255, 0, .1);
  box-shadow:
    15px -20px 20px rgba(238, 167, 23, 1) inset,
    25px -20px 10px rgba(246, 191, 36, 1) inset,
    40px -20px 0px rgba(238, 165, 18, 0) inset,
    30px -20px 0px rgba(251, 208, 42, 1) inset,
    32px -22px 0px rgba(229, 181, 29, 0.5) inset,
    35px -17px 0px rgba(243, 190, 24, 0.9) inset,
    15px 10px 0px rgba(243, 190, 24, 0.9) inset,
    -3px 0px 2px rgba(255, 255, 255, 1),
    -7px 0px 0px rgba(252, 220, 65, 1),
    -30px 20px 3px rgba(255, 255, 0, .1),
    -30px 30px 3px rgba(255, 255, 0, .1),
    -30px 40px 3px rgba(255, 255, 0, .1),
    -30px 50px 3px rgba(255, 255, 0, .1);
}


#planetary-ring div {
  height: 580px;
  position: absolute;
  width: 230px;
  
  -moz-border-radius: 115px / 295px;
  -webkit-border-radius: 115px 295px;
  border-radius: 115px / 295px;
}


#planetary-ring div:nth-of-type(n+1) {
  -moz-box-shadow:
    7px 7px 7px rgba(218, 137, 4, 1) inset,
    10px 10px 5px rgba(218, 137, 4, 0.3) inset,
    12px 12px 5px rgba(218, 137, 4, 0.3) inset;
  -webkit-box-shadow:
    7px 7px 7px rgba(218, 137, 4, 1) inset,
    10px 10px 5px rgba(218, 137, 4, 0.3) inset,
    12px 12px 5px rgba(218, 137, 4, 0.3) inset;
  box-shadow:
    7px 7px 7px rgba(218, 137, 4, 1) inset,
    10px 10px 5px rgba(218, 137, 4, 0.3) inset,
    12px 12px 5px rgba(218, 137, 4, 0.3) inset;
}
</style>
</head>
<body>
  <div id="ie-icon">
  
    <div class="icon-bg">
      <div class="spot">
        <div> </div>
        <div> </div>
      </div>
    </div>
    
    <div class="inside-edge-top"> </div> 
    <div class="inside-top"> </div>
  
    <div class="inside-edge-bottom"> </div>
    <div class="inside-edge-2-bottom"> </div>
    <div class="inside-bottom"> </div>
    <div class="inside-2-bottom"> </div>
  
  </div> <!-- / #ie-icon -->
  
  <div id="planetary-ring">
    <div> </div>
    <div> </div>
  </div> <!-- / #planetary-ring -->
</body>
</html>