UNITAU

In this example below you will see how to do a UNITAU with some HTML / CSS and Javascript

Logo da Universidade de Taubaté em CSS com um pouco de perspectiva. Rodando apenas em Chrome/Safari

Thumbnail
This awesome code was written by oieduardorabelo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright oieduardorabelo ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
  <div class="box">
    <div class="box-unitau">
      <div class="inner-box ib01"></div>
      <div class="inner-box ib02"></div>
      <div class="inner-box ib03"></div>
    </div>
  </div>
  <h1>Unitau</h1>
  <h2>Universidade de Taubaté</h2>
</div>

/*Downloaded from https://www.codeseek.co/oieduardorabelo/unitau-Dnmrs */
    *, *::after, *::before{
  -webkit-box-sizing: border-box;
}
*{
  margin: 0;
  padding: 0;
}
body{
  margin-top: -200px;
  -webkit-transform: scale(.5);
  -webkit-perspective: 1000px;
  -webkit-perspective-origin: 50% 50%;
}
.container {
  -webkit-transform-style: preserve-3d;
}
.container {
  margin: 30px auto 0;
  width: 564px;
  -webkit-animation: spin 6s infinite ease-out;
}
@-webkit-keyframes spin{
  from {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -webkit-transform: rotateX(360deg) rotateY(360deg);
  }
}
.box, .box-unitau{
  border-radius: 0 0 49% 49%;
}
.box{
  border: 10px solid #003B6F;
  height: 663px;
  position: relative;
}
.box-unitau{
  background-color: #003B6F;
  border: none;
  height: 589px;
  margin: 25px 0 0 25px;
  width: 496px;
}
.box-unitau, .inner-box{
  left: 0;
  position: absolute;
  top: 0;
}
.inner-box{
  background: #FFF;
  height: 162px;
  width: 166px;
}
.ib01, .ib02{
  margin: 140px 0 0 0;
}
.ib02{
  left: initial;
  right: 0;
}
.ib03{
  bottom: 0;
  left: 50%;
  margin: 0 0 125px -83px;
  top: initial;
}
h1, h2{
  color: #003B6F;
  font-family: Arial, sans-serif;
  text-align: center;
}
h1{
  font-size: 150px;
  text-transform: uppercase;
}
h2{
  font-size: 45px;
}


/*Downloaded from https://www.codeseek.co/oieduardorabelo/unitau-Dnmrs */
    

Comments