Box Shadow Pada CSS3

Box Shadow Pada CSS3 – Pada pembahasan artikel kali ini saya akan mencatat beberapa hal penting dan menarik dalam menggunakan property CSS3 Box Shadow untuk memberikan style pada elemen HTML yang kita buat. Property CSS3 Box Shadow berfungsi untuk memberikan efek bayangan pada elemen HTML yang kita buat. sebelum membahas bagaimana mengimplementasikan property CSS3 Box Shadow ini. ada beberapa hal penting yang perlu kita tahu pada struktur shadow yang ada pada aplikasi design grafis photoshop mengenai perilaku dari masing-masing propertynya. Karena perilaku property pada struktur shadow yang ada pada blending option yang ada photoshop baik itu drop shadow ataupun inner shadow mirip dengan nilai dari property CSS3 box shadow.

Ketika kita ingin memberikan style shadow pada suatu objek dengan menggunakan photoshop, kita bisa menggunakan blending option. Option ini terdapat dalam bagian bawah layer option. Kita bisa membukanya dengan meng-klik kanan mouse pada icon Fx yang ada pada bagian bawah layer option, posisinya setelah icon Link Layers. Lalu kita bisa bisa pilih blending option atau bisa langsung memilih Drop Shadow atau Inner Shadow. Kemudian kita akan diberikan tampilan option setting seperti pada gambar di atas.

Stuktur shadow yang ada pada photoshop baik itu inner shadow ataupun drop shadow terdiri dari property menjadi berikut : Blend Mode, Opacity, Angle, Distance, Spread, & Size. Untuk property blend mode, hanya berlaku implementasinya buat photoshop saja, karenanya saya nir akan bahas pada artikel ini. Tetapi buat kelima property lainnya, perilakunya seperti menggunakan nilai yang terdapat property box shadow. Sehingga jika kita tahu mengenai property berdasarkan stuktur shadow yg terdapat dalam photoshop, akan sangat membantu kita memahami bagaimana setiap nilai yang terdapat dalam property CSS3 box shadow berperilaku, & pastinya kita akan gampang membayangkan bagaimana hasil tampilannya dalam browser.

Secara default dampak bayangan yang kita buat menggunakan menggunakan photoshop letak bayangannya akan berada pada kanan bawah menurut objek yg bersangkutan. Berikut penjelasan lebih lanjut tentang perilaku dari property shadow yg terdapat dalam struktur photoshop.

? Opacity adalah tingkat transparansi bayangan suatu objek. Nilai opacity memiliki nilai 0% - 100%. Kita bisa merubah nilai opacity tersebut menggunakan menggeser slider opacity. Semakin slidernya ke kiri, maka nilai opacitynya akan lebih kecil dari 100% & semakin mendekati nomor 0% , adalah semakin transparan, bahkan sampai suatu objek tidak terlihat karena nilai berdasarkan opacity tersebut. Semakin slider opacity ke arah kanan maka nilainya akan lebih akbar dari 0% dan mendekati nilai 100%, adalah semakin tidak transparan atau gambarnya semakin solid. Kita pula sanggup menggunakan roda mouse buat mengubah nilai opacitynya dengan mendrag nilai yg terdapat dalam kolom nilai opacity, kemudian gerakkan roda mouse kearah pada, maka nilai opacitynya akan berubah menjadi lebih mini berdasarkan 100% dan mendekati 0%. Slider opacity juga akan otomatis berkecimpung ke arah kiri. Begitu juga jikalau kita menggerakkan roda mouse ke arah luar, maka nilai opacitynya akan berubah sebagai lebih besar dari 0% buat mendekati nilai 100% dan slider opacitynya otomatis berkecimpung ke arah kanan. Untuk nilai opacity kita juga mampu eksklusif memilih sendiri dan pribadi pada isikan dalam kotak nilai opacitynya tanpa harus menggeser slider ataupun roda mouse.

