Ampun Deh, Box Shadow di Blogmu Bikin Saya Nggak Betah!
Kalau blog penuh iklan bikin jengkel sih sudah biasa. Nah, bagaimana kalau blog yang penuh dengan box-shadow? Resikonya, blog tersebut juga bisa membuat jengkel pengunjung. Termasuk saya contohnya. Daripada tidak sabar ketika menggulung halaman blognya yang terlalu lengket, lebih baik langsung saya ‘close’ (tutup) saja halaman blognya.
Mungkin ada yang belum tahu, apa sih sebenarnya box-shadow itu?
Box-shadow ialah efek berbayang untuk sebuah kotak. Dengan efek tersebut, kita bisa menciptakan tampilan visual yang lebih indah pada kotak menu yang ada pada blog kita. Efek ini diciptakan dengan kode CSS3. Contoh kodenya yaitu:
-moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc; atau box-shadow: inset 0px 0px 20px #000; -webkit-box-shadow: inset 0px 0px 20px #000; -moz-box-shadow: inset 0px 0px 20px #000;
Contoh tampilan box-shadow misalnya:
Pernah menemukan blog yang model kotak menunya seperti di atas?
Nah, masalahnya bukan pada box-shadow sebenarnya. Lho, gimana sih? Katanya box-shadow bikin saya jengkel?
Begini, sesuatu kalau pada takaran yang wajar tentunya tidak akan bermasalah. Nah, bagaimana kalau sudah berlebihan? Begitu pulalah yang berlaku untuk properti CSS3 berupa box-shadow.
Studi kasus sebuah blog yang menggunakan banyak box-shadow.
Ini memang kasus nyata (bukan ‘hoax’ atau saya karang-karang). Saya pernah menemukan sebuah blog yang amat sangat banyak menggunakan box-shadow pada kode CSS-nya.
Iseng saja saya intip ‘source kode’ CSS template yang digunakan blog tersebut. Ternyata saya menemukan ada 77 buah kode box-shadow! Bayangkan saja. Tidak heran jika akhirnya blog tersebut sangat berat ketika digulung halamannya.
Kok bisa saya menghitung angka sebanyak itu? Saya menggunakan teknik shortcut Ctrl + F dan pada kotak ‘find-text’ saya isikan dengan “box-shadow”. Dari hasil pencarian yang ter-’highlight’, saya hitung deh jumlahnya. Dapatlah saya angka sebanyak 77.
Apa tujuan Anda menggunakan banyak properti box-shadow?
Sekadar demi senikah? Hanya karena kita bisa mendesain dengan salah satu properti CSS3 tersebut, bukan berarti harus semua menu atau semua kotak kita beri efek berbayang.
Kalau sekadar memberi efek lengkungan sih tidak masalah dan tidak memberatkan ketika halaman digulung. Pun jika Anda hanya memberi efek berbayang pada beberapa kotak menu saja. Tapi kalau semuanya diberi efek begitu, wah, saya tidak heran jika halaman blog Anda begitu lengket bagaikan lem ketika digulung.
‘Good bye’ aja deh buat blog yang super berat begitu.
Sumber gambar: www.css3.info
Tautan Cepat »» Beri Komentar | Baca Ulang Posting
Baca Komentar | Daftar Posting Terbaru
Tambah KafeGue di Facebook 
Ikuti KafeGue di Twitter
Menu Lainnya »» Atas » Beranda » Arsip » Profil » Kontak » Bawah
Langganan KafeGue.com melalui Email
Langganan melalui Pembaca RSS
Firefox 5.0 | Windows XP
Jadi ngeri juga ya mas kalau terlalu banyak penggunaan box-shadow, kalau semisal penggunaan text-shadow cuma untuk beberapa huruf saja gimana mas?
mohon pencerahannya :D
Chromium 14.0.795.0 | Ubuntu 11.04
D3NYC4HYOE, kalau cuma text-shadow sih gak masalah sama sekali mas.
Firefox 3.6.8 | Windows XP
Kalo Buat Header / Title Blog Bermasalah gak ?
Google Chrome 11.0.686.0 | Windows XP
@Nurul Imam, sebenarnya masalah pada banyak sedikitnya penggunaan efek tersebut saja mas. Jika berlebihan, bisa saya pastikan akan memberatkan. Tapi kalau sewajawnya saja, ya tidak ada masalah. Dicoba saja dulu. Nanti bisa dinilai apa memberatkan atau tidak.
Firefox 3.6.8 | Windows XP
@iskandaria, Saya Coba Deh … Moga2 Bagus Dan Juga Ga Berat Klo Di Scroll
WordPress 3.0.4
[...] Ampun Deh, Box Shadow di Blogmu Bikin Saya Nggak Betah! [...]
Opera 10.63 | Windows XP
duh.. ko saya jadi ragu ya mau ninggalin komentar disini, hikzz.. takut kena juga soalnya. text-shadow pun sepertinya agak sedikit mempengaruhi (jika nilai blur nya besar) dengan catatan jika text-shadow (blur) itu ada hampir disemua link. untuk scroll ke bawah ada sedikit delay. mohon koreksi kalo salah.. itung-itung sambil belajar menyelam..
Google Chrome 9.0.587.0 | Windows XP
@Achot, wah, saya belum meneliti untuk pengaruh text-shadow. Makasih aja buat sharingnya mas. Gak perlu takut komen di sini. Saya nggak galak kok.
Firefox 3.6.12 | Windows XP
Jadi keingaten Blog SGC. Setelah modifikasi atas bantuan FM dengan templatre yang sekarang (Thesis), gimana pendapat Mas Is? :)
Google Chrome 9.0.587.0 | Windows XP
@Erdien, sudah enak dan bikin nyaman Pak. Cuma untuk daftar blogroll pada sidebar (halaman posting) kayaknya lebih bagus dibuat dalam ‘scrolling list’. Jadi bisa lebih menghemat area. Cuma mungkin rada teknis sih bikinnya. Nanti saya coba beri kodenya.
Firefox 3.6.12 | Windows XP
@iskandaria, Siip, saya tunggu Mas Is :D
Google Chrome 7.0.517.44 | Windows 7
Saya baru tau mas, box shadow bisa di buat pake css.
Maklum belum begitu tau banget tentang css.
Apalagi sekarang udah CSS3 ya?
Tambah ga tau deh :D
Firefox 3.6.12 | Windows XP
ya menurut saya apapun yang namanya berlebihan kemungkinan besar tidak baik.
Google Chrome 7.0.517.44 | Windows 7
Saya kira punya si Indam. Iya. Textarea ini juga bergerak2. Mengganggu. :(
Idem aja bro. Mungkin lagi keranjingan dengan box-shadow.
Google Chrome 8.0.552.210 | Windows XP
@ganda, bukan punya indam sih yang saya jadikan studi kasus itu. Iya nih, textarea semenjak saya mengubah ukuran font jadi 120% dan wrapper jadi 80% malah jadi bertingkah aneh kayak gini :( Padahal setelan ukuran font untuk textarea udah saya samain dengan di body.
Mungkin saya harus mereset ulang setelan textarea.
Firefox 3.6.12 | Windows 7
@iskandaria, Wow. :D Punya siapakah gerangan? :D
Google Chrome 8.0.552.210 | Windows XP
@ganda, ada aja deh. Kalo baca salah satu komen di atas pasti tau. Kalo blog indam kan udah nggak banyak pake box-shadow lagi.
Google Chrome 8.0.552.210 | Windows XP
@ganda, akhirnya bisa saya normalkan kembali nih textarea. Udah nggak gerak-gerak lagi Bro. Ternyata bermasalah pada setelan persen untuk font-nya. Jadi saya pakai px aja untuk font textarea.
Google Chrome 7.0.517.44 | Windows 7
mas iskandaria, saya belum begitu paham, apa itu box shadow ? :D
Google Chrome 8.0.552.210 | Windows XP
@Guusn, masa’ sih dari penjelasan di atas dan gambar yang saya sertakan belum juga paham? Pura-pura nggak ngerti kali nih..hehehe
Firefox 3.6.12 | Windows 7
waduh… blog OBS berarti menjengkelkan ya, soalnya banyak iklannya :)
Google Chrome 8.0.552.210 | Windows XP
@Octa Dwinanda, sebenarnya sih yang terpenting persentase antara iklan dan konten saja Pak. Termasuk bagaimana kita menaruh posisi iklan tersebut dan keselarasan tampilan visualnya dengan desain tema blog kita.
Firefox 3.6.12 | Windows XP
Bener Mas…
Apapun kalau berlebihan emang nggak selalu menguntungkan.
Paling aman memang proporsional…
Sama kayak bikin file presentasi pakai powerpoint…
Bagi yang pemula, biasanya dipenuhi gambar animasi yg nggak berhubungan dengan topik.
Pemilihan warnanya juga nggak nyaman dimata…
Salam!!
Google Chrome 8.0.552.210 | Windows XP
@marsudiyanto, setuju Pak MArs. Keseimbangan alias proporsionalitas memang paling aman. Soal power point itu, adanya animasi berlebihan justru bisa mengganggu ya. Mungkin karena terlalu pengen nonjolin seninya, tapi konten/materi presentasi malah diabaikan. Sama halnya dengan blogger yang terlalu menonjolkan seni pada desain blognya, tapi di sisi lain malah membuat pengunjung tidak nyaman.
Firefox 3.6 | Windows XP
hadooh. begitu yya?? saya sudah terlanjur buat box-shadow ik :’(
emang berat yya?? :-o
tapi kok dikompi saya biasa2 aja tuh..
Google Chrome 8.0.552.210 | Windows XP
@nisa sanjaya, berat kalau berlebihan mas. Kalau cuma sedikit ya nggak papa.
Google Chrome 7.0.517.44 | Windows 7
Mungkin sang empunya blog berkeinginan biar blognya bisa kelihatan lain dari blog tetangga, namun dia ngga menyadari akan kenyamanan pengunjung blognya bro….. Atau bisa juga sekedar pamer bro :-)
Google Chrome 8.0.552.210 | Windows XP
@eserzone, kalau sekadar mau pamer sih saya bisa maklum. Namanya juga manusia, pasti ingin hasil karya seninya dilihat atau menimbulkan kekaguman. Nah, yang jadi masalah yaitu ketika ternyata itu malah membuat orang lain merasa kurang nyaman.
Firefox 3.6.12 | Windows 7
Menurut saya penerapan box-shadow hanya cocok untuk border dan hover gambar saja..
Kalau penggunaan box-shadow terlalu banyak, itu hanya akan membunuh para pengunjung yang datang..
Google Chrome 8.0.552.210 | Windows XP
@Yanuar, menurut saya hanya cocok untuk efek saat hover saja. Kalau untuk border, sebenarnya bagus juga sih, asalkan tidak berlebihan. Dalam arti, tidak semua border pada area blog harus dikasih efek shadow. Kalau berlebihan, jadinya malah kurang unik dan murahan. Lain halnya kalau cuma kita beri pada area/border menu tertentu saja.
Google Chrome 7.0.517.44 | Windows 7
@iskandaria, Lebih tepatnya border image pada saat dihover.
Studi kasus seperti yang jurusgrafis.com terapkan (saya suka), tapi sepertinya sekarang sudah di bunuh.
Google Chrome 8.0.552.210 | Windows XP
@Yanuar, betul mas. Saya setuju. Tapi sayang juga ya trik tersebut sudah dibunuh oleh mas Richard Fang. Padahal bagus.
Firefox 3.6.12 | Windows XP
blogku nggak sampai 77, tapi, blogku juga sukar di scroll.
Google Chrome 8.0.552.210 | Windows XP
@indam, sekarang sudah ringan kok. Bukan blog indam dot com yang saya jadikan studi kasus di atas.
Firefox 3.6.12 | Windows XP
Saya tadinya ga tau arti box shadow, tapi setelah mampir ke blog terdakwa, saya jadi ngerti dikit2 hehe.. *serem banget istilahnya: terdakwa :D*
Dan memang unsur2 yang memperlambat user sebaiknya dikurangi saja deh
Chromium 7.0.517.44 | Ubuntu 10.10
@Darin, baru muncul lagi nih mas DArin. Iya, serem juga kalau pakai istilah terdakwa. Itu cuma studi kasus aja. Bukan berarti cuma blog itu yang saya anggap berat.
Google Chrome 7.0.517.44 | Windows XP
saya membuka blog yg dimaksud memang berat mas.. apalagi warna fontnya beberpa hampir sama backgroundnya :D
Chromium 7.0.517.44 | Ubuntu 10.10
@tomi, hahaha. Tapi unik banget jadinya. Oya, ternyata pas saya buka di Linux lebih ringan tuh blognya. Kalo di Windows entah kenapa agak berat.
Google Chrome 8.0.552.210 | Windows XP
BTW, blognya siapa yang pakai box shadow?
BTW, ini form aneh, gerak-gerak gitu. Bikin kesal juga-kah?
Firefox 3.6.12 | Windows XP
@ardianzzz, Indam :lol:
Google Chrome 8.0.552.210 | Windows XP
@Fadel, bukan! Salah tebak tuh. Blognya indam kan udah nggak banyak box-shadow lagi.
Firefox 3.6.12 | Windows XP
@iskandaria, Jadi siapa ya? jangan² Blog saya :lol:
Chromium 9.0.587.0 | Ubuntu 10.04
@Fadel, Orangnya sudah ngaku tuh diatas :D
Chromium 7.0.517.44 | Ubuntu 10.10
@aldy, hahahaa. Bisa aja nih Pak Aldy.
Google Chrome 8.0.552.210 | Windows XP
@ardianzzz, iya nih. Semenjak saya mengubah ukuran font jadi 120%,
textareapas dihover malah jadi meninggi. Udah saya utak-atik berkali-kali, masih nggak mau normal mas.Punya solusi nggak? Jadi ini bukan saya sengaja ya. Saya aja yang punya blog ngerasa terganggu kok.
Firefox 3.6.12 | Windows XP
@ardianzzz, Kayaknya saya juga tahu, tapi kan g enak kalau disebutin
Chromium 7.0.517.44 | Ubuntu 10.10
@Rizky2009, sebenarnya tulisan di atas untuk semua blog yang banyak menggunakan box-shadow sih. Contoh satu blog itu sebagai studi kasus aja.
Firefox 3.6 | Windows XP
kalau di blog saya, rasanya yang bikin berat di halaman artikel karena iklannya kang. hehehe :D
tapi di halaman depan, uda saya buang semua
Chromium 7.0.517.44 | Ubuntu 10.10
@ajundi14, kalo pemasukan iklannya banyak sih dipertahankan aja mas. Tapi kalo ternyata nihil/minim, ya ada baiknya dipangkas dulu iklannya. Nunggu trafik udah gede baru pasang lagi.
Oya, blog mas Ajun susah sekali saya buka. Mungkin masalah hosting atau karena IP address yang saya gunakan pernah dipakai spammer.
Firefox 3.6 | Windows XP
@iskandaria, iya mas, menurut saya juga begitu. tapi, saya akan pertimbangkan dulu. lagi nunggu wangsit nih :D
Firefox 3.6.12 | Windows XP
kalau blog q gimana yah, menurut mas is ? aq juga pernah kedapat blog yang menggunakan full box sadok gila berat juga loadnya sebenarnya tak apalah, kalau aq ngrasa inet q g sanggup y aq close juga, penggunaah css 3 sebenranya bagus juga tp yang kudu di perhatikan, apakah css 3 sudah support dengan semua browser, saya sependapat dengan mas agoest, kalau browser yang di gunakan tidak support al hasil tampilannya jadi kotak2 kayak tahu, kayaknya blog q juga kenana nih…….
Google Chrome 8.0.552.18 | Windows XP
@Rizky2009, blog mas Rizky masih ringan kok ketika saya gulng halamannya. CSS3 setahu saya udah disuppport oleh semua browser modern, khususnya versi terbaru. Kalao IE6 dan IE7 serta Opera di bawah versi 10 setahu saya belum support.
Firefox 3.6.12 | Windows XP
@iskandaria, Kalau tidak salah blog saya menggunakan total kurang lebih 20 an box-sadok, itu masih normal atau mesti harus dikurangi,
Google Chrome 8.0.552.210 | Windows XP
@Rizky2009, masalah masih normal atau tidak, saya nggak punya patokan sih. Yang penting pas halamannya digulung masih terasa ringan (tidak berat). Itu aja patokannya.
Chromium 7.0.517.44 | Ubuntu 10.10
@Rizky2009, oya. Versi terbaru Opera (11.00) ternyata belum juga mensupport box-shadow dan border radius.
CometBird 3.6.12 | Windows XP
ha..ha…ha…keliru mas,malah dalam hitungan saya terdapat 89 item box-shadow…
dan memang aneh kalau di buka dgn peramban opera,jadi kotak-kotak kayak tahu….
tapi mau ganti template masih malas kayaknya…malas cari templatenya..
memang kalau sudah masuk masalah teknis seperti ini,jujur saya tidak menguasai,sebab sebagai patokan hanya kecepatan modem saya,asalkan masih bisa saya buka dengan modem saya,enjoy saja…soalnya saya pakai modem smart reguler yg speed cuman mentok di angka 110kbps…
kalau otak-atik tata cahaya di panggung sebesar apapaun saya jabanin,mau pake tehnik lighting yg bagaimanapun okey,indoor,outdoor,makanan sehari-hari,tapi kalau sudah di suruh analisa web seperti mas Is,ampun deh,kenal blog aja juga sekedar iseng….
akhirnya yang terjadi ya gitu deh..asal tancap saja..soalnya suatu hal yg menakjubkan bagi saya mengenal dunia web,dengan bahasa yg aneh-aneh tercipta suatu visual yg menakjubkan [soalnya terbiasa dengan hal yg real,walaupun lighting tetap computerized,tapi tetap bisa di jangkau oleh otak saya]…
jadi untuk soal yg satu ini,design web dsb,saya harus belajar banyak dari senior yg lebih ahli analisa…
untuk sementara biarin dulu,ntar kalau bosan di ganti,wong ganti template juga gratis,ganti berapa kalipun juga nggak ada hukuman..lagi malas otak-atik template..
Google Chrome 8.0.552.18 | Windows XP
@agoest, hahahaa… Mas Agoest ngitung juga ya ternyata. Saya malah mengira bahwa mas Agoest jago banget soal utak atik template. Soalnya saya lihat template blog kometral nganjuk terkesan bukan template gratisan. Saya nggak menemukan link menuju halaman pembuat templatenya. Yang ada cuma link kometral nganjuk dan modify by agoest (pada footer) serta design : agoest (pada source-code).
Oke lah. Yang penting mas Agoest enjoy-enjoy aja dengan blognya.
Saya cuma seorang pengamat/pemerhati desain web dan blog. Belum layak disebut pakar di bidangnya. Yang saya tahu baru HTML, CSS, dan PHP. Kalau pemrograman web lainnya saya masih nol.
CometBird 3.6.12 | Windows XP
@iskandaria, sekalian minta saran deh..coba mas menuju ke sini ..di antara semua template,mana yang lebih compatible dengan blogspot,dari semua segi..itu kemarin iseng-iseng saya bikin,tapi belum berani mencoba aplikasikan ke blog saya….
Chromium 7.0.517.44 | Ubuntu 10.10
@agoest, kalau memang semua template itu diperuntukkan buat blogspot, saya rasa semuanya kompatibel kok mas. Atau mungkin makna kompatibel yang mas Agoest maksudkan beda ya?
Menurut saya, dicoba aja satu per satu mas. Biar efeknya keliatan. Jadi dari situ kita bisa tau, mana yang cocok dan tidak error.
Maaf nih, saya udah lama nggak utak-atik kode template blogspot. Jadi saya agak lupa pakem-pakem coding blogspot.
Oya, komen mas Agoest masuk moderasi otomatis karena berisi link. Jadi maaf kalo baru bisa tampil sekarang.
CometBird 3.6.12 | Windows XP
@iskandaria, “Menurut saya, dicoba aja satu per satu mas” ..halah..malah di suruh mencoba satu persatu..ha..ha…ha…lha wong mau ganti template yg sekarang aja malasnya bukan main..koq malah di suruh coba satu persatu…
Google Chrome 8.0.552.210 | Windows XP
@agoest, jadi maunya gimana mas? Saya nggak mau terkesan sok tau soalnya. Saya dulu juga gitu pas belajar utak-atik template blogspot. Saya cobain aja satu per satu. Belajar sambil melakukan. Itu kebiasaan saya. Kalo saya cuma menebak-nebak (alias sok tahu) bisa berabe jadinya.
Bisa aja kan saya sok tau ngasih rekomendasi ke mas Agoest tentang template mana yang kompatibel (padahal saya aslinya nggak tau).
Firefox 3.6.12 | Windows XP
Kira-kira saya bisa menebak blog siapa tuh,tapi menurut saya yang bikin berat adalah property
insetyang membuatbox-shadowmenjadi tambah berat.Google Chrome 8.0.552.18 | Windows XP
@Rudy Azhar, bisa jadi karena inset Bang. Untuk lebih objektif dalam menilai/menyimpulkannya, mungkin Bang Rudy bisa sedikit bereskperimen. Misalnya apakah terasa lebih berat ketika menggunakan properti
insetketimbang tidak.Google Chrome 8.0.552.210 | Windows XP
Kan ada IReader Mas :P
Memang kalau nilai suatu shadow terlalu tinggi/memakai terlalu banyak bisa menyebabkan halaman jadi susah di scroll, terutama bagi pengguna FF, Safari dan opera. Tapi buat Chrome sepertinya tidak masalah.
BTW… Memangnya blog siapa sih?
Google Chrome 8.0.552.18 | Windows XP
@Padly, kalau cuma buat baca sih memang cukup diakali dengan iReader mas. Tapi kalo kita juga ingin ngasih komentar atau ingin lihat-lihat menu navigasi di blognya (ingin ngebuka lebih banyak posting), itu yang jadi masalah. Mau gak mau kan harus ‘scrolling’ halaman juga.
Di Chrome saya masih berat tuh. Padahal saya pakai Chrome versi terkini dan RAM laptop saya sebesar 2 GB.