Cara Membuat Logo Blog menggunakan CSS dan HTML

Posted by Desain Kode Tuesday, December 29, 2015 2 comments

Logo merupakan salah satu hal yang sangat penting bagi sebuah blog, web atau sebuah perusahaan, dimana logo yang baik dapat menjadi ciri khas tersendiri dari blog atau perusahaan tersebut. Bahkan banyak dari beberapa perusahaan-perusahaan terkemuka didunia rela menghabiskan jutaan dollar hanya untuk membut logo brand mereka. Contohnya saja pada Logo Pertamina yang menghabiskan dana sebesar Rp 2,5 milyar dalam pembuatan Logo baru (sumber). Dalam mendesain template blogspot, kebanyakan blogger hanya dengan menggunakan tulisan atau gambar saja. Dulunya logo blog DesainKode juga menggunakan tulisan, namun dalam pengembangannya dapat kita lihat di bagian header logo blog ini sudah berubah murni dengan menggunakan CSS dan HTML meskipun hanya dibuat dengan metode trial and error saja. Hanya logo blog DesainKode ini yang akan saya jelaskan cara mendesainnya.

Ada beberapa keunggulan jika menggunakan logo dengan CSS dan HTML dibandingkan dengan logo bergambar yaitu sudah jelas dapat membuat tampilan blog menjadi ringan karena browser tidak perlu menampilkan gambar yang bisa membuat blog menjadi berat, disamping itu logo dengan kode CSS juga dapat didesain menjadi animasi sederhana. Sebelum melihat penjelasan logo Blog ini, ada baiknya kita mengenal beberapa logo yang sudah dibuat sebelumnya oleh beberapa orang :

1. Logo Microsoft

logo {
    font-size:40px;
    color: #747273;
    line-height: 1.5em;
    padding-left: 1.7em;
}
logo:before {
    content: '\2006';
    position: absolute;
    height: 0.095em;
    left: 0;
    box-shadow: 0.35em 0.35em 0 0.25em #f8510c,
                1.05em 0.35em 0 0.25em #7eba00,
                0.35em 0.97em 0 0.25em #00a3f4,
                1.05em 0.97em 0 0.25em #ffba00;   
}

<logo>Microsoft</logo>

itu kode CSS dan HTML yang digunakan untuk Logo Microsoft. Bagaimana? terlihat begitu simpel? Jelas sangat smpel dibandingkan kalau ingin menggunakan gambar.

DEMO

2. Logo Android


