LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Internet Explorer Logo

By: Chris Tieman

CSS
body {
  background: #141517;
}

.fullWrapper {
  position: relative;
  top: 0px;
  -webkit-animation: bounce 3s infinite ease-in-out;
  -moz-animation: bounce 3s infinite ease-in-out;
  -ms-animation: bounce 3s infinite ease-in-out;
  z-index: 2;
}
.fullWrapper .logo {
  position: relative;
  margin: 0 auto;
  width: 360px;
  height: 360px;
}
.fullWrapper .logo .swoopFront {
  position: absolute;
  top: -2%;
  left: -1%;
  width: 100%;
  height: 100%;
  border-color: #ffdc3b;
  border-top: 20.016px solid #ffdc3b;
  border-left: 15.012px solid #ffdc3b;
  border-radius: 90% 55% 50% 55%;
  z-index: 3;
}
.fullWrapper .logo .circle {
  position: relative;
  height: 100%;
  border-radius: 49%;
  background: #7ddffe;
  background: -moz-radial-gradient(center, ellipse cover, #7ddffe 0%, #56c1f7 48%, #076bbb 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #7ddffe), color-stop(48%, #56c1f7), color-stop(100%, #076bbb));
  background: -webkit-radial-gradient(center, ellipse cover, #7ddffe 0%, #56c1f7 48%, #076bbb 100%);
  background: -o-radial-gradient(center, ellipse cover, #7ddffe 0%, #56c1f7 48%, #076bbb 100%);
  background: -ms-radial-gradient(center, ellipse cover, #7ddffe 0%, #56c1f7 48%, #076bbb 100%);
  background: radial-gradient(ellipse at center, #7ddffe 0%, #56c1f7 48%, #076bbb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ddffe', endColorstr='#076bbb',GradientType=1 );
}
.fullWrapper .logo .cutOut:before {
  content: "";
  position: absolute;
  top: 21%;
  left: 50%;
  margin-left: -27%;
  width: 54%;
  height: 22%;
  background: #141517;
  z-index: 2;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}
.fullWrapper .logo .cutOut:after {
  content: "";
  position: absolute;
  width: 54%;
  height: 22%;
  bottom: 21%;
  left: 50%;
  margin-left: -27%;
  background: #141517;
  border-bottom-left-radius: 50% 100%;
  border-bottom-right-radius: 50% 100%;
  z-index: 2;
}
.fullWrapper .logo .cutBar {
  position: absolute;
  width: 35%;
  height: 12%;
  bottom: 31%;
  right: 0%;
  background: #141517;
  z-index: 2;
}

.shadow {
  position: relative;
  left: 50%;
  margin-top: 30px;
  margin-left: -162px;
  width: 324px;
  height: 50px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  z-index: 0;
  -webkit-animation: shadow 3s infinite ease-in-out;
  -moz-animation: shadow 3s infinite ease-in-out;
  -ms-animation: shadow 3s infinite ease-in-out;
}

.credits {
  position: absolute;
  top: 15px;
  right: 30px;
  z-index: 999;
  font-family: Impact, Helvetica, sans-serif;
  color: #ddd;
}
.credits h2 {
  font-size: 25px;
  margin-bottom: 3px;
}
.credits p {
  font-family: Helvetica, sans-serif;
  font-size: 12px;
}

@-webkit-keyframes bounce {
  0% {
    top: 0px;
  }
  50% {
    top: 20px;
  }
}
@-moz-keyframes bounce {
  0% {
    top: 0px;
  }
  50% {
    top: 20px;
  }
}
@-ms-keyframes bounce {
  0% {
    top: 0px;
  }
  50% {
    top: 20px;
  }
}
@-webkit-keyframes shadow {
  0% {
    width: 324px;
    margin-left: -162px;
    background: rgba(0, 0, 0, 0.1);
  }
  50% {
    width: 352.8px;
    margin-left: -176.4px;
    background: rgba(0, 0, 0, 0.3);
  }
}
@-moz-keyframes shadow {
  0% {
    width: 324px;
    margin-left: -162px;
    background: rgba(0, 0, 0, 0.1);
  }
  50% {
    width: 352.8px;
    margin-left: -176.4px;
    background: rgba(0, 0, 0, 0.3);
  }
}
@-ms-keyframes shadow {
  0% {
    width: 324px;
    margin-left: -162px;
    background: rgba(0, 0, 0, 0.1);
  }
  50% {
    width: 352.8px;
    margin-left: -176.4px;
    background: rgba(0, 0, 0, 0.3);
  }
}
JS
/*
	IE Logo, now fully scalable
	Try changing the width/height/background in the CSS!

	-Chris Tieman
*/

Description

[Fully Scalable] This is the 3rd logo of the browser series. This is the first of the three that is fully scalable based on the give width/height. I plan on fixing the opera and chrome logos to do the same once I'm done!
Term
Sat, 04/14/2018 - 20:46

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv