Logo Pertamina dengan CSS

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.

Demo

Download