Logo Pertamina memang sederhana tetapi sangat elegan. Maklum saja logo tersebut harganya sangat mahal, sekitar USD 350.000 (atau 3,5 milyar -waktu itu-) dan ditangani langsung oleh perusahaan branding terkenal Landor.
Nah, pada posting ini saya akan mencoba membuat logo Pertamina dengan menggunakan HTML dan CSS murni. Tanpa gambar atau bantuan program seperti Photoshop, Ilustrator, CorelDraw, dll.
Untuk membuatnya ada beberapa tahapan. Dan yang menjadi kunci utama adalah menggunakan teknik CSS3, yaitu transform-properties
dan border-radius
.
Tahap Pertama
Terdapat 3 bagian inti yang membentuk huruf “P” pada logo Pertamina, dan masing-masing memiliki warna yang berbeda. Yaitu warna merah #fd0017
, hijau #9fe400
, dan biru #0073fe
. Langkah awal kita buat semantik HTML seperti ini.
<div id="pertamina"> <div class="red"></div> <div class="green"></div> <div class="blue"></div> <p class="text">Pertamina</p> </div>
Kemudian kita atur style-nya di CSS.
#pertamina { margin: auto; width: 380px; height: 440px; position: relative; overflow: hidden; } .red { -moz-transform: skew(33deg); /* Firefox */ -webkit-transform: skew(33deg); /* Chrome & Safari */ -o-transform: skew(33deg); /* Opera */ -ms-transform: skew(33deg); /* IE9 */ transform: skew(33deg); background: #fd0017; border-radius: 0 19px 0 19px; height: 99px; left: 231px; position: absolute; top: 72.5px; width: 116px; } .green { -moz-transform: skew(-33deg); /* Firefox */ -webkit-transform: skew(-33deg); /* Chrome & Safari */ -o-transform: skew(-33deg); /* Opera */ -ms-transform: skew(-33deg); /* IE9 */ transform: skew(-33deg); background: #9fe400; border-radius: 19px 0 19px 0; height: 98px; left: 231px; position: absolute; top: 194.5px; width: 116px; } .blue { -moz-transform: skew(-33deg); /* Firefox */ -webkit-transform: skew(-33deg); /* Chrome & Safari */ -o-transform: skew(-33deg); /* Opera */ -ms-transform: skew(-33deg); /* IE9 */ transform: skew(-33deg); background: #0073fe; border-radius: 19px 0 19px 0; height: 165.5px; left: 55px; position: absolute; top: 194.5px; width: 116px; }
Sebenarnya 3 bagian warna tersebut awalnya berbentuk kotak/persegi biasa. Untuk membuat agar bisa miring, maka kita gunakan transform: skew()
. Sedangkan untuk membuat sudut pada kotak/persegi agar melengkung pada salah satu sudutnya, kita gunakan border-radius
.
Tahap Kedua
Jika kita perhatikan secara detil, maka pada bagian kotak/persegi yang berwarna biru bagian kiri atas, maka bentuknya agak lancip mengarah ke kiri. Untuk membuat bentuk lancip tersebut, kita gunakan pseudo-elements :after
.
.blue:after { -moz-transform: skew(-2deg); /* Firefox */ -webkit-transform: skew(-1deg); /* Chrome & Safari */ -o-transform: skew(0deg); /* Opera */ -ms-transform: skew(-1deg); /* IE9 */ transform: skew(-1deg); background-color: #efefef; border-top-left-radius: 9px; box-shadow: -9px 0 0 #0073fe; content: ""; height: 13px; position: absolute; right: -13px; top: 0; width: 13px; }
Tahap Ketiga
Langkah terakhir adalah menambahkan tulisan PERTAMINA pada bagian bawah logo. Jika mengacu pada logo asli Pertamina, sampai saat ini saya belum tahu jenis font yang digunakan. Maka dari itu, saya memilih font Arial Black yang hampir sama dengan logo asli tersebut.
.text { bottom: -15px; font-family: "Arial Black", Arial, sans-serif; font-size: 56.5px; font-weight: 900; left: -1px; position: absolute; text-transform: uppercase; }
Browser yang Kompatibel
Hampir semua browser yang modern kompatibel dengan Pertamina CSS Logo ini. Adapun yang sudah saya coba adalah Mozilla Firefox 9.0.1, Google Chrome 16.0.912.75, Safari 5.1.2, Internet Explorer 9, dan Opera 11.60.
Selamat mencoba, dan Mari Belajar, Mari Berbagi Ilmu.
Keren mas… mantap
terima kasih pak… mantap jaya 😀
owh, saya kita logo patra jasanya 😀
klo logo yg kuda laut gmn mas?
Wah kalau logo lama Pertamina yang lama susah mas, mungkin bintangnya boleh dicoba.
inspiratif! terus berbagiilmu
ada yang tahu jenis font yang di gunakan untuk PTC? ( pertamina training dan consulting )
saya kurang tahu mas, hehehe 🙂
sip. akhirnya saya tahu kode warnanya mas :). any way, please kunjungi blog pribadiku yah di indrawriter.wordpress.com
bagus sekali tampilanya, bisa di setting pakai css