Logo sederhana menggunakan CSS ini dibuat oleh Yusuf Bakir. Logo yang dibuat terlihat unik, biasanya kita menggunakan software design untuk membuat logo, tetapi ini dibuat dengan CSS. Diharapkan logo yang tampil akan seperti ini:
Logo diatas adalah penggunaan dua huruf ‘A’ & angka ‘4’, terlihat bagaimana paduan kedua huruf tersebut. Untuk memulai membuat logo sederhana ini, buat kode markup html di bawah ini:
<div class="a4"> <div class="letter-a"> <span class="first"> <span class="first-a"></span> </span> <span class="second"> <span class="second-a"></span> </span> </div> <div class="letter-4"> <span class="first"></span> </div> </div>
Berikutnya masukkan kode CSS di bawah ini:
.a4{ width: 208px; height: 174px; overflow: hidden; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transition:500ms; -webkit-transition:500ms; -ms-transition:500ms; } .a4 .letter-a{ width: 131px; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } .a4 .letter-a:after{ content: ""; width: 13px; height: 100%; position: absolute; right: 0; top: 0; background: #fff; } .a4 .letter-a .first{ position: absolute; top: 0; right: 0; width: 80px; height: 106px; background: #fff; } .a4 .letter-a .first .first-a{ position: absolute; top: 40px; right: 13px; width: 40px; height: 53px; background: #231F20; } .a4 .letter-a .first:before, .a4 .letter-a .first .first-a:before, .a4 .letter-a .second:before, .a4 .letter-a .second .second-a:before, .a4 .letter-a .second .second-a:after{ content: ""; position: absolute; width: 100%; height: 250%; top: 0; left: 0; background: #231F20; transform: rotate(37deg); -webkit-transform: rotate(37deg); -ms-transform: rotate(37deg); transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; z-index: 2; } .a4 .letter-a .first .first-a:before{ background: #fff; z-index: 1; height: 130%; } .a4 .letter-a .second{ width: 100%; height: 50px; background: #fff; position: absolute; bottom: 0; left: 0; } .a4 .letter-a .second:before{ height: 100%; top: 53px; left: -118px; transform: rotate(-142deg); -webkit-transform: rotate(-142deg); -ms-transform: rotate(-142deg); } .a4 .letter-a .second:after{ content: ""; position: absolute; right: 13px; top: 13.5px; height: 14px; width: 56.3%; background: rgba(35, 31, 32, 0.6); z-index: 2; } .a4 .letter-a .second .second-a{ position: absolute; bottom: -.4px; left: 50%; width: 74.5px; height: 37px; background: #fff; margin-left: -22px; z-index: 2; overflow: hidden; } .a4 .letter-a .second .second-a:before{ top: -21px; left: -25px; } .a4 .letter-a .second .second-a:after{ top: 16px; left: 58px; } .a4 .letter-4{ width: 77px; height: 100%; position: absolute; right: 0; top: 0; } .a4 .letter-4:before{ content: ""; width: 13px; height: 100%; position: absolute; left: 29px; top: 0; background: #fff; } .a4 .letter-4:after{ content: ""; width: 16px; height: 100%; position: absolute; left: 42px; top: 0; background: rgba(35, 31, 32, 0.6); z-index: 2; } .a4 .letter-4 .first{ position: absolute; right: 0; top: 0; width: 38px; height: 100%; } .a4 .letter-4 .first:before, .a4 .letter-4 .first:after{ content: ""; width: 38px; height: 13px; background: #fff; position: absolute; top: 93px; left: 0; } .a4 .letter-4 .first:after{ top: 125px } body{ background: #231F20; } *, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0; text-decoration:none; }
Dan inilah tampilan dari membuat logo sederhana dengan CSS:
See the Pen A4 CSS LOGO by Yusuf Bakır (@yusufbkr) on CodePen.
Arif Nur says
Izin pake jadi Favicon bos..ini keren sekalian bookmark
Ahmad Fahrurroji says
Silahkan gan dengan senang hati