Logo IM3 dengan CSS

Logo IM3 dengan CSS. Ya karena sedang lagi tidak ada ide dan lumayan sibuk di dunia nyata. Untuk sedikit meramaikan suasana blog ini, maka saya hanya share saja hasil coba-cobaku dengan mencontoh dari gambar logo IM3. Okelah dimulai dari kode-kode berikut ini.

HTML

<div class="logo">
   <div class="lingkaran"></div>
   <div class="imtri">
      <div class="hurufi"></div>
      <div class="hurufm"></div>
      <div class="angkatiga"></div>
   </div>
</div>

CSS

/*Logo IM3 by Blog ARS*/
.logo{max-width:96%;width:480px;margin:20px auto;}

.lingkaran {position:relative;background:#ff0;width:51px;height:50px;margin:205px 0px -10px 345px;border:9px solid #231917;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;}
.lingkaran::before {position:absolute;content:"";background:#00a1e9;width:94px;height:94px;border:9px solid #231917;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;top:-93px;left:-82px;}
.lingkaran::after {position:absolute;content:"";background:#ef8200;width:130px;height:130px;border:11px solid #231917;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;top:-210px;left:-25px;}

.imtri {width:350px;padding:12px 4px 8px 12px;background:#231917;margin:0px auto;-webkit-transform:skew(-15deg);-moz-transform:skew(-15deg);-o-transform:skew(-15deg);transform:skew(-15deg)}

.hurufi {background:#ffffff;width:44px;height:160px;display:inline-block;margin-right:12px}

.hurufm {position:relative;background:#ffffff;width:132px;height:160px;display:inline-block;margin-right:12px}
.hurufm::before,.hurufm::after {position:absolute;content:"";background:#231917;width:12px;height:120px;bottom:0px;}
.hurufm::before {left:36px}
.hurufm::after {right:36px}

.angkatiga {position:relative;background:#ffffff;width:132px;height:160px;display:inline-block;}
.angkatiga::before {position:absolute;content:"";border-top:25px solid #231917;border-bottom:25px solid #231917;border-left:20px solid #231917;width:75px;height:32px;top:42px;left:-3px}
/*Sampe disini saja kodenya*/

Ya itu tadi kode-kodenya. Kemudian untuk hasilnya seperti dibawah ini. Lumayan lah.

Semoga bermanfaat :)