Saya secara alami sering dan suka memperhatikan hal-hal yang detail, terutama pada elemen-elemen UI di dalam web-web populer ibarat Google, Facebook dan juga aneka macam framework web. Kali ini Saya akan membahas mengenai tampilan sajian dropdown pada framework Bootstrap ini:
Tampilannya terlihat sangat tajam dan dimensinya juga terlihat sangat tipis! Bagi Anda yang sudah terbiasa bekerja dengan aplikasi Photoshop dan sejenisnya mungkin tidak begitu absurd dengan teknik untuk membuat imbas ibarat ini.
Pada kenyataannya, membuat elemen kotak dengan imbas bayangan saja tidak cukup untuk menawarkan kesan sisi yang tajam dan dimensi yang tipis ibarat gambar di atas:
/* Belum cukup! */ .box { background-color:white; border:1px solid #bbb; box-shadow:0 4px 15px -4px rgba(0,0,0,.6); }Deklarasi di atas sudah cukup untuk membuat imbas kotak bergaris batas dan berbayang, namun tidak cukup utuk menawarkan imbas tajam pada elemen tersebut. Jika Anda memperhatikan dengan seksama pada sajian dropdown di gambar pertama, maka seharusnya Anda akan menyadari bahwa garis batas pada sajian tersebut ternyata tembus pandang:
Efek semacam ini tidak cukup dibentuk hanya dengan warna solid dan bayangan, melainkan kita membutuhkan warna semi transparan pada border. Kita dapat memakai isyarat warna RGBA atau HSLA pada border:
.box { background-color:white; border:1px solid rgba(0,0,0,.3); box-shadow:0 4px 15px -4px rgba(0,0,0,.6); }Tapi kini imbas transparan pada border justru menampilkan warna latar dari elemen .box di kepingan bawahnya sebab warna latar secara normal memang akan menembus hingga ke sisi terluar dari border (Anda dapat mengeceknya dengan mencoba mengubah tipe border menjadi dashed atau dotted). Untuk mencegah warna latar supaya tidak melebihi batas dalam lingkar border, kita dapat memakai CSS background-clip dengan nilai padding-box:
.box { background-color:white; border:1px solid rgba(0,0,0,.3); background-clip:padding-box; box-shadow:0 4px 15px -4px rgba(0,0,0,.6); }Membandingkan Hasil Tampilan
Berikut ini yaitu gambar cuplikan hasil tampilan pada imbas sebelum dan imbas sesudah:
Penggunaan Properti background-clip Lainnya
Fungsi CSS background-clip yaitu untuk memilih apakah latar belakang elemen, baik warna atau gambar, akan meluas ke kepingan 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 dapat Anda pelajari di sini
Secara eksklusif Saya jarang menggunakannya untuk kepentingan dekorasi. Melainkan, Saya lebih sering memakai properti ini untuk memperbaiki tampilan yang sedikit rusak sebab render piksel yang tidak terlalu baik pada beberapa peramban. Sebagai pola yaitu pada elemen tombol dengan imbas rouded corner di sekelilingnya ibarat ini:
Gambar sebelah kiri yaitu tampilan standar tombol yang dibentuk tanpa mendeklarasikan background-clip:padding-box. Jika Anda meperhatikannya dengan seksama, maka pada kepingan 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 duduk kasus ini. Ini terjadi di Google Chrome.
Gambar sebelah kanan yaitu hasil tampilan sehabis Saya menerapkan deklarasi background-clip:padding-box pada tombol. Terlihat lebih rapi, sebab warna latar tidak menembus kepingan sisi tombol.
Kembali kepada imbas tajam dan super tipis pada sajian dropdown, Google Chrome juga mengimplementasikan hal yang sama, hanya saja tampaknya ia memakai latar gambar, bukan CSS:
Pada Google Chrome versi lama, Anda niscaya pernah melihat sebuah sajian di kepingan kanan bawah berjulukan “Barusan Ditutup” yang kalau diklik akan menampilkan daftar histori munculan yang juga mempunyai kesan yang sama ibarat yang sedang kita bahas sekarang, akan tetapi imbas itu diciptakan memakai metode yang sedikit berbeda dan Saya pikir ini sudah tidak standar lagi sebab jadinya yang kurang rapi dan tidak konsisten. Bukan memakai border semitransparan dan CSS background-clip, melainkan memakai outline semitransparan. Hasilnya kurang elok sebab outline tidak dapat mengikuti imbas lengkung di ujung-ujung kotak. Saya menambahkan ini sebagai pengetahuan embel-embel saja. Seharusnya Saya membahas ini sebelum peramban tersebut diperbaharui hingga yang ibarat sekarang:
.box { background-color:white; box-shadow:0 0 3px rgba(0,0,0,.8); outline:1px solid rgba(0,0,0,.4); outline-offset:-3px; }Teknik lainnya yaitu dengan memakai CSS bayangan murni, tanpa border:
.box { background-color:white; box-shadow:0 0 0 1px rgba(0,0,0,.3),0 4px 15px -4px rgba(0,0,0,.6); }Ini yaitu teknik tersingkat, sebab kita bahkan tidak memerlukan properti background-clip untuk membuat efeknya di sini. Hanya saja, kalau peramban tidak mendukung CSS bayangan atau tidak mendukung CSS bayangan berganda atau tidak mendukung nilai spread pada CSS bayangan, maka imbas garis batasnya tidak akan terlihat. Border memungkinkan kita untuk membuat fallback supaya tampilan elemen tidak menjadi terlalu jelek 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); }