div {margin: o; padding: 0;}
div div {background: #A4CA39; position: relative;}

.android{
    height: 404px; width: 334px;
    margin: 100px auto;
    
}
.head{
    width: 220px; height: 100px;
    top: 32px;
    
    border-radius: 110px 110px 0 0;
    -moz-border-radius: 110px 110px 0 0;
    -webkit-border-radius: 110px 110px 0 0;
    
    -webkit-transition: all 0.1s ease-in;
}
.l_eye, .r_eye {
    background: #fff;
    width: 20px; height: 20px;
    position: absolute; top: 42px;
    
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.l_eye {left: 50px;}
.r_eye {right: 50px;}

.l_ant, .r_ant{
    width: 6px; height: 50px;
    position: absolute; top: -34px;
    
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.l_ant {
    left: 50px;
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
}
.r_ant {
    right: 50px;
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}

.body{
    width: 220px; height: 184px;
    top: 40px;
    
    border-radius: 0 0 25px 25px;
    -webkit-border-radius: 0 0 25px 25px;
    -moz-border-radius: 0 0 25px 25px;
}

.l_arm, .r_arm, .l_leg, .r_leg {
    width: 50px; position: absolute;
    -webkit-transition: all 0.1s ease-in;
}
.l_arm, .r_arm {
    height: 150px;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
}
.l_leg, .r_leg {
    height: 80px; top: 182px;
    border-radius: 0 0 25px 25px;
    -moz-border-radius: 0 0 25px 25px;
    -webkit-border-radius: 0 0 25px 25px;
}
.l_arm {left: -58px;}
.r_arm {right: -58px;}
.l_leg {left: 45px;}
.r_leg {right: 45px;}

.head:hover {
    -webkit-transform: rotate(-5deg) translate(-4px, -8px);
    -transform: rotate(-5deg) translate(-4px, -8px);
    -moz-transform: rotate(-5deg) translate(-4px, -8px);
}
.l_arm:hover{
    -webkit-transform: rotate(15deg) translate(-14px, 0);
    -transform: rotate(15deg) translate(-14px, 0);
    -moz-transform: rotate(15deg) translate(-14px, 0);
}
.r_arm:hover{
    -webkit-transform: rotate(-30deg) translate(30px, 0);
    -transform: rotate(-30deg) translate(30px, 0);
    -moz-transform: rotate(-30deg) translate(30px, 0);
}

<div class="android">
    <div class="head">
        <div class="l_ant"></div>
        <div class="r_ant"></div>
        <div class="l_eye"></div>
        <div class="r_eye"></div>
    </div>
    <div class="body">
        <div class="l_arm"></div>
        <div class="r_arm"></div>
        <div class="l_leg"></div>
        <div class="r_leg"></div>
    </div>
</div>

Untuk logo Android ini, struktur kode CSS dan HTML nya agak lebih panjang karena menggunakan sedikit animasi.

DEMO

3. Logo Blog DesainKode

/* Header Logo */
#header-logo {
    position: relative;
    width: 84px;
    height: 35px;
    margin: 10px 30px 5px;
}
#header-logo span,
#header-logo span:before,
#header-logo span:after {
    content: "";
    position: absolute;
    display: block;
}
#header-logo .char-k {
    height: 40px;
    border: 6px solid #46A3FA;
    top: 5px;
    bottom: 0;
    left: 39px;
}
#header-logo:hover .char-k {
    height: 40px;
    border: 6px solid #ED1C24;
    top: 5px;
    bottom: 0;
    left: 39px;
}
#header-logo .char-d {
    border: 11px solid #46A3FA;
    border-radius: 0 10px 10px 0;
    top: 5px;
    bottom: 0px;
    left: 0px;
    height: 30px;
    width:14px;
}
#header-logo:hover .char-d {
    border: 11px solid #ED1C24;
    border-radius: 0 10px 10px 0;
    top: 5px;
    bottom: 0px;
    left: 0px;
    height: 30px;
    width:14px;
}
#header-logo:hover .char-e {
    border: 11px solid black;
    border-color:#ED1C24;
    border-left: none;
    border-right: none;
    top: 5px;
    right: 30px;
    bottom: 0px;
    left: 50px;
    height: 30px;
    width: 18px;
}
#header-logo:hover .char-e:before {
    border-top: 11px solid black;
    border-color:#ED1C24;
    top: 9px;
    right: 30px;
    bottom: 0px;
    left: 0px;
    height: 30px;
    width: 12px;
}
#header-logo:hover .char-c {
    height: 40px;
    border: 6px solid #46A3FA;
    top: 5px;
    bottom: 0;
    left: 71px;
}
#header-logo:hover .char-c:before {
    border: 11px solid #46A3FA;
    border-right:none;
    border-bottom:none;
    top: 3px;
    bottom: 0px;
    left: 2px;
    height:25px;
    width: 25px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#header-logo:hover .char-d2 {
    border: 11px solid #46A3FA;
    border-radius: 0 10px 10px 0;
    top: 5px;
    bottom: 0px;
    left: 159px;
    height: 30px;
    width:14px;
}
#header-logo:hover .char-e2 {
    border: 11px solid #46A3FA;
    border-right: none;
    top: 5px;
    right: 30px;
    bottom: 0px;
    left: 198px;
    height: 30px;
    width: 18px;
}#header-logo:hover .char-e2:before {
    border-top: 11px solid #46A3FA;
    top: 9px;
    right: 30px;
    bottom: 0px;
    left: 0px;
    height: 30px;
    width: 14px;
}
#header-logo .char-symb {
    position: absolute;
    top: 7px;
    left: 55px;
    width: 30px;
    height: 30px;
    border: 8px solid #ED1C24;
    border-top-color:white;
    border-right-color: white;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
