Jika pada postingan yang lalu kita sudah bisa lebih memahami properti padding dan margin, kini kita mengulang sedikit tentang pemahaman dalam CSS, tujuannya agar kita selalu ingat masing2 kegunaan properti ini. CSS boleh dibilang pengulangan yang dilakukan beberapa banyak akan tetapi menulisnya (koding) cukup sekali. Selanjutnya oleh browser akan diterjemahkan berapa kali pengulangan harus dilakukan berdasarkan value (nilai) pada properti yang sudah kita tentukan.

Sebagai contohnya gambar2 pada postingan blog ini. Saat mouse melewati diatasnya (hover) maka browser akan mengulang berdasarkan value yang sudah ditetapkan. Pada template ini, aku mengatur pembesaran gambar dari gambar asli 100% saat di lewati mouse (hover)maka gambar akan membesar menjadi 130 % kita bebas dalam menetukan pembesaran atau pengecilan (ease-in-out), tinggal diatur valuenya saja.

<style type="text/css">
#megar img{
-webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 2s ease-in-out;
}

#megar img:hover{
-webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);  
}
</style>

Penulisan nama dalam CSS juga terserah kita, tidak ada ketentuan khusus yang mengatur, seperti pada penulisan kode CSS diatas. Gambar aku ganti dengan megar karena jika mouse melewati diatasnya, maka gambarnya akan membesar dan kembali ke ukuran semula (ease-in-out) secara otomatis, dan pembesaran ini aku beri nilai (value) transform: scale(1.3) artinya 1.3 kali pembesaran dari nilai aslinya. Sedangkan value all 2s ease-in-out maksudnya saat membesar dan kembali kebentuk semula berjalan pelan sesuai waktu yang ditetapkan. Pada template ini aku beri nilai 2s (secon) atau 2 detik, jadi gerakannya lembut. Semakin besar nilainya gerakannya akan semakin lembut. tapi jadi lama, oleh karena itu kita pakai waktu yang wajar saja.

Lalu kenapa ada tulisan webkit , moz, o, ms  padahal nilainya sama 1.3? perlu kita ketahui setiap browser itu memiliki karakter sendiri, sesuai dengan yang membuat program browsernya, jika kita tidak mau mengikuti kode yang sudah mereka tetapkan, maka browser yang kita gunakan tidak akan membaca perintah yang telah kita tetapkan, perintah kita akan diabaikan oleh browser.

Contoh sederhana, pada browser Mozilla saat kita menuliskan perintah tulisan harus berkedip-kedip (dengan menyisipkan kode <blink> tulisan berkedip </blink>)  maka tulisan diantara tag (penanda) tulisan berkedip akan berkdip-kedip, tapi perintah ini hanya berlaku jika kita memakai browser Mozilla, jika kita mamakai broser lain semisal Chrome atau IE, maka kode perintah <blink> akan diabaikan, sehingga  tulisan berkedip tidak akan berkdip.



Nah kebetulan pada template blog ini semua gambar yang di posting sudah aku tetapkan menggunakan bahasa CSS jika mouse melewati gambar maka secara otomatis akan membesar menjadi 1.3 kali dari gambar aslinya.

Perlu diingat sekali lagi tidak semua browser mendukung bahasa CSS, terutama IE, sehingga jika kalian kebetulan mampir ke blog ini dan tampilan templatenya biasa biasa saja, berarti browsernya tidak mendukung. Hal ini akan tampak jika kita menyisipkan kode spoiler dengan kode javascript. Pada browser Mozilla perintah spoiler akan di baca dengan sempurna, tetapi saat sobat membuka dengan browser Chrome maka kode perintahnya sebagian akan diabaikan. Sehingga tidak sesuai dengan yang kita harapakan. Oleh karena itu, saat kita melakukan desain, kita harus mencoba menjalankan pada beberapa browser, apakah tampilan yang kita tetapkan dibaca juga oleh browser tersebut, karena kita tidak mungkin menyuruh orang harus memakai browser tertentu, tentu sesuka mereka mau pilih browser yang mana.

Untuk amannya jika kita sudah menguasai kode HTML, Javascript, Jquery library,  kita lebih baik membuat desain dengan PhotosShop, karena bentuknya image, maka semua browser pasti mau membaca. dan tampilannya pun sungguh apik karena bentuknya gambar bukan Css.

Perhatikan beberapa contoh desain yang menggunakan PhotoShop


PhotoShop memiliki kemampuan untuk merancang desain sebuah blog atau web dengan tampilan yang mengagumkan, sangat profesiaonal, gambar yang dibentuk dari PhotoShop akan di pecah menjadi bagian2 kecil kemudian dengan kode pengulangan css (repeat x, y)gambar tersebut kita satukan kembali sehingga tidak memberatkan loading web atau blog. Pada menu horisontal dan footter blog ini tampilannya dibuat dengan PhotoShop juga. Kita bisa membikin model menu apa saja dengan PhotoShop dan tidak ribet !



Begitulah dunia desain web yang perlu kita ketahui, seandainya sobat ingin menjadi seorang desainer web, maka diperlukan banyak belajar tentang art dan bereksperimen dalam koding2, terserah mau pakai koding jenis apa, karena bahasa pemrograman web itu banyak jenisnya, ada PHP, Visual basic script, HTML, XML, Java dll.

Mengubah sebuah foto atau gambar agar menjadi tampilan web atau blog yang interaktif dan menarik, hal ini seperti jika kita ingin menjual suatu produk, dimana desain kemasan memegang kendali utama selain isi produknya sendiri. bahkan ada kemungkinan biaya kemasan lebih mahal dari isi yang di jual. Demikian dengan blog, blog kalau tampilannya berantakan tentu kita tidak nyaman membaca isi posting. walaupun isinya bagus.

Ok sampai disini dulu nanti kita lanjutkan lagi pembahasan tentang pernak pernik blog, misalnya mengisi animasi dan lain2..

Foto ilustrasi template :
psd.tutsplus.com