Logo Google Chrome Dengan CSS3

By Unknown

Saturday, August 3, 2013

Sebuah inovasi dalam pemanfaatan CSS3 oleh Rajendra Patil sangat luar biasa, Beliau telah membuat sebuah eksperimen yang cukup mengesankan dan menghasilkan karya yang fantastis :D

Rajendra Patil mampu membuat Logo Google Chrome hanya denga CSS3 tanpa menggunakan image/ gambar.

Logo Google Chrome

Logo tersebut dibuat dengan CSS3 teknik tinggi:

CSS3 Style:

<style type="text/css">
.leaf{
 height:350px;
 width:272px;
 background: #edcf17;
 -webkit-border-radius:55px 30px 245px 0px;
 -moz-border-radius:55px 30px 245px 0px;
 -o-border-radius:55px 30px 245px 0px;
 border-radius:55px 30px 245px 0px;
 position: absolute;
 opacity:0.97;
 -webkit-transform: rotate(0deg) translate(64px,-0.9258em);
 -moz-transform: rotate(0deg) translate(64px,-0.9258em);
 -o-transform: rotate(0deg) translate(64px,-0.9258em);
 transform: rotate(0deg) translate(64px,-0.9258em);
}

#yellow{
 z-index:-97;
 background:-webkit-gradient(radial,
 64 64, 279, -147 99, 100, from(#d9a919), to(white), color-stop(.35, #F0D418));
}
#yellow2{
 background:-webkit-gradient(radial,
 64 64, 279, -120 99, 115, from(#d9a919), to(white), color-stop(.35, #F0D418));
 z-index:-94;
 height:79px;
 width:255px;
}
#green{
 background: #44A73D;
 background:-webkit-gradient(radial,
 64 64, 329, -227 299, 100, from(#44A73D), to(white), color-stop(.40, #46ac3f));
 background:-moz-radial-gradient(-100% 45%, circle cover, white 30%, #44A73D 82%);
 -webkit-transform: rotate(120deg) translate(60px,152px);
 -moz-transform: rotate(120deg) translate(60px,152px);
 -o-transform: rotate(120deg) translate(60px,152px);
 transform: rotate(120deg) translate(60px,152px);
 z-index:-96;
}
#red{
 background: #E03e39;
 background:-webkit-gradient(radial,
 164 100, 280, 466 400, 10, from(#e44d40), to(white), color-stop(.25, #df3b3f));
 background:-moz-radial-gradient(160% 60%, white 0%, #e44d40 60%);
 -webkit-transform: rotate(-120deg) translate(206px,73px);
 -moz-transform: rotate(-120deg) translate(206px,73px);
 -o-transform: rotate(-120deg) translate(206px,73px);
 transform: rotate(-120deg) translate(206px,73px);
 z-index:-95;
}

#blue_core{
  width:180px;
  height:180px;
  -webkit-border-radius:180px;
  -moz-border-radius:180px;
  -o-border-radius:180px;
  border-radius:180px;
  background:#3f67bc;
  background:-webkit-gradient(radial, 90 0, 90, 90 -20, 0, from(#466CC7), to(#72A0CF));
  background:-moz-radial-gradient(50% -80px, circle cover, #89bbef 0%,  #466CC7 60%);
  line-height:180px;
  -webkit-box-shadow: 2px 12px 8px #aaa;
  -moz-box-shadow: 2px 12px 8px #aaa;
  -o-box-shadow: 2px 12px 8px #aaa;
  box-shadow: 2px 12px 8px #aaa;
  /*-webkit-transition:-webkit-transform 5s ease-out;*/
}
#white_shell{
 width:180px;
 height:180px;
 -webkit-border-radius:180px;
 -moz-border-radius:180px;
 -o-border-radius:180px;
 border-radius:180px;
 border:15px solid white;
 vertical-align: middle;
 line-height:180px;
}
#colors{
 -webkit-border-radius:360px;
 -moz-border-radius:360px;
 -o-border-radius:360px; 
 border-radius:360px;
 padding:140px;
 -webkit-box-shadow: 0px 10px 15px #aaa;
 -moz-box-shadow: 0px 10px 15px #aaa;
 -o-box-shadow: 0px 10px 15px #aaa;
 box-shadow: 0px 10px 15px #aaa;
}
#trimmer{
 border:25px solid white;
 -webkit-border-radius:370px;
 -moz-border-radius:370px;
 -o-border-radius:370px;
 border-radius:370px;
 z-index: 100;
 padding:140px;
 padding:0;
 margin:0;
 width:491px;
}
/*#trimmer:hover {
 -webkit-transform: rotate(1200deg);  
}
#trimmer:hover #blue_core{
 -webkit-transform: rotate(-1200deg);  
}*/
</style>

HTML Element:

<div id="trimmer"> 
  <div id="colors">
  <div id="white_shell">
   <div id="green" class="leaf"></div>
  <div id="yellow" class="leaf"></div>
   <div id="yellow2" class="leaf"></div>
   <div id="red" class="leaf"></div>
  <div id="blue_core"></div>
 </div>
  </div>
</div>

Share :

Facebook Twitter Google+