Star Lord con CSS Puro - Guardianes de la Galaxia - Educa Sistemas

Breaking

Post Top Ad

Post Top Ad

martes, 14 de noviembre de 2017

Star Lord con CSS Puro - Guardianes de la Galaxia


Buen dia colegas, les comparto el codigo para realizar a Star Lord en CSS puro


CODIGO HTML:
     <section class="stripe" id="starlord">
    <div class="container">
        <div class="face"></div>
        <div class="hair"></div>
        <div class="pouf"></div>
        <div class="pomp"></div>
        <div class="mask">
            <div class="faceplate">
                <div class="eye one"></div>
                <div class="eye two"></div>
            </div>
            <div class="mouthpiece"></div>
            <div class="tube one"></div>
            <div class="tube two"></div>   
        </div>
        <div class="collar"></div>   
        <div class="neck"></div>
        <div class="body">
            <div class="jacket"></div>
        </div>   
    </div>
</section>

CODIGO STYLE:
    <style>  
* {
  box-sizing: border-box;
}

.stripe {
  width: 100%;
  position: relative;
  height: 100vh;
  padding: calc(50vh - 100px) 32px;
}

.container {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  z-index: 10;
}

#starlord {
  background: #ccc;
}
#starlord .container {
  background: #fff;
  border: 2px solid #b3b3b3;
}
#starlord .body {
  position: absolute;
  width: 100px;
  height: 150px;
  background: #6A2422;
  top: 130px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 40px;
  z-index: 3;
  overflow: hidden;
}
#starlord .jacket {
  position: absolute;
  background: #6C6B72;
  width: 24px;
  left: 50%;
  height: 160px;
  top: -4px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1;
}
#starlord .jacket:before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 160px 0;
  border-color: transparent #431716 transparent transparent;
}
#starlord .jacket:after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 160px 10px 0 0;
  border-color: #431716 transparent transparent transparent;
}
#starlord .collar {
  position: absolute;
  background: #431716;
  top: 126px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 44px;
  height: 50px;
  border-radius: 6px 6px 50% 50%;
  z-index: 2;
}
#starlord .face {
  position: absolute;
  width: 60px;
  height: 80px;
  background: #F0BEAF;
  border-radius: 100px;
  top: 50px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 6;
}
#starlord .mask {
  position: absolute;
  background: #808281;
  width: 60px;
  height: 60px;
  top: 70px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 0 0 25px 25px;
  z-index: 10;
}
#starlord .mask:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 6px 30px;
  border-color: transparent transparent #808281 transparent;
}
#starlord .faceplate {
  position: absolute;
  width: 80%;
  height: 50px;
  top: 5px;
  left: 10%;
  background: #c4a68f;
  border-radius: 5px 5px 50% 50%;
  overflow: hidden;
}
#starlord .faceplate:before {
  content: "";
  position: absolute;
  background: #808281;
  top: 30px;
  height: 20px;
  width: 20px;
  left: -4px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}
#starlord .faceplate:after {
  content: "";
  position: absolute;
  background: #808281;
  top: 30px;
  height: 20px;
  width: 20px;
  right: -4px;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
}
#starlord .eye {
  position: absolute;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: #E42F34;
  border: 3px solid #808281;
  top: 5px;
}
#starlord .eye.one {
  left: 1px;
}
#starlord .eye.two {
  right: 1px;
}
#starlord .mouthpiece {
  position: absolute;
  left: 50%;
  bottom: 0px;
  width: 20px;
  background: #676868;
  height: 24px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 30% 30% 0 0;
}
#starlord .mouthpiece:before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 22px;
  height: 10px;
  background: #a8a8a8;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 5px;
}
#starlord .mouthpiece:after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #333;
  width: 8px;
  height: 4px;
  border-radius: 2px;
}
#starlord .tube {
  position: absolute;
  border-radius: 50%;
  bottom: -2px;
  height: 12px;
  width: 10px;
  background: #333;
  border: 2px solid #a8a8a8;
}
#starlord .tube.one {
  left: 16px;
}
#starlord .tube.two {
  right: 16px;
}
#starlord .neck {
  position: absolute;
  z-index: 5;
  width: 30px;
  height: 50px;
  border-radius: 12px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 90px;
  background: #F0BEAF;
}
#starlord .hair {
  position: absolute;
  width: 60px;
  height: 55px;
  background: #72514A;
  border-radius: 50%;
  top: 36px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#starlord .pouf {
  position: absolute;
  width: 30px;
  height: 20px;
  border-radius: 50%;
  left: 60px;
  top: 46px;
  background: #72514A;
  -webkit-transform: rotate(-53deg);
          transform: rotate(-53deg);
  z-index: 10;
}
#starlord .pomp {
  position: absolute;
  width: 51px;
  height: 23px;
  border-radius: 100% 0% 100% 100%;
  left: 71px;
  top: 40px;
  background: #72514A;
  z-index: 10;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}

</style>

VIDEO EXPLICATIVO :


No hay comentarios:

Publicar un comentario

Post Top Ad

Responsive Ads Here