? Angle merupakan arah sudut datangnya cahaya. Untuk menentukan derajat sudut angle kita mampu menggerakkan garis misalnya jarum jam pada dalam lingkaran angle. Nilai angle berupa derajat nilai menurut 0 deg ? 360 deg. Kita jua mampu memakai roda mouse buat memilih berapa derajat nilai angle misalnya buat memilih nilai opacity pada atas. Atau langsung memilih sendiri nilainya dan eksklusif diisikan dalam kotak nilai angle, tanpa harus meggerakkan jarum yg terdapat dalam bundar angle atau menggerakkan roda mouse. Sudut datangnya arah cahaya ( angle ) akan berlawanan menggunakan posisi bayangan. Sebagai model apabila sudut datangnya cahaya berada pada kiri atas, maka letak bayangan akan berada pada kanan bawah. Setiap derajat sudut angle berubah, maka posisi bayangannya pun akan berubah.

? Distance adalah jarak antara bayangan dan objeknya. Nilainya menggunakan satuan pixel ( px ) berdasarkan 0px - 3000px. Semakin akbar nilai distance dan mendekati nomor 3000px merupakan jarak bayangan dan objek semakin jauh. Sedangkan semakin mendekati nilai 0px berarti jeda antara bayangan & objek semakin dekat bahkan membuat suatu objek semakin solid merupakan nir mempunyai bayangan sama sekali. Untuk memilih nilai distance kita mampu memakai slider, roda mouse, atau langsung mengisi nilainya di kotak distance sama misalnya cara kita menentukan nilai opacity. Silakan lihat penerangan opacity. Antara angle dan distance mempunyai interaksi, karena jika sudut datangnya cahaya berubah, maka akan berubah posisi

? Spread berfungsi buat menambahkan tebal bayangnya. Nilainya memakai satuan persentasi ( % ) dari nilai 0% - 100%. Semakin kecil nilainya & mendekati nomor 0% maka berukuran bayangannya akan sama dengan ukuran objeknya. Sedangkan semakin besar nilainya dan mendekati nomor 100% maka berukuran bayangannya akan semakin akbar berdasarkan ukuran objek sesungguhnya. Untuk menentukan ukuran spread-nya kita mampu menggunakan slider, roda mouse, atau langsung mengisi nilai spread-nya pada kotak spread seperti cara memilih nilai opacity pada atas. Silakan lihat penerangan tentang opacity.

? Size merupakan berukuran blur sebuah bayangan. Nilainya menggunakan satuan pixel ( px ) dari 0px ? 250px. Semakin nilai. Semakin akbar nilai size-nya dan mendekati angka 250px maka bayangannya akan semakin blur. Sedangkan semakin kecil nilai size-nya & mendekati nomor 0px maka bayangannya akan semakin solid. Jadi seolah olah ada dua kotak yg saling bertumpuk jika kita menggunakan nilai size 0px. Untuk memilih berukuran size-nya kita bisa memakai slider, roda mouse, atau pribadi mengisi nilai size-nya pada kotak size seperti cara memilih nilai opacity di atas. Silakan lihat penjelasan tentang opacity.

IMPLEMENTASI BOX SHADOW PADA CSS3

Untuk mengimplementasikan box shadow pada CSS3 tentu saja kita wajib menggunakan property CSS3 Box Shadow. Dimana property tersebut memiliki beberapa parameter nilai/value. Untuk parameter value pada property CSS3 box shadow ada yang wajib dan ada yang optional. Silakan lihat gambar dibawah ini. untuk value wajib box shadow ada 4 ( text berwarna biru tua ) dengan urutan sebagai berikut: <x-offset>, <y-offset>, <blur>, <color>. Sedangkan untuk yang optional ada 2 ( text berwarna merah ) yaitu : <inset> dan <spread>. Apabila kita ingin menggunakan baik value yang wajib dan optional maka untuk urutan penulisan sintaknya sebagai berikut : <inset>, <x-offset>, <y-offset>, <blur>, <spread>, <color>. Untuk masing-masing penjelasan parameter value yang digunakan pada property CSS3 box shadow silakan lihat setelah gambar dibawah ini.

Nilai/Value Box Shadow

Value/Nilai Wajib Pada Property Box Shadow

● <x-offset> adalah value/nilai property box shadow yang berfungsi untuk mengatur jarak bayangan terhadap elemen HTML atau objek pada sumbu horizontal. Nilainya numeric. Maksudnya numeric seperti ini, contoh apabila kita kasih nilah 10px, maka bayangannya akan bergerak ke sebeleh kanan dari elemen/objek sebesar 10px. Sedangkan kalo kita beri nilai -10px, maka bayangannya akan bergerak ke kiri sebesar 10px.

