Border sering digunakan untuk mempertegas batas antar elemen. Sebagai contoh perhatikan menu dropdown berikut. Menu Dropdown pada Bootstr...
Border sering digunakan untuk mempertegas batas antar elemen. Sebagai contoh perhatikan menu dropdown berikut.
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.
Menggunakan CSS untuk menciptakan elemen kotak dengan efek bayangan saja tidak cukup untuk memberikan kesan sisi yang tajam dan dimensi yang tipis seperti gambar di atas:
Hasilnya.
Deklarasi di atas sudah cukup untuk menciptakan efek kotak bergaris batas dan berbayang, namun belum cukup memberikan efek tajam pada elemen tersebut. Coba perhatikan dengan seksama pada menu dropdown gambar di awal, garis batas pada menu tersebut ternyata tembus pandang:
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
Hasilnya.
Penggunaan Properti
Fungsi CSS
Properti ini sering digunakan untuk memperbaiki tampilan yang sedikit rusak karena render piksel yang tidak terlalu baik pada beberapa peramban. Sebagai contoh lihat elemen tombol dengan efek rouded corner di sekelilingnya berikut ini:
Gambar sebelah kiri adalah tampilan standar tombol yang dibuat tanpa mendeklarasikan
Gambar sebelah kanan adalah hasil tampilan sesudah deklarasi
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:
Teknik lain untuk mempertegas batas elemen digunakan juga properti
Teknik lainnya adalah dengan menggunakan CSS bayangan murni, tanpa border:
Hasilnya.
Itu adalah teknik tersingkat, karena tidak memerlukan properti
Begini maksudnya:
Credit: Tovic :)
Menu Dropdown pada Bootstrap |
Menggunakan CSS untuk menciptakan elemen kotak dengan efek bayangan saja tidak cukup untuk memberikan kesan sisi yang tajam dan dimensi yang tipis seperti gambar di atas:
/* Belum cukup! */
.box {
background-color:white;
border:1px solid #bbb;
box-shadow:0 4px 15px -4px rgba(0,0,0,.6);
}
Hasilnya.
Deklarasi di atas sudah cukup untuk menciptakan efek kotak bergaris batas dan berbayang, namun belum cukup memberikan efek tajam pada elemen tersebut. Coba perhatikan dengan seksama pada menu dropdown gambar di awal, garis batas pada menu tersebut ternyata tembus pandang:
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:
.box {
background-color:white;
border:1px solid rgba(0,0,0,.3);
box-shadow:0 4px 15px -4px rgba(0,0,0,.6);
}
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
). 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);
}
Hasilnya.
Membandingkan Hasil Tampilan
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 siniProperti ini sering digunakan untuk memperbaiki tampilan yang sedikit rusak karena render piksel yang tidak terlalu baik pada beberapa peramban. Sebagai contoh lihat elemen tombol dengan efek rouded corner di sekelilingnya berikut 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. 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 deklarasi
background-clip:padding-box
diterapkan 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:
Batas tepi menggunakan gambar |
outline
semitransparan bukan menggunakan border semitransparan dan CSS background-clip
, akan tetapi ini sudah tidak standar lagi karena hasilnya kurang rapih dan tidak konsisten. Hasilnya kurang bagus karena outline tidak bisa mengikuti efek lengkung di ujung-ujung kotak. Perhatikan gambar di bawah sebagai contoh.Outline tidak bisa mengikuti garis lengkung. |
.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 adalah dengan menggunakan 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);
}
Hasilnya.
Itu adalah teknik tersingkat, karena tidak memerlukan properti
background-clip
untuk menciptakan efeknya. 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);
}
Credit: Tovic :)
COMMENTS