EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

body{
  background-color: #EC7E65;
}
.minion{
  position:absolute;
  background-color: #ffed41;
  height: 360px;
  width: 218px;
  border-radius: 218px 218px 130px 130px;
  position:absolute;
	  left:50%;
  	top:50%;
	  margin:-180px 0 0 -109px;
}
.glassesline1{
  background-color: #494949;
  border-radius: 4px;
  height: 12px;
  width: 238px;
  position: relative;
  top: 98px;
  margin : 0 -10px;
}
.glassesline2{
  background-color: #2d2d2d;
  border-radius: 4px;
  height: 12px;
  width: 238px;
  position: relative;
  top: 98px;
  margin : 0 -10px;
  -webkit-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow:    0px 3px 0px 0px rgba(0, 0, 0, 0.15);
  box-shadow:         0px 3px 0px 0px rgba(0, 0, 0, 0.15);
}

.glass1,.glass2{
  background-color: #e2e2e0;
  height: 102px;
  width: 102px;
  border-radius: 102px;
  position: absolute;
  top: 55px;
  -webkit-box-shadow: -4px 4px 0px 0px rgba(50, 50, 50, 0.15),1px -1px 0px 0px rgba(255, 255, 255, 1);
  -moz-box-shadow:    -4px 4px 0px 0px rgba(50, 50, 50, 0.15),1px -1px 0px 0px rgba(255, 255, 255, 1);
  box-shadow:         -4px 4px 0px 0px rgba(50, 50, 50, 0.15),1px -1px 0px 0px rgba(255, 255, 255, 1);
}
.glass1{
  left: 10px;
  right: auto;
  z-index: 2;
}
.glass2{
  right: 10px;
  left: auto;
  z-index: 1;
}

.glass1:before,.glass2:before{
  background-color: #e5bf36;
  height: 78px;
  width: 78px;
  border-radius: 78px;
  display: block;
  position: relative;
  top: 12px;
  left: 12px;
  content: "";
}

.glass1:after,.glass2:after{
  background-color: #FFF;
  height: 58px;
  width: 78px;
  border-radius: 78px;
  position: absolute;
  top: 22px;
  left: 12px;
  content: "";
}

.eye1,.eye2{
  background-color: #724c25;
  height: 28px;
  width: 28px;
  border-radius: 28px;
  position: absolute;
  top: 44px;
  z-index: 3;
}
.eye1{
  left: 46px;
}
.eye2{
  right: 46px;
}
.eye1:before,.eye2:before{
  background-color: #2c2d2f;
  height: 12px;
  width: 12px;
  border-radius: 12px;
  display: block;
  position: relative;
  top: 8px;
  left: 8px;
  content: "";
}
.eye1:after,.eye2:after{
  background-color: #FFF;
  height: 8px;
  width: 8px;
  border-radius: 8px;
  position: absolute;
  top: 6px;
  left: 12px;
  content: "";
}

.mouth{
  background-color: #603814;
  height: 36px;
  width: 106px;
  position: absolute;
  border-radius: 0 0 106px 106px;
  top: 182px;
  left: 55px;
  overflow: hidden;
}
.mouth:before{
  background-color: #FFED41;
  height: 80px;
  width: 205px;
  position: relative;
  display: block;
  border-radius: 0 0 150px 150px;
  top:-70px;
  left:-50px;
  content: "";
  z-index: 2;
  -webkit-box-shadow: 0px 3px 0px 0px rgba(50, 50, 50, 0.15);
  -moz-box-shadow:    0px 3px 0px 0px rgba(50, 50, 50, 0.15);
  box-shadow:         0px 3px 0px 0px rgba(50, 50, 50, 0.15);
}

ul.teeth{
  list-style: none;
  z-index: 1;
  position: absolute;
  top: -10px;
  left: -25px;
}

ul.teeth li{
  float: left;
  height: 15px;
  width: 20px;
  background: #FFF;
  display: inline-block;
  border-radius: 0 0 15px 15px;
}
ul.teeth li:first-child,ul.teeth li:last-child{
  height:10px;
}

.pants{
  background-color: #2b5b89;
  height: 66px;
  position: relative;
  top: 270px;
  border-radius: 0 0 128px 128px;
  z-index: 2;
}
.pants:before{
  background-color: #2b5b89;
  height: 58px;
  width: 138px;
  display: block;
  position: relative;
  top: -58px;
  margin:0 auto;
  content: "";
}
.pants:after{
  background-color: #224467;
  height: 44px;
  width: 58px;
  display: block;
  position: relative;
  top: -76px;
  border-radius: 0 0 58px 58px;
  margin:0 auto;
  content: "";
}
.belt-left,.belt-right{
  background-color: #224467;
  height: 16px;
  width: 70px;
  position: absolute;
  top:225px;
  z-index: 3;
}
.belt-left{
  left:-10px;
  transform: scale(1) rotate(24deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.belt-right{
  right:-10px;
  transform: scale(1) rotate(-28deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.belt-left:after,.belt-right:after{
  background-color: #2d2d2b;
  height: 11px;
  width: 11px;
  border-radius: 11px;
  position: absolute;
  content: "";
}
.belt-left:after{
  left: 56px;
  top: 3px;
}
.belt-right:after{
  right: 57px;
  top: 3px;
}

.legs .left,.legs .right{
  background: #224467;
  height: 32px;
  width: 44px;
  position: absolute;
  top: 358px;
  z-index: 1;
}
.legs .left{
  left:60px;
}
.legs .right{
  right:60px;
}

HTML

Recommendation

Join Effecthub.com