●<y-offset> adalah value/nilai property box shadow yang berfungsi untuk mengatur jarak bayangan terhadap elemen HTML atau objek pada sumbu vertikal. Nilainya numeric sama dengan value <x-offset>. maksudnya numeric, contoh apabila kita kasih nilah 10px, maka bayangannya akan bergerak ke bawah dari elemen/objek sebesar 10px. Sedangkan kalo kita beri nilai -10px, maka bayangannya akan bergerak ke atas sebesar 10px.

● <blur> sama dengan property size yang ada pada aplikasi photoshop. dimana fungsi value/nilai <blur&gt untuk memberikan blur pada bayangan suatu elemen/objek. Nilainya 0 sampai tak terhingga. Semakin besar nilainya semakin blur bayangannya. Sedangkan semakin kecil dan mendekati angka 0 maka bayangannya semakin solid.

●<color> adalah value/nilai pada property CSS3 box shadow untuk memberikan warna. Pemberian warna bisa dengan menggunakan nama warna dalam bahasa inggris, bilangan hexadecimal, RGBa dan HSLa.

Agar lebih jelas, silakan lihat contoh berikut mengenai penggunaan value/nilai wajib untuk property CSS3 box shadow. Pada sintak

			<!DOCTYPE html> <html lang="en"> <head> 	<meta charset="UTF-8"> 	<title>Box Shadow</title> 	<style> 		div { 			margin: 50px auto; 		} 		.kotak1 { 			width: 300px; 			height: 300px; 			background-color: olive; 			box-shadow: 10px 10px 5px rgba(0, 0, 0, .60); 		} 		.kotak2 { 			width: 300px; 			height: 300px; 			background-color: turquoise; 			box-shadow: -10px -10px 5px rgba(0, 0, 0, .60); 		} 	</style> </head> <body> 	<div class="kotak1"></div> 	<div class="kotak2"></div> </body> </html>
			
		

Value/Nilai Wajib Box Shadow

Kotak 1 yang berwarna olive diberikan style property box shadow dengan nilai/value <x-offset> sebesar 10px sehingga bayangannya bergerak ke sebelah kanan dari elemen HTML/objeknya berupa kotak sebesar 10px. Nilai/value <y-offset> sebesar 10px membuat bayangannya bergerak ke bawah dari elemen HTML/objeknya berupa kotak sebesar 10px. Nilai/value <blur> sebesar 5px membuat bayangannya blur sebesar 5px. Nilai/value <color> dengan menggunakan nilai rgba (0, 0, 0, .60) yang artinya warna hitam dengan tingkat transparansi sebesar 60%.

Kotak 1 yang berwarna turquoise diberikan style property box shadow dengan nilai/value <x-offset> sebesar -10px sehingga bayangannya bergerak ke sebelah kiri dari elemen HTML/objeknya berupa kotak sebesar -10px. Nilai/value <y-offset> sebesar -10px membuat bayangannya bergerak ke atas dari elemen HTML/objeknya berupa kotak sebesar -10px. Nilai/value <blur> sebesar 5px membuat bayangannya blur sebesar 5px. Nilai/value <color> dengan menggunakan nilai rgba (0, 0, 0, .60) yang artinya warna hitam dengan tingkat transparansi sebesar 60%.

Value/Nilai Optional Pada Property Box Shadow

● <inset> adalah value/nilai property box shadow untuk membuat bayangan ke arah dalam.

● <spread> adalah value/nilai pada property box shadow yang berfungsi untuk menambah ukuran dari bayanganya. Nilai/value <spread> bisa diberikan angka positif dan negatif. Nilai positif yang semakin besar akan membuat ukuran sebuah bayangan menjadi lebih besar. Sedangkan nilai/value <spread> negatif yang semakin kecil akan membuat ukuran bayangan semakin kecil. Nilai/value <spread> dan nilai/value <blur> saling berkorelasi. Jadi ketika sebuah elemen HTML atau objek diberikan kedua nilai tersebut, yang terjadi adalah bayangan akan membesar dahulu sesuai nilai/value <spread> dan setelah itu baru terjadi blur sesuai dengan Nilai/value <blur> yang diberikan.

