Memahami penulisan Box Shadow Inset dan Outline
Menerapkan Box Shadow itu gimana ya? Susah-susah gampang. Yapst.. kurang lebih seperti itu lah gambarannya. Tapi sebelumnya kamu tentu sudah tahu apa itu Box Shadow serta kegunaan dan tampilan yang di hasilkannya. Kalau menurut saya sih, Box Shadow itu adalah efek bayangan yang bertujuan untuk mempertegas tampilan sebuah konten. Hmmm.. Tapi benar ga sih? Hhaa..
Bagi yang sudah master dalam CSS tentu saja hal ini tidak di butuhkan. Namun bagi saya yang Nubita, ya jelas saya masih perlu belajar banyak untuk mendalami penerapan dan penyesuaian pada element ini. Jadi, walau masih ala kadarnya, saya akan coba berbagi beberapa Box Shadow yang mungkin bisa di gunakan bagi kamu yang membutuhkan.
Kalau definisi saya tentang settingan box shadow itu kayak gini "box-shadow: 0px 0px 16px 4px #CCC" keterangannya "box-shadow: Horizontal (kiri-kanan) Vertical (atas-bawah) Ukuran bayangan (shadow) Jangkau bayangan untuk semua sisi Kode warna".
Untuk Horizontal, jika kita ingin bayangan jatuh hanya ke kiri berarti settingan yang kita tambahkan kedalam CSS di awali dengan tanda kurang/min (-). Namun jika kita hanya ingin bayangan hanya jatuh ke kanan, kita cukup mengisi ukuran.px (Misalnya: 10px) tanpa tanda kurang/min (-) di awal ukurannya.
Untuk Vertical, jika kita ingin bayangan jatuh hanya ke atas berarti settingan yang kita tambahkan kedalam CSS di awali dengan tanda kurang/min (-). Namun jika kita hanya ingin bayangan hanya jatuh ke bawah, kita cukup mengisi ukuran.px (Misalnya: 10px) tanpa tanda kurang/min (-) di awal ukurannya.
Untuk Ukuran bayangan dan Jangkau bayangan untuk semua sisi, ini bisa di sesuaikan dengan kebutuhan.
Untuk Kode warna juga bisa di sesuaikan dengan kebutuhan. Namun saya lebih merekomendasikan untuk mengunakan warna yang di hasilkan dari paduan rgba.
Berikut beberapa contoh Box shadow yang telah saya kemas lengkap dengan pratinjau dan kodenya.
Saya mulai dari box shadow outline.
Box shadow all sides
Efek bayangan akan terlihat pada semua sisi.
box-shadow:0px 0px 16px 4px rgba(34,34,34,0.2)
Untuk pratinjau di bawah ini, Saya memberikan Jangkau bayangan untuk semua sisi dengan ukuran -10px untuk mempertegas efek bayangannya. Dengan begini, efek bayangan pada sisi yang tidak di inginkan menjadi benar-benar tersembunyi.
Box shadow top
Efek bayangan hanya akan terlihat pada bagian atas.
box-shadow:0px -20px 20px -10px rgba(30,30,30,0.2)
Box shadow bottom
Efek bayangan hanya akan terlihat pada bagian bawah.
box-shadow:0px 20px 20px -10px rgba(34,34,34,0.2)
Box shadow left
Efek bayangan hanya akan terlihat pada bagian kiri.
box-shadow:-20px 0px 20px -10px rgba(34,34,34,0.2)
Box shadow right
Efek bayangan hanya akan terlihat pada bagian kanan.
box-shadow:20px 0 20px -10px rgba(34,34,34,0.2)
Untuk pratinjau di bawah ini, Saya memberikan Jangkau bayangan untuk semua sisi dengan ukuran -4px untuk mempertegas efek bayangannya. Dengan begini, efek bayangan pada sisi yang tidak di inginkan menjadi benar-benar tersembunyi.
Box shadow right top
Efek bayangan hanya akan terlihat pada bagian kanan dan atas.
box-shadow:10px -10px 16px -4px rgba(34,34,34,0.2)
Box shadow left top
Efek bayangan hanya akan terlihat pada bagian kiri dan atas.
box-shadow:-10px -10px 16px -4px rgba(34,34,34,0.2)
Box shadow right bottom
Efek bayangan hanya akan terlihat pada bagian kanan dan bawah.
box-shadow:10px 10px 16px -4px rgba(34,34,34,0.2)
Box shadow left bottom
Efek bayangan hanya akan terlihat pada bagian kiri dan bawah.
box-shadow:-10px 10px 16px -4px rgba(34,34,34,0.2)
Box shadow all sides inset
Efek bayangan (inset) akan terlihat pada semua sisi.
box-shadow:inset 0px 0px 16px 4px rgba(187,187,187,0.2)
Untuk pratinjau di bawah ini, Saya memberikan Jangkau bayangan untuk semua sisi dengan ukuran -10px untuk mempertegas efek bayangannya. Dengan begini, efek bayangan pada sisi yang tidak di inginkan menjadi benar-benar tersembunyi.
Box shadow top inset
Efek bayangan (inset) hanya akan terlihat pada bagian atas.
box-shadow:inset 0px 20px 20px -10px rgba(187,187,187,0.2)
Box shadow bottom inset
Efek bayangan (inset) hanya akan terlihat pada bagian bawah.
box-shadow:inset 0px -20px 20px -10px rgba(187,187,187,0.2)
Box shadow left inset
Efek bayangan (inset) hanya akan terlihat pada bagian kiri.
box-shadow:inset 20px 0 20px -10px rgba(187,187,187,0.2)
Box shadow right inset
Efek bayangan (inset) hanya akan terlihat pada bagian kanan.
box-shadow:inset -20px 0px 20px -10px rgba(187,187,187,0.2)
Untuk pratinjau di bawah ini, Saya memberikan Jangkau bayangan untuk semua sisi dengan ukuran -4px untuk mempertegas efek bayangannya. Dengan begini, efek bayangan pada sisi yang tidak di inginkan menjadi benar-benar tersembunyi.
Box shadow right top inset
Efek bayangan (inset) hanya akan terlihat pada bagian kanan dan atas.
box-shadow:inset -10px 10px 16px -4px rgba(187,187,187,0.2)
Box shadow left top inset
Efek bayangan (inset) hanya akan terlihat pada bagian kiri dan atas.
box-shadow:inset 10px 10px 16px -4px rgba(187,187,187,0.2)
Box shadow right bottom inset
Efek bayangan (inset) hanya akan terlihat pada bagian kanan dan bawah.
box-shadow:inset -10px -10px 16px -4px rgba(187,187,187,0.2)
Box shadow left bottom inset
Efek bayangan (inset) hanya akan terlihat pada bagian kiri dan bawah.
box-shadow:inset 10px -10px 16px -4px rgba(187,187,187,0.2)
Perpaduan antara Box shadow Outline dengan box shadow inset
Jika di padukan seperti ini kita dapat menggunakan dua warna dan dua Box shadow dalam satu element (Outline dan Inset).
box-shadow:inset 0px 0px 20px rgba(0,153,153,0.2),0px 0px 16px 4px rgba(187,187,187,0.2)
Keterangannya: "inset 0px 0px 20px rgba(0,153,153,0.2)" untuk efek bayangan di depan konten, "0px 0px 16px 4px rgba(187,187,187,0.2)" untuk bayangan di bagian belakang konten.
Namun paduan ini tentu masih bisa di kembangkan. Misalnya dengan membuat warna di setiap sisinya berbeda-beda. Jadi silahkan utak-atik sendiri. :)
Saya pikir ini cukup, meskipun saya tidak begitu profesional dalam menjabarkan, namun saya harap postingan ini mudah untuk di pahami.
0 komentar:
Post a Comment
Kolom komentar tersedia hanya untuk diskusi dan bukan sarana untuk promosi.
Komentar menggunakan media sosial seperti Facebook dan lain-lain sengaja di nonaktifkan karena sering di salahgunakan.
Mohon untuk tidak menyisipkan link promosi pada kolom komentar.