#header-logo .char-symb:before {
    content: "";
    position: absolute;
    display: block;
    bottom: 7px;
    left: 11px;
    width: 23px;
    height: 23px;
    border: 2px solid transparent;
    border-bottom-color: black;
    border-left-color: black;
    -webkit-border-radius: 42px;
    -moz-border-radius: 42px;
    border-radius: 42px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
#header-logo .char-symb:after {
    position: absolute;
    display: block;
    content: "";
    top: 5px;
    left: 9px;
    width: 10px;
    height: 10px;
    background-color: black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#header-logo .char-symb span {
    content: "";
    position: absolute;
    display: block;
    top: -6px;
    left: 19px;
    right: 4px;
    width: 10px;
    height: 10px;
    background-color: black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#header-logo:hover .char-symb:before {
    left:5px;
    bottom:4px;
    border-bottom-color: #ED1C24;
    border-left-color: transparent;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
#header-logo .char-symb .mata2 {
    top: -3px;
    left: 22px;
    right: 7px;
    width: 4px;
    height: 4px;
    background-color: #ED1C24;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#header-logo .char-symb .mata1 {
    top: 8px;
    left: 12px;
    width: 4px;
    height: 4px;
    background-color: #ED1C24;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    z-index: 1;
}
#header-logo:hover .char-symb:after{
    top:11px;
    left:5px;
    background-color: #5498C9;
}
#header-logo:hover .char-symb span {
    background-color: #5498C9;
    top:11px;
    left:22px;
}
#header-logo:hover .char-symb .mata2{
    background-color: blue;
    top:14px;
    left:25px;
}
#header-logo:hover .char-symb .mata1 {
    background-color: blue;
    top:14px;
    left:8px;
}
#header-logo:hover .char-symb,
#header-logo:focus .char-symb,
#header-logo.focused .char-symb {
    top: 5px;
    left:106px;
    width: 35px;
    height: 35px;
    border-color: #46A3FA;
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);

  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 0.2s;
  animation-duration: 1s;
  animation-delay: 1.5s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  50% {
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
  }
}
#header-logo .char-symb,
#header-logo .char-d,
#header-logo .char-e,
#header-logo .char-k,
#header-logo .char-c,
#header-logo .char-d2,
#header-logo .char-e2,
#header-logo .char-symb:after,
#header-logo .char-symb span {
    -webkit-transition: all 1.5s ease-out;
    -moz-transition: all 1.5s ease-out;
    -ms-transition: all 1.5s ease-out;
    -o-transition: all 1.5s ease-out;
    transition: all 1.5s ease-out;
}

#header-logo .char-e {
    border: 11px solid white;
    border-left: none;
    border-right: none;
    top: 5px;
    right: 30px;
    bottom: 0px;
    left: 150px;
    height: 30px;
    width: 18px;
}
#header-logo .char-e:before {
    border-top: 11px solid white;
    top: 9px;
    right: 30px;
    bottom: 0px;
    left: 0px;
    height: 30px;
    width: 12px;
}
#header-logo .char-c {
    height: 40px;
    border: 6px solid white;
    top: 5px;
    bottom: 0;
    left: 171px;
}
#header-logo .char-c:before {
    border: 11px solid white;
    border-right:none;
    border-bottom:none;
    top: 3px;
    bottom: 0px;
    left: 2px;
    height:25px;
    width: 25px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#header-logo .char-d2 {
    border: 11px solid #46A3FA;
    border-radius: 0 10px 10px 0;
    top: 5px;
    bottom: 0px;
    left: 0px;
    height: 30px;
    width:14px;
}
#header-logo .char-e2 {
    border: 11px solid white;
    border-right: none;
    top: 5px;
    right: 30px;
    bottom: 0px;
    left: 240px;
    height: 30px;
    width: 18px;
}#header-logo .char-e2:before {
    border-top: 11px solid white;
    top: 9px;
    right: 30px;
    bottom: 0px;
    left: 0px;
    height: 30px;
    width: 14px;
}

