Membuat Desain Logo Dengan CSS3 Terbaru

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.

Bazstyle | Photography

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

Posted by Unknown

Tweet