Logo Google Chrome Dengan CSS3

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>