<a href='http://desainkode.blogspot.co.id/' id='header-logo'><span class='char-k'></span><span class='char-d'></span><span class='char-e'></span><span class='char-c'></span><span class='char-d2'></span><span class='char-e2'></span><span class='char-symb'><span></span><span class='trip'></span><span class='trap'></span></span></a>

DEMO

Kode CSS Logonya masih sedikit berantakan, tapi anda masih bisa untuk dijadikan bahan pembelajaran dalam membuat desain logo yang lain. Berikut ini beberapa penggunaan kode CSS yang dipakai dalam membuat Logo blog DesainKode :

"#" dan "." : Tag selector untuk class (#) dan id (.)
width dan height : Mengatur lebar dan tingginya
position : Mengatur letak posisi logo
top, right, bottom dan left : Mengatur jarak dan posisi antar setiap elemen
margin : Mengatur jarak antar elemen
border : Semua karakter dalam Logo ini menggunakan border dalam membuat huruf dan simbolnya.
border-radius : Untuk membengkokkan garis di bagian tepi. Bisa juga dipakai untuk membuat lingkaran.
webkit, moz, ms dan o : kode tampilan untuk setiap browser. (webkit untuk chrome dan safari, moz untuk mozilla, ms untuk internet explorer dan o untuk opera)
transform : Memodifikasi letak kordinat elemen dalam logo
transition : Mengatur jenis perpindahan saat disentuh (hover)
animation : Mengatur jenis animasinya
keyframes : Juga termasuk untuk mengatur animasi elemen dalam setiap waktu
hover : tampilan elemen pada saat disentuh

Dalam mendesain Logo dengan animasi menggunakan CSS tentunya yang paling penting adalah menggunakan kode "hover" namun yang perlu diperhatikan terlebih dahulu adalah menentukan/membuat tampilan awal kode, setelah itu baru menentukan tampilan saat disentuh (hover) kemudian menentukan animasi dan transitionnya yang akan digunakan.

Ada banyak kode-kode CSS yang masih bisa di gunakan dalam membuat Logo. Namun semua yang ingin digunakan tentunya harus sesuai dengan kebutuhan kita juga. Seilahkan buat logo css anda sendiri, mulailah membuat sedikit-demi sedikit, sampai menghasilkan sebuah Logo yang baik dan menarik.

2 comments

Balas

Armand Palu

February 4, 2016 at 2:57 PM

wahhh... keren bgt buat logo blog pake css dab htmlnya. patut dicoba.

Balas

Unknown

October 18, 2018 at 4:36 AM

mau tanya kalo misalnya di html nya udah ada kay id widht dll. nanti di css nya kaya gimana bikinnya ya . makasih

Tautan (link) hidup dalam komentar bersifat nofollow.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://nama_situs.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag KODE ANDA
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag JUDUL ANDA DI SINI...
Untuk menciptakan efek tebal gunakan tag TEKS ANDA DI SINI...
Untuk menciptakan efek huruf miring gunakan tag TEKS ANDA DI SINI...

Konversi Kode di Sini

:) :( :p :D :o ;) 8-) 8:) :/ :'( 3:) O:) :* <3 ^_^ -_- o.O O.o >:o :v :3

Batal

Cara Membuat Logo Blog menggunakan CSS dan HTML