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:/* Belum cukup! */ .box { background-color:white; border:1px solid #bbb; box-shadow:0 4px 15px -4px rgba(0,0,0,.6); }
.box { background-color:white; border:1px solid rgba(0,0,0,.3); box-shadow:0 4px 15px -4px rgba(0,0,0,.6); }
.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:.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 adalah gambar cuplikan hasil tampilan pada efek sebelum dan efek 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 siniSecara 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:
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:
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:
.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; }
.box { background-color:white; box-shadow:0 0 0 1px rgba(0,0,0,.3),0 4px 15px -4px rgba(0,0,0,.6); }
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); }
