Cara Membuat Logo Sederhana dengan CSS Yang Keren

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 berikut 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>

Logo di atas 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 :

.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;
}

inilah Tampilan dari membuat logo sederhana dengan CSS :

See the Pen A4 CSS LOGO by Yusuf Bakır (@yusufbkr) on CodePen.

Share this post