Untuk implemensi  penggunaan nilai/value <spread> dan <spread> silakan lihat contoh dibawah ini :

			<!DOCTYPE html> <html lang="en"> <head> 	<meta charset="UTF-8"> 	<title>Box Shadow</title> 	<style> 		div { 			margin: 50px auto; 		} 		.kotak1 { 			width: 300px; 			height: 300px; 			background-color: olive; 			box-shadow: 0px 0px 3px 10px rgba(0, 0, 0, .60); 		} 		.kotak2 { 			width: 300px; 			height: 300px; 			background-color: turquoise; 			box-shadow: inset 0px 0px 5px 10px rgba(0, 0, 0, .60); 		} 	</style> </head> <body> 	<div class="kotak1"></div> 	<div class="kotak2"></div> </body> </html>
			
		

Value/Nilai Optional Box Shadow

Kotak 1 yang berwarna olive, seperti ada border yang mengelilinginya. Padahal border tersebut karena nilai/value <spread> sebesar 10px. Sedangkan kotak 2 karena implementasi  nilai/value <spread> sebesar 10px dan nilai/value <blur> sebesar 5px yang diberikan nilai/value <inset> agar bayangan yang terbentuk ke arah dalam kotak.

Menurut saya penggunaan property CSS3 box shadow ini sangat luar biasa, karena kita bisa menggunakan secara Multiple Box Shadow. Sehingga kita bisa memberikan lebih dari satu shadow pada sebuah elemen HTML. kalau kita pandai memanfaatkannya ini, kit bisa membuat sebuat design website yang indah, menarik dan berbeda. Untuk implementasi property CSS3 box shadow secara multiple, silakan lihat contoh dibawah ini:

			<!DOCTYPE html> <html lang="en"> <head> 	<meta charset="UTF-8"> 	<title>Multiple Box Shadow</title> 	<style> 		div { 			margin: 50px auto; 		} 		.kotak1 { 			width: 300px; 			height: 300px; 			background-color: olive; 			box-shadow: 10px 10px 5px rgba(0, 255, 0, .60), -10px -10px 5px rgba(0, 0, 255, .60); 		} 	</style> </head> <body> 	<div class="kotak1"></div> </body> </html>
			
		

Tips :

Pada saat membuat sebuah website. Ketika mencoba try and error nilai/value yang ada property CSS3 box shadow, agar lebih mudah untuk melihat hasilnya secara real time. Kita bisa menggunakan fasilitas web browser inspect . Dengan menggunakan fasilitas ini, kita bisa melakukan edit nilai <inset>, <x-offset>, <y-offset>, <blur>, <spread>, <color> lebih leluasa secara real time, namun tidak permanen. Kalau hasilnya sudah sesuai dengan keinginan, selera, dan kebutuhan kita baru kita copy paste ke code editor tempat kita bekerja. Silakan ikuti langkah berikut ini :

→ Inspect : kita bisa menggunakan 3 cara. Pertama, klik kanan pada mouse, kemudian pilih inspect. Kedua kita bisa menggunakan shorcutnya dengan menekan tombol Ctrl+Shift+I.  Dan ketiga kita bisa melalui ‘customize &  control’ browser yang ada pada bagian paling atas kanan dengan icon 3 titik, kemudian kilik kiri pada mouse, pilih more tools, lalu pilih developer tools ( cara ini untuk google chrome ).

→ Pilih Style.

→ Cari element yang akan kita lakukan edit nilai dari property CSS-nya dengan menggunakan icon panan yang ada dalam kota, posisinya berada tepat di atas kiri bagian inspect element tersebut.

→ Lalu rubah Style-nya sesuai dengan keinginan, selera, dan kebutuhan kita.

→ Apabila style yang kita inginkan sudah cocok, tinggal Copy Paste pada code editor dan save agar stylenya yang diterapkan permanen.

Developer Tools

Finally done. Semoga pembahasan mengenai box shadow ini menambah wawasan kita untuk menjadi lebih kreatif dalam memodifikasi website agar menjadi website yang menarik dan interaktif.

Dibawah ada beberapa design Box Shadow yang mungkin bisa dijadikan inspirasi untuk pengembangan sebuah wesbite. Untuk source code-nya silakan download dibawah.

Bagikan Artikel ini