// set caret position after tabbing var selectEnd = end <= start ? end : end - tabCharacter.length + 1; select(selectEnd, selectEnd, target);
} else { // multiline
var selections = value.substring(start, end).split('\n');
for (var i = 0, len = selections.length; i < len; ++i) { if (selections[i].match(pattern)) { edits++; selections[i] = selections[i].replace(pattern, ""); } }
Saya membuat sebuah aplikasi/widget kecil untuk membuat posting di blog menjadi memiliki alternatif tampilan “layar penuh”. Tidak benar-benar layar penuh sebenarnya, karena widget ini hanya bekerja dengan cara menyisipkan tabir baru berisi duplikat judul dan konten posting. Kalau Anda ingin membuat fitur full screen sungguhan yang bisa memenuhi seluruh layar, Anda bisa mempelajari API JavaScript ini ⇒ MDN - Using Full Screen Mode
Selektor elemen HTML dimana di dalamnya berisi teks judul. Di atas Saya menggunakan selektor document.querySelector('.post-title') untuk memperoleh teks judul dari dalam elemen <h3 class='post-title'></h3>. Sebagai alternatif, Anda bisa mencoba untuk menggunakan selektor document.title untuk memperoleh judul dari address bar.
contentSource
Selektor elemen HTML dimana di dalamnya terdapat konten artikel/posting. Pengaturannya sama persis dengan opsi titleSource.
background
Digunakan untuk menentukan warna latar tabir layar penuh.
color
Digunakan untuk menentukan warna teks mode layar penuh. inherit artinya warna menyesuaikan dengan warna teks posting.
fontSize
Digunakan untuk menentukan besar teks di artikel layar penuh.
padding
Digunakan untuk menentukan padding tabir layar penuh.
maxWidth
Digunakan untuk menentukan lebar maksimal area artikel layar penuh.
openText
Digunakan untuk menentukan teks tombol pemicu layar penuh.
closeText
Digunakan untuk menentukan teks tombol penutup tampilan layar penuh.
createButton
Digunakan untuk membuat tombol kustom. Lihat penjelasan di bawah.
appendButtonTo
Nilai berupa selektor elemen HTML. Jika nilainya null, tombol akan secara otomatis disisipkan di bawah posting. Jika nilainya false, tombol tidak akan disisipkan secara otomatis (bermanfaat jika Anda ingin membuat tombol pemicu tersendiri secara terpisah).
beforeInit
Lihat penjelasan di bawah.
afterInit
Lihat penjelasan di bawah.
Penjelasan Ekstra
createButton
Opsi ini digunakan sebagai alternatif jika Anda tidak suka dengan tampilan tombol pemicu layar penuh secara normal. Anda bisa memanfaatkan opsi ini untuk menentukan/membuat elemen tombol kustom. Sebagai contoh di sini Saya menggunakan elemen tautan sebagai tombol:
Atau Anda juga bisa menentukan nilainya sebagai objek yang sudah ada. Sebagai contoh Anda membuat tombol pemicu secara manual di tempat tertentu, misalnya di sidebar:
Jangan lupa untuk mengatur opsi appendButtonTo menjadi false karena jika tidak tombol tersebut mungkin akan berpindah tempat. Secara umum akan berpindah ke bagian akhir posting:
Opsi ini digunakan untuk menentukan ke mana tombol pemicu tampilan layar penuh akan disisipkan. Berikut ini adalah sebuah contoh jika Anda ingin menyisipkan tombol pemicu layar penuh di dalam elemen #button-container:
Ini adalah opsi untuk membuat fungsi bebas yang akan tereksekusi sebelum (untuk beforeInit) dan sesudah (untuk afterInit) markup tabir tersisip ke blog. Yang paling berguna adalah beforeInit. Fungsi ini bisa Anda gunakan untuk memastikan bahwa manipulasi konten posting yang dilakukan oleh JavaScript telah dilakukan sebelum widget ini tereksekusi. Misalnya mengenai Syntax Highlighter atau JavaScript emotikon. Jika Syntax Highlighter atau JavaScript emotikon tidak diaktifkan sebelum widget ini aktif, maka kemungkinannya posting-posting kode yang berada di dalam artikel layar penuh tidak akan berwarna, dan emotikon-emotikon di dalam artikel tidak akan berubah menjadi gambar:
Mendesain elemen UI itu bukan cuma soal menentukan efek gradiasi yang bagus, efek bayangan yang realistis dan juga pewarnaan yang cocok dengan lingkungan. Web tidak sama dengan sekedar mendesain grafis, yang artinya bahwa semuanya tidak akan bisa semudah itu dibuat menjadi tampak sama pada semua peramban. Setiap peramban memiliki spesifikasinya sendiri-sendiri, dan terkadang mereka juga memiliki spesifikasi yang sangat berbeda, yang menurut kita mungkin sangat mengganggu. Namun tentunya spesifikasi tersebut memiliki tujuan tersendiri yang sangat khusus untuk peramban terkait agar bisa bekerja dengan baik/lebih baik dibandingkan dengan peramban-peramban yang lain. Kita tidak bisa melakukan apa-apa.
Membuat desain tampilan menjadi tampak sama —atau setidaknya nyaris sama— itu tidak mudah untuk elemen-elemen formulir. Anda harus mengikuti beberapa tahapan pembentukan ulang… dan yang terpenting adalah mengenai prioritas dalam hal kestabilan tampilan dibandingkan dengan keindahan tampilan.
Memulai dengan Tahap Pembentukan Ulang
Langkah awal yang harus Anda lakukan adalah menentukan posisi, jarak, padding dan beberapa pengaturan warna serta tipe fon secara global sebisa mungkin ke semua elemen formulir yang ada:
button, input, select, textarea { display:inline-block; /* alternatif yang lebih baik dibandingkan `display:inline` */ vertical-align:middle; /* posisikan elemen ke tengah secara vertikal terhadap teks */ width:170px; /* tentukan lebar elemen secara umum */ margin:1px 0; /* tentukan `margin` elemen secara umum */ padding:4px; /* tentukan `padding` elemen secara umum */ font:normal normal 13px/normal Arial,Sans-Serif; /* tentukan tipe fon secara umum */ color:#333; /* tentukan warna teks secara umum */ line-height:normal; /* tentukan `line-height` secara umum (deklarasi `line-height` pada selektor `font` di atas biasanya tidak bekerja pada elemen `<button>`) */ background-color:white; /* tentukan warna latar secara umum */ border:1px solid #333; /* tentukan `border` secara umum */
/* deklarasikan `box-sizing` yang seragam */ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
/* hapus outline jika mungkin */ outline:none; outline-offset:-2px; }
Pada kode di atas Saya juga menentukan ukuran lebar sebesar 170px secara global. Penentuan lebar elemen ini sebenarnya Saya tujukan hanya kepada elemen select dan elemen input yang berfungsi untuk menyisipkan teks (misalnya elemen formulir bertipe date, email, number, tel, text dan url). Namun karena Saya menerapkannya pada selektor CSS berupa input tanpa adanya penambahan atribut type secara spesifik, maka deklarasi lebar ini juga akan mempengaruhi semua elemen input yang tidak kita kehendaki, misalnya pada elemen input bertipe button dan checkbox. Oleh karena itulah setelah pendeklarasian tersebut dilakukan, kita juga harus mengembalikan ukuran lebar pada elemen-elemen formulir yang tidak kita kehendaki memiliki ukuran lebar tetap.
Kebetulan di sini Saya mengatur nilai lebar kembali menjadi auto pada elemen-elemen formulir berupa tombol, sehingga pada saat yang bersamaan Saya juga bisa menambahkan beberapa warna baru pada elemen-elemen ini untuk membedakan tampilannya dengan elemen-elemen formulir berupa masukan teks:
button, input[type="button"], input[type="reset"], input[type="submit"] { width:auto; /* mengembalikan ukuran lebar ke keadaan semula */ background-color:#333; /* tentukan warna latar yang berbeda untuk elemen-elemen tombol */ color:white; /* tentukan warna teks yang berbeda untuk elemen-elemen tombol */
/* buat `padding` kiri dan kanan menjadi lebih lebar untuk membuatnya lebih gemuk */ padding-right:8px; padding-left:8px;
font-weight:bold; /* buat teks menjadi tebal */ cursor:pointer; /* ubah kursor menjadi `pointer` untuk kenyamanan */ border-color:transparent; /* opsional */ }
box-sizing
Sedikit catatan mengenai deklarasi box-sizing yang Saya tambahkan. Itu berfungsi untuk mengatasi masalah ukuran lebar yang tidak seragam terutama pada elemen formulir berupa masukan teks dan selectbox:
Membandingkan ukuran elemen input dengan elemen select yang sudah dimodifikasi tanpa adanya deklarasi box-sizing yang seragam.
Dari gambar di atas terlihat bahwa meskipun keduanya sama-sama Saya beri ukuran lebar sebesar 170 piksel, padding sebesar 2 piksel dan border setebal 1 piksel (gambar perbandingan yang ke dua), pada kenyataannya elemen masukan teks akan menghasilkan lebar sebesar 173 piksel (border-left-width + padding-left + width + padding-right + border-right-width✗), sedangkan elemen selectbox akan memiliki lebar sebesar 170 piksel (width✓). Ini berarti bahwa elemen selectbox telah memiliki deklarasi box-sizing sebagai border-box secara normal, sedangkan elemen yang lain tidak —telah ditentukan oleh User Agent Stylesheet.
Anda bisa memilih untuk menentukan nilai properti ini menjadi border-box atau padding-box karena tujuan utama pendeklarasian properti ini memang hanya untuk menyamakan logika CSS Box-Model mereka saja. Tapi Saya sarankan untuk menggunakan border-box saja karena deklarasi ini memiliki satu keuntungan lain yaitu akan mempermudah Anda di dalam mengatasi masalah penentuan lebar elemen menuju ukuran 100% dengan hasil tampilan yang benar.
Kembalikan semua ukuran lebar elemen input bertipe checkbox dan radio serta image. Hilangkan juga deklarasi border, padding dan background yang kita deklarasikan sebelumnya:
/* hilangkan nilai `width`, `border`, `padding`, `background` yang telah dibuat sebelumnya pada elemen-elemen ini */ input[type="checkbox"], input[type="image"], input[type="radio"] { width:auto; padding:0; background:none; border:none; cursor:pointer; }
Setelah itu atur posisi elemen label menjadi berada di tengah secara vertikal. Atur juga tipe kursor menjadi pointer untuk menambahkan kenyamanan bagi pengguna. Bisa juga digabungkan dengan select, input[type="color"] dan input[type="file"] untuk meringkas kode CSS (meskipun properti display dan vertical-align sebenarnya sudah ditentukan sebelumnya):
Mungkin Anda pernah mengalami ini. Masalahnya bukan karena kode CSS Anda yang salah, tetapi karena Firefox memiliki elemen DOM bayangan yang mengitari bagian sebelah dalam elemen button dan elemen input bertipe button, submit atau reset seperti ini, yang telah membuat ukuran tombol menjadi lebih gemuk di Firefox:
Internet Explorer secara normal memiliki tampilan elemen textarea yang akan tetap meninggalkan scrollbar vertikal meskipun isinya kosong. Gunakan deklarasi overflow:auto untuk menghilangkan scrollbar pada elemen ini agar tampilannya sama dengan apa yang terlihat di peramban lain:
textarea {overflow:auto}
Beberapa deklarasi lain yang umum untuk membuat elemen ini menjadi lebih stabil:
textarea { overflow:auto; display:block; /* set sebagai elemen blok */ width:100%; /* buat lebarnya menjadi 100% */ resize:vertical; /* agar `textarea` hanya bisa diubah ukurannya secara vertikal (lainnya: `both`, `horizontal`, `none`) */ }
Efek :focus, :hover dan :active
Tentukan efek fokus secara global. Target utamanya adalah elemen input bertipe date, email, number, tel, text dan url serta select dan textarea:
Bisa menggunakan selektor pseudo kelas :disabled, tapi Saya sarankan untuk menggunakan selektor atribut saja yang memiliki dukungan peramban lebih bagus:
Berikut ini beberapa selektor CSS elemen pseudo dengan prefiks khusus yang berbeda-beda pada setiap peramban. Untuk alasan yang tidak Saya tahu, semua selektor ini tidak bisa digabungkan dengan tanda koma:
Berikut ini adalah hasil akhir untuk semua hal yang telah Saya jelaskan di atas. Ini bisa dikatakan sebagai kerangka dasar, sehingga Anda bisa cukup salin-tempel kode ini saja dengan aman ke dalam berkas CSS pada setiap awal mendesain:
/* TAHAP PEMBENTUKAN ULANG */
button, input, select, textarea { display:inline-block; /* alternatif yang lebih baik dibandingkan `display:inline` */ vertical-align:middle; /* posisikan elemen ke tengah secara vertikal terhadap teks */ width:170px; /* tentukan lebar elemen secara umum */ margin:1px 0; /* tentukan `margin` elemen secara umum */ padding:4px; /* tentukan `padding` elemen secara umum */ font:normal normal 13px/normal Arial,Sans-Serif; /* tentukan tipe fon secara umum */ color:#333; /* tentukan warna teks secara umum */ line-height:normal; /* tentukan `line-height` secara umum (deklarasi `line-height` pada selektor `font` di atas biasanya tidak bekerja pada elemen `<button>`) */ background-color:white; /* tentukan warna latar secara umum */ border:1px solid #333; /* tentukan `border` secara umum */
/* deklarasikan `box-sizing` yang seragam */ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
/* hapus outline jika mungkin */ outline:none; outline-offset:-2px; }
/* TOMBOL */
button, input[type="button"], input[type="reset"], input[type="submit"] { width:auto; /* mengembalikan ukuran lebar ke keadaan semula */ background-color:#333; /* tentukan warna latar yang berbeda untuk elemen-elemen tombol */ color:white; /* tentukan warna teks yang berbeda untuk elemen-elemen tombol */
/* buat `padding` kiri dan kanan menjadi lebih lebar untuk membuatnya lebih gemuk */ padding-right:8px; padding-left:8px;
font-weight:bold; /* buat teks menjadi tebal */ cursor:pointer; /* ubah kursor menjadi `pointer` untuk kenyamanan */ border-color:transparent; /* opsional */ }
/* PERBAIKI DIMENSI BEBERAPA ELEMEN INI */
/* hilangkan nilai `width`, `border`, `padding`, `background` yang telah dibuat sebelumnya pada elemen-elemen ini */ input[type="checkbox"], input[type="image"], input[type="radio"] { width:auto; padding:0; background:none; border:none; cursor:pointer; }
/* Anda mungkin akan membutuhkan ini untuk memastikan agar posisi checkbox dan radio bisa berada tepat di tengah secara vertikal. Saya mengomentari deklarasi CSS ini dan tidak menjelaskannya secara khusus di atas karena Saya pikir ini adalah praktek Magic Number yang tidak disarankan.
/* set tipe kursor ke `pointer` untuk kenyamanan */ input[type="color"], input[type="file"], label, select { display:inline-block; vertical-align:middle; cursor:pointer; }
/* textarea */ textarea { overflow:auto; display:block; /* set sebagai elemen blok */ width:100%; /* buat lebarnya menjadi 100% */ resize:vertical; /* agar `textarea` hanya bisa diubah ukurannya secara vertikal (lainnya: `both`, `horizontal`, `none`) */ }
/* MENORMALKAN ::-moz-focus-inner PADA TOMBOL-TOMBOL DI FIREFOX */
Setiap kali Anda mendesain elemen atom, selalu pastikan untuk menyelesaikan masalah-masalah di atas terlebih dahulu. Jika tidak, mungkin Anda akan mengalami berbagai kesulitan saat menangani masalah penampilan pada peramban-peramban tertentu.
Selain itu setidaknya Anda baru bisa/boleh mendesain tampilan elemen-elemen formulir setelah Anda menyelesaikan masalah tampilan elemen-elemen artikel. Setelah itu, Anda bisa memulai untuk menambahkan efek gradiasi, bayangan dan menyesuaikan warna-warna elemen-elemen formulir yang ada sesuai kehendak:
Setelah memperbaharui beberapa widget dan kemudian mengunggahnya kembali ke proyek Google Code yang baru, pada saat yang bersamaan sebenarnya Saya juga telah membuat salinannya di DropBox dengan harapan apabila suatu hari nanti terdapat masalah lagi pada proyek Google Code Saya, maka Saya bisa memberikan alternatif kepada kalian semua untuk mengunduh berkas salinan yang sudah Saya unggah di DropBox.
Semua tautan di bawah ini bukanlah tautan yang akan mengarahkan Anda menuju berkas secara langsung. Ini adalah tautan yang akan mengarahkan Anda menuju ke halaman unduhan, sehingga Anda harus mengunduh berkasnya terlebih dahulu, kemudian setelah mengunduh Anda harus mengunggahnya ke akun Google masing-masing. Bisa ke Google Drive atau ke Google Code:
Cara terbaik yang Saya sarankan untuk menghindari hal-hal yang tidak diinginkan pada widget Anda adalah dengan mengunduh berkas eksternal yang ada pada setiap artikel agar bisa kalian unggah ke dalam akun Google masing-masing. Atau cukup dengan cara menempelkan berkas JavaScript dan CSS secara inline di dalam templat. Hanya saja kekurangannya mungkin Anda akan ketinggalan pembaharuan yang terjadi jika sewaktu-waktu Saya melakukan pembaharuan pada widget tersebut. Tapi jangan khawatir! Sampai saat ini sepertinya semua widget buatan Saya sudah bisa berjalan dengan stabil tanpa keluhan, sehingga Saya rasa Saya tidak akan melakukan pembaharuan lagi pada widget-widget tersebut.
Mengenai permintaan penambahan fitur, diskusi pembaharuan atau saran modifikasi biasanya sudah Saya jelaskan pada komentar-komentar yang ada di bawah masing-masing artikel yang terkait dengan berkas tersebut. Anda tinggal membacanya saja dan mempelajarinya untuk kemudian menerapkannya sendiri.
Semua berkas di atas secara umum berada di bawah lisensi Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License dengan beberapa keringanan yang Saya buat setelah mempertimbangkan banyak hal, yang rencananya akan Saya buat tersendiri di dalam sebuah halaman khusus. Tapi saat ini belum ada. Untuk sementara Anda boleh berpedoman pada lisensi tersebut saja.
Saya tidak tahu apakah masih ada halaman lain di dalam blog ini yang memiliki tautan rusak. Kalau Anda kebetulan menemukan halaman seperti itu, mohon jangan sungkan-sungkan untuk mengeklik tombol Sunting yang tersedia pada setiap artikel agar Saya bisa segera memperbaiki kerusakan yang ada. Terima kasih.
Mungkin ini tidak penting tapi terkadang kita merasa bahwa menggeser-geser scrollbar dengan kursor bertipe pointer akan terasa lebih “enak” dibandingkan dengan menggeser-geser scrollbar dengan kursor bertipe default. Akan tetapi mengubah tipe kursor pada scrollbar tidak mungkin bisa dilakukan karena scrollbar tidak termasuk ke dalam elemen HTML (pengecualian jika kita menggunakan manipulasi seperti JavaScript Custom Scrollbar, karena setiap item penggulung dibuat menggunakan elemen HTML). Bahkan selektor CSS scrollbar milik WebKit pun tidak bisa dimanipulasi:
::-webkit-scrollbar-thumb { cursor:pointer; /* tidak bekerja! :( */ }
Satu cara sederhana yang bisa kita lakukan untuk mengubah tipe kursor pada scrollbar adalah dengan menerapkan tipe kursor menjadi pointer secara keseluruhan kepada area yang diinginkan, kemudian mengembalikan tipe kursor ke keadaan semula pada bagian dalam. Di sini kita membutuhkan elemen pembungkus ekstra:
HTML
<div class="scrollable-area"> <div class="scrollable-area-content"> <p>Lorem ipsum dolor sit amet...</p> </div> </div>
Contoh lain, mengubah tipe kursor menjadi n-resize pada scrollbar vertikal dengan tampilan kustom (buka halaman demo menggunakan peramban Google Chrome atau Safari):
Dalam JavaScript, istilah throttle dan debounce biasa digunakan untuk menyatakan mengurangi atau menunda eksekusi fungsi yang bekerja berkali-kali, misalnya ketika pengguna sedang mengubah ukuran layar atau menggerak-gerakkan pointer mouse. Tujuan utama dari metode ini adalah untuk memastikan agar eksekusi fungsi bisa bekerja seefektif dan seefisien mungkin sekaligus juga sejarang mungkin, sehingga peramban tidak akan terlalu terbebani di dalam mengeksekusi fungsi yang terjadi berkali-kali, yang belum tentu juga fungsi tersebut memang perlu untuk dijalankan sesering itu.
Throttle
Metode ini berdasar pada sebuah usaha untuk membuat jumlah eksekusi fungsi menjadi lebih jarang dari event yang terjadi. Di sini, fungsi bernama foo() akan dieksekusi setiap 1 detik sekali selama kita menggerak-gerakkan pointer mouse di atas dokumen dan bukannya setiap kali pointer mouse berkerak:
var delay = 1000, // Interval pembatas/penundaan eksekusi berikutnya (milidetik) previousCall = new Date().getTime(); // Set waktu kadaluarsa awal document.onmousemove = function() { var time = new Date().getTime(); // Bandingkan antara waktu terakhir kali eksekusi dengan waktu setiap kali event bekerja. // Jika selisihnya sudah mencapai/melebihi `delay`, jalankan fungsi `foo()` if ((time - previousCall) >= delay) { foo(); previousCall = time; // Set ulang waktu kadaluarsa } };
Metode ini berdasar pada sebuah usaha untuk membuat fungsi tereksekusi hanya jika pengguna telah berhenti melakukan suatu event yang berulang, atau hanya dieksekusi sekali saja saat pertama kali event terjadi. Misalnya ketika pengguna berhenti menggerakkan pointer mouse saja atau ketika pengguna mulai menggerakkan pointer mouse saja. Yang paling umum diterapkan adalah kasus yang pertama.
Fungsi di bawah ini terdiri dari penunda berupa setTimeout di dalam jenis event sensitif yang bisa mengeksekusi fungsi berkali-keli setiap kali pengguna menggerakkan pointer mouse di atas dokumen. Namun karena pada saat yang bersamaan fungsi clearTimeout menggagalkan setTimeout untuk mencapai akhir waktu tunda, maka fungsi foo() tidak akan pernah bisa tereksekusi sebelum pengguna benar-benar menghentikan gerakkan pointer mouse mereka:
var timer = null; document.onmousemove = function() { if (timer) clearTimeout(timer); // Hentikan `setTimeout` sesegera mungkin agar `foo()` tidak tereksekusi timer = setTimeout(function() { foo(); // Jalankan fungsi `foo()` jika timer tidak lagi dihentikan oleh `clearTimeout` timer = null; }, 300); };
function foo() { console.log('test!'); }
Waktu penunda selama 300 milidetik dibuat hanya sebagai toleransi saja untuk memastikan agar waktu eksekusi berjalan lebih lambat dari pergerakkan pointer mouse pengguna:
Beberapa Event JavaScript yang Masuk dalam Kategori Sensitif
Saya menyebutnya sebagai event yang sensitif karena event ini bisa mengeksekusi fungsi berkali-kali dengan cepat jika sedang dikerjakan oleh pengguna. Beberapa di antaranya adalah:
onmousemove (menggerakkan)
onscroll (menggulung)
onresize (mengubah ukuran)
onkeyup (mengetik)
onkeydown (mengetik)
onkeypress (mengetik)
Contoh Penerapan dalam Kasus Nyata
Berikut ini adalah sebuah gambaran penerapan debounce untuk mencegah AJAX memanggil data berkali-kali pada saat pengguna mengetik kata kunci pencarian. Di sini, data hanya akan terpanggil hanya jika pengguna telah berhenti mengetik:
Saya tidak begitu sering melihat penerapan metode throttle dalam kasus yang nyata. Tapi pada intinya, metode ini berfungsi untuk menunda fungsi agar fungsi tersebut tereksekusi dalam interval waktu tertentu saja pada saat pengguna menjalankan event.
Beberapa manfaat lain dari metode ini:
Membuat aplikasi yang dapat menyimpan data secara otomatis setiap kali pengguna berhenti mengetik.
Fitur penelusuran dengan AJAX yang memungkinkan pengguna untuk memanggil data tanpa harus memaksa pengguna untuk menekan tombol Submit. Cukup dengan mengetik kata kunci dan berhenti, maka hasil penelusuran akan segera dimuat.
Mengubah dan mengatur ulang posisi elemen dalam jumlah yang banyak dengan perhitungan yang rumit setiap kali pengguna mengubah ukuran layar pada interval tertentu.
Saya secara alami sering dan suka memperhatikan hal-hal yang detail, terutama pada elemen-elemen UI di dalam web-web terkenal seperti Google, Facebook dan juga berbagai framework web. Kali ini Saya akan membahas mengenai tampilan menu dropdown pada framework Bootstrap ini:
Menu dropdown pada Bootstrap.
Tampilannya terlihat sangat tajam dan dimensinya juga terlihat sangat tipis! Bagi Anda yang sudah terbiasa bekerja dengan aplikasi Photoshop dan sejenisnya mungkin tidak begitu asing dengan teknik untuk membuat efek seperti ini.
Pada kenyataannya, menciptakan elemen kotak dengan efek bayangan saja tidak cukup untuk memberikan kesan sisi yang tajam dan dimensi yang tipis seperti gambar di atas:
Deklarasi di atas sudah cukup untuk menciptakan efek kotak bergaris batas dan berbayang, namun tidak cukup utuk memberikan efek tajam pada elemen tersebut. Jika Anda memperhatikan dengan seksama pada menu dropdown di gambar pertama, maka seharusnya Anda akan menyadari bahwa garis batas pada menu tersebut ternyata tembus pandang:
Pembesaran tampilan.
Efek semacam ini tidak cukup dibuat hanya dengan warna solid dan bayangan, melainkan kita membutuhkan warna semi transparan pada border. Kita bisa menggunakan kode warna RGBA atau HSLA pada border:
Tapi sekarang efek transparan pada border justru menampilkan warna latar dari elemen .box di bagian bawahnya karena warna latar secara normal memang akan menembus sampai ke sisi terluar dari border (Anda bisa mengeceknya dengan mencoba mengubah tipe border menjadi dashed atau dotted). Untuk mencegah warna latar agar tidak melebihi batas dalam lingkar border, kita bisa menggunakan CSS background-clip dengan nilai padding-box:
Berikut ini adalah gambar cuplikan hasil tampilan pada efek sebelum dan efek sesudah:
Efek sebelum dan sesudah.
Penggunaan Properti background-clip Lainnya
Fungsi CSS background-clip adalah untuk menentukan apakah latar belakang elemen, baik warna atau gambar, akan meluas ke bagian bawah perbatasan atau tidak. Nilai padding-box pada properti ini memungkinkan warna latar yang secara normal akan melebar dan melebihi batas sebelah dalam dari lingkar border menjadi tidak melebihi batas tersebut. Selengkapnya mengenai CSS background-clip bisa Anda pelajari di sini
Secara pribadi Saya jarang menggunakannya untuk kepentingan dekorasi. Melainkan, Saya lebih sering menggunakan properti ini untuk memperbaiki tampilan yang sedikit rusak karena render piksel yang tidak terlalu baik pada beberapa peramban. Sebagai contoh adalah pada elemen tombol dengan efek rouded corner di sekelilingnya seperti ini:
Gambar sebelah kiri adalah tampilan standar tombol yang dibuat tanpa mendeklarasikan background-clip:padding-box. Jika Anda meperhatikannya dengan seksama, maka pada bagian sisi-sisi lengkungnya akan tampak sedikit warna latar yang melebihi batas. Saya tidak tahu mengapa, tetapi ini hanya terjadi pada elemen tombol yang dikenai deklarasi display:inline, sedangkan tombol dengan deklarasi display:inline-block atau display:block tidak mengalami masalah ini. Ini terjadi di Google Chrome.
Gambar sebelah kanan adalah hasil tampilan sesudah Saya menerapkan deklarasi background-clip:padding-box pada tombol. Terlihat lebih rapi, karena warna latar tidak menembus bagian sisi tombol.
Kembali kepada efek tajam dan super tipis pada menu dropdown, Google Chrome juga mengimplementasikan hal yang sama, hanya saja sepertinya dia menggunakan latar gambar, bukan CSS:
Menu dropdown pada Google Chrome.
Pada Google Chrome versi lama, Anda pasti pernah melihat sebuah menu di bagian kanan bawah bernama “Barusan Ditutup” yang jika diklik akan menampilkan daftar histori munculan yang juga memiliki kesan yang sama seperti yang sedang kita bahas sekarang, akan tetapi efek itu diciptakan menggunakan metode yang sedikit berbeda dan Saya pikir ini sudah tidak standar lagi karena hasilnya yang kurang rapi dan tidak konsisten. Bukan menggunakan border semitransparan dan CSS background-clip, melainkan menggunakan outline semitransparan. Hasilnya kurang bagus karena outline tidak bisa mengikuti efek lengkung di ujung-ujung kotak. Saya menambahkan ini sebagai pengetahuan tambahan saja. Seharusnya Saya membahas ini sebelum peramban tersebut diperbaharui sampai yang seperti sekarang:
Ini adalah teknik tersingkat, karena kita bahkan tidak memerlukan properti background-clip untuk menciptakan efeknya di sini. Hanya saja, jika peramban tidak mendukung CSS bayangan atau tidak mendukung CSS bayangan berganda atau tidak mendukung nilai spread pada CSS bayangan, maka efek garis batasnya tidak akan terlihat. Border memungkinkan kita untuk menciptakan fallback agar tampilan elemen tidak menjadi terlalu buruk pada peramban yang tidak mendukung CSS bayangan dan warna RGBA. Begini maksudnya:
.box { background-color:white; border:1px solid #bbb; /* warna fallback untuk peramban yang tidak mendukung warna RGBA */ border:1px solid rgba(0,0,0,.3); /* warna border yang seharusnya */ background-clip:padding-box; box-shadow:0 4px 15px -4px rgba(0,0,0,.6); }
