Ciptakan Efek Tajam dan Tipis pada Elemen

Border sering digunakan untuk mempertegas batas antar elemen. Sebagai contoh perhatikan menu dropdown berikut.
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.

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 sini

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 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
Teknik lain untuk mempertegas batas elemen digunakan juga properti 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 :)

Komentar

Postingan populer dari blog ini

Cara Menggunakan :before dan :after

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template