Selamat Datang

Membuat Desain Logo Dengan CSS3

Membuat logo dengan CSS3 sangat mungkin dilakukan saat ini, untuk membuatnya pun cukup mudah, sudah banyak orang yang membuat logo dengan hanya mengandalkan kode css saja, tanpa memerlukan bantuan aplikasi seperti Photoshop, illustrator atau coreldraw, karena memang kemampuan CSS sudah sangat canggih sekarang ini.

Pada kesempatan ini tutorial-webdesign.com juga ingin membuatnya, kami akan coba membuat logo TWD hanya dengan menggunakan CSS.

Arti Logo

Sebelum membuatnya mungkin beberapa orang pernah bertanya, apa sih artinya logo TWD?

Logo TWD

Logo Tutorial-webdesign.com

Logo TWD cukup simpel, hanya terdiri dari 4 buah kotak dengan warna berbeda-beda, dan ada tiga kotak yang diberi tulisan inisial TWD (Tutorial Web Design), 3 Huruf mengartikan ada 3 topik utama yang dibahas di website ini yaitu Web Design, Web Development dan Graphic Design.

Lalu kenapa ada 1 kotak paling gelap dan kosong tidak ada huruf nya?

Kotak kosong dan gelap itu menandakan kami memberikan ruang (space) kepada semua orang untuk menjadi bagian dari website ini dengan ikut menjadi kontributor atau penulis dengan cara menuliskan ilmu-ilmunya terkait web design, web development & graphic design di website ini, dan karena kami tidak tau apa yang akan penulis bahas, jadi itu diberi warna gelap.

Mengapa ada satu kotak yang miring?

Kata orang logo itu harus simpel dan gampang diingat, menurut kami dengan adanya satu kotak yang terlihat berbeda itu bisa membuat orang gampang mengingatnya, disamping itu banyak orang bilang logo yang baik itu adalah logo yang mudah dikenali walaupun dibuat dalam bentuk hitam putih (silhouette) atau bisa dibilang dengan warna atau tanpa warna logo harus tetap bisa digunakan, dan menurut kami logo TWD cukup bisa dikenali walaupun warna aslinya dihilangkan.

Logo yang baik dapat dikenali walau dibuat dalam hitam putih

Logo yang baik dapat dikenali walau dibuat hitam putih

Cukup penjelasan tentang logo, mari kita coba buat logo TWD dengan CSS.

Mengapa Membuat Logo Dengan CSS?
Selain untuk melatih skill CSS, membuat logo website dengan menggunakan CSS itu bisa membuat website tampil lebih ringan, karena browser tidak perlu menampilkan gambar, hanya teks saja.

Struktur HTML

Pertama buat struktur HTML seperti berikut ini


<div class="container">
    <div class="t"><span>T</span></div>
    <div class="null"></div>
    <div class="w"><span>W</span></div>
    <div class="d"><span>D</span></div>
</div>

Lalu kita desain tulisan tersebut dengan menggunakan CSS


*{
    padding: 0;margin: 0;
    font-family: arial;
    font-size: 55px;
    outline: none;
}

.container{
    width:200px;
    background: yellow;
    margin: 50px;
}
.container div{
    display: table;
}
.container div span{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: #ddd;
}
.t, .null, .w, .d{
    width:100px;
    height:100px;
    float:left;
}
.t{
    background: #B16B67;
    -webkit-transform: rotate(-25deg);
    z-index: -9999;
    position: relative;
}
.null{
    background: #002633;
}
.w{
    background: #006564;
}
.d{
    background: #B7977B;
}

Sedikit penjelasan tentang CSS nya:

Wadah dibuat untuk logo ukuran 200px, tanpa padding, lalu ada 4 buah div yang masing-masing memiliki panjang dan tinggi 100px, lalu diberi float:left agar merapat kekiri, dan jika kotak sudah memenuhi lebar wadahnya yaitu 200px maka kotak berikutnya otomatis akan menyesuaikan dan mengambil tempat dibawahnya.

Lalu untuk membuat 1 kotak dengan posisi miring, pada class .t diberi css berikut

.t{
    background: #B16B67;
    -moz-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    z-index: -9999;
    position: relative;
}

Sedangkan untuk membuat tulisan/huruf berada tepat ditengah-tengah kotak menggunakan display:table, display: table-cell; text-align: center;vertical-align: middle; penjelasan nya bisa dilihat di artikel terdahulu yaitu Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal

Hasil

Maka hasil yang akan kita dapatkan adalah seperti demo berikut ini

DEMO

Sekian tutorial kali ini, Salam Web Design Indonesia.





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

7 thoughts on “Membuat Desain Logo Dengan CSS3

  1. tadi iseng biking kaya punya pak bos jadi nya gini http://jsfiddle.net/Naf4S/ :)

  2. Bernard Duck says:

    Bisa jadi referensi desain logo nih mas… tq ya mas…

  3. sendi says:

    mas kalau logonya ingin berbentuk lingkaran gmna ya…?

  4. Untuk Pemula Seperti aq… Tentunya Membuat Desain Logo Dengan CSS3 masih sangat2 membingungkan…, tp tetap semangat…belajardan belajar lagi…ok,Support U…!! Thanks..!!

  5. Rinjani says:

    Keren banget …artikel2 nya
    Thanks,,

  6. Lumayan dapet pencerahan Membuat Logo di blog ini , thanks gan

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development