Home » Internet » HTML PHP CSS » Membuat Efek Pada Border dan Background Blog

Membuat Efek Pada Border dan Background Blog

Cara membuat efek pemanis pada border dan background theme atau template blog. Mulai efek yang dihasilkan berupa garis sudut melengkung, bayangan, hingga permainan gradasi warnanya. Dengan melakukan sedikit atau banyak perubahan pada bentuk dasarnya maka blog akan menjadi tampil lebih cantik dan elegan. Berikut beberapa kode untuk membuat efek-efek tertentu pada theme atau template blog.

Sudah lama ingin membuat artikel ini, tapi bingung dalam membuat judul dan materinya, abis saya nyubi banget dalam hal begitu-begituan. Mau menyebut 3D ntar ternyata salah, mo njelasin itu berangkatnya dari mana tidak tahu. Yah pokoknya membuat tampilan blog supaya lebih terlihat elegan lah.

Langsung saja deh, semakin lama malah semakin bingung nih, terserah mau nyebut apa, pokoknya dari dasarnya dulu, kode untuk membuat border menjadi bulat. Buka file style.css untuk theme WordPress, Blogger langsung dalam file template xml, untuk format html bisa diletakkan di dalam tag <div> misalnya <div style=”….”>, sebagai contoh saya membuat untuk kotak menu

1. Kode dasar border atau kotak (box)

#menu {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

kode ini membuat kotak menjadi melengkung pada bagian sudut-sudutnya. Semakin tinggi (besar maksudnya) angkanya maka semakin mendekati bulat. Coba ganti angka -moz-border-radius:3px; menjadi 13, hasilnya sudut semakin melengkung. Coba ganti lagi dengan 1000px :) Hasilnya tidak ada perubahan, karena terkait dengan tulisan, padding, margin dll. Sekarang dikembangkan:

#menu {
	border-radius: 6px 6px 0 0;
	-moz-border-radius: 6px 6px 0 0;
	-webkit-border-radius: 6px 6px 0 0;
}

Kode ini membuat sudut bagian atas melengkung, yang bagian bawah tidak melengkung. Angka bisa di ubah, silahkan uji coba menjadi seperti kode ini-moz-border-radius: 16px 0 6px 0; hasilnya sudut kiri atas lebih melengkung (jadi kayak mobil), sudut kanan menjadi biasa, sudut kanan bawah jadi melengkung. Coba di gonta-ganti angka satu persatu akan terlihat perubahannya.

2. Efek bayangan kotak

#menu {
	box-shadow: 2px 2px 5px #333;
	-moz-box-shadow: 2px 2px 5px #333;
	-webkit-box-shadow: 2px 2px 5px #333;
}

kode ini membuat efek bayangan ke arah kanan bawah. Untuk mempercantik tampilan dan mempertegas efek animasi (wualah benar ga ya bahasanya) maka ditambah dengan kode 1px 1px 0 #fff, sebelum angka-angka yang sudah ada, menjadi seperti di bawah (tambah=merah)

#menu {
	box-shadow: 1px 1px 0 #fff, 2px 2px 5px #333;
	-moz-box-shadow: 1px 1px 0 #fff, 2px 2px 5px #333;
	-webkit-box-shadow: 1px 1px 0 #fff, 2px 2px 5px #333;
}

warna dan angka silahkan berimprovisasi dengan mengganti sesuai selera masa depan ;)

3. Efek pada background

Setelah membuat border beserta efek shadow, gilirannya membuat desain warna background supaya lebih hidup. Untuk yang ini belum paham arah permainan warnanya. Tapi yang jelas silahkan ganti dengan kata yang berlawanan baru deh tahu perbedaannya, misal kata top menjadi bottom, right menjadi left. Ganti angkanya sesukanya.

#menu {
	background: -moz-linear-gradient(top,rgb(105,105,105),rgb(218,218,218));
}

menghasilkan warna bagia atas agak hitam (millenium), yang bawah putih. Ah yang ini saya belum paham, lha saya masang di menu navigasi saja cuma kira-kira ;) , padahal itu yang paling simpel :( kalau yang lebih rumit lagi berikut ini

#menu {
	background: -webkit-gradient(linear,left center,right center, from(rgb(212,212,212)), to(rgb(150,150,150)));
	background: -moz-linear-gradient(left,rgba(212,212,212,1),rgba(150,150,150,1));
}

ini kebalikannya dari yang pertama, warna gradasi menyamping, coba ganti angka yang warna merah dengan 0.2 akan terlihat perubahannya.

Untuk mengetahui kode-kode berupa angka yang menunjukkan suatu warna, yang mudah menggunakan Program Adobe Photoshop, atau bisa juga program Paint bawaan Windows. Tinggal memasukkan angkanya secara urut pada kolom R, G dan B (Red, Green, Blue).

4. Posisi atau letak background fleksibel

Background dapat menempati suatu area tanpa harus terpengaruh kode-kode yang lain, fleksibel. Cukup menambahkan kode sebagai berikut :

position:absolute; top:90px;

Cobalah di ganti angkanya, bedakan dengan yang minus (-90px). Kata top bisa diganti dengan bottom. Dengan teknik ini maka bisa terlihat menindih area yang lain. Misalnya sidebar mentok ke atas tanpa mengubah atau mempengaruhi header dan menu navigasi.

Tetapi perlu diperhatikan, semakin panjang dan rumit kodenya akan berpengaruh terhadap loading blog saat diakses, apalagi jumlahnya banyak, karena browser tentunya akan lebih kesulitan menerjemahkan kodenya, harus bekerja keras membengkok-bengkok-an border :) . Selain itu web browser yang digunakan pengunjung perlu diperhitungkan, karena efek-efek tersebut tidak berfungsi di IE (tapi jarang yang memakai kok ya) lho siapa tahu blog Anda ternyata 80% menggunakan IE, maka efek pemanis tersebut menjadi sia-sia. Mungkin kedepan bisa jadi IE sudah support menerjemahkan kodenya.

Tentunya kode penulisan untuk kustomisasi efek border dan background ini akan mengalami perubahan. Maka biasanya saya rajin download theme atau template, untuk di buka tuntas barangkali ada hal baru :) Lha saya tahu kode-kode “aneh” di atas dari theme WordPress kok. Setidaknya dalam setengah tahun muncul kreatifitas atau sesuatu hal yang baru, itu yang saya tahu, atau pada dasarnya bisa jadi karena saya yang gaptekinfo ;) Maaf dan terima kasih.

Share to : Facebook | Twitter | Digg | Google | Technorati | Stumbleupon | Delicious | Reddit |

Artikel terkait :

Random Posts :

2 Comments.

  1. trims,,mas… membantu sangat..

    aku cinta indonesia

Leave a Comment