Setelah kemari kita mulai belajar CSS dengan materi tentang Penggunaan Property Border Radius, hari ini kita akan coba lanjut belajar ke pembahasan yang lebih menarik. Sekali lagi jika kalian belum begitu paham dengan yang namanya istilah CSS (Cascading Style Sheet) seperti ini, saya sangat menganjurkan kalian untuk membaca terlebih dahulu materi tentang pengenalan dasar-dasar CSS.

Pada pembelajaran kali ini kita akan fokus membahas seputar property box-shadow. Salah satu teknik CSS3 yang bisa membuat efek bayangan pada suatu elemen HTML. Jadi box shadow ini biasa dipakai untuk elemen-elemen tertentu seperti DIV, span, image dan sebagainya selain bentuk teks. Jadi kalau untuk menciptakan bayangan pada teks ada property lain lagi yang bisa kita pakai.

Kode syntax CSS-nya sebagai berikut :

box-shadow : [x offset] [y offset] [blur value] [spread value] [color]

Supaya kalian gak bingung berikut ini penjabaran dari masing-masing value kode tersebut :

  • X offset, adalah nilai jarak bayangan terhadap sumbu x dari titik tengah element. Kalau nilainya positif bayangan bergeser ke kanan, kalau nilainya negatif bayangan bergeser ke kiri.
  • Y offset, adalah nilai jarak bayangan terhadap sumbu y dari titik tengan element. Kalau nilainya positif bayangan bergeser ke bawah, sebaliknya kalau bernilai negatif bayangan bergeser ke atas.
  • Blur, adalah tingkat kekaburan dari bayangan element. Semakin besar nilai yang dimasukkan maka bayangan akan semakin kabur dan melebar.
  • Spread, adalah besarnya penyebaran bayangan dari tengah element tanpa efek kabur. Semakin besar nilai maka semakin luas penyebaran bayangannya.
  • Color, adalah kode warna untuk memberikan warna dari bayangan element.

Membuat Efek Bayangan Pada Suatu Elemen

Seperti biasa agar kalian lebih mudah memahami pembahasan tentang property box-shadow ini, kita akan coba praktek langsung. Karna memang ilmu CSS akan lebih nempel di kepala kalau kita sering menggunakannya. Bukan karna dihapal. Semakin sering kita latihan maka akan semakin mudah kita memahami tiap property CSS yang ada.

Silahkan buat kode HTML berikut ini menggunakan aplikasi text editor :

<HTML>
<head>
	<title>Belajar CSS - box shadow</title>
	<style>
		#wrapper {
			width: 500px;
			margin: auto;
		}
		.box {
			margin: 20px;
			padding: 20px;
			width: 150px;
			height: 100px;
			color: #fff;
			text-align: center;
			font: 17px Arial;
			display: inline-block;
		}
		.shadow1 {
			background: #e74c3c;
			box-shadow: 5px 5px #c0392b;
		}
		.shadow2 {
			background: #2ecc71;
			box-shadow: -5px -5px #27ae60;
		}
		.shadow3 {
			background: #9b59b6;
			box-shadow: 0 0 0 10px #8e44ad;
		}
		.shadow4 {
			background: #3498db;
			box-shadow: 0 0 10px #2980b9;
		}
		.shadow5 {
			background: #1abc9c;
			box-shadow: 0 0 10px 10px #16a085;
		}
		.shadow6 {
			background: #f1c40f;
			box-shadow: 10px 10px 10px 10px #f39c12;
		}
	</style>
</head>
<body>
	<div id='wrapper'>
		<div class='box shadow1'>
			<p>Contoh box shadow pertama</p>
		</div>
		<div class='box shadow2'>
			<p>Contoh box shadow kedua</p>
		</div>
		<div class='box shadow3'>
			<p>Contoh box shadow ketiga</p>
		</div>
		<div class='box shadow4'>
			<p>Contoh box shadow keempat</p>
		</div>
		<div class='box shadow5'>
			<p>Contoh box shadow kelima</p>
		</div>
		<div class='box shadow6'>
			<p>Contoh box shadow keenam</p>
		</div>
	</div>
</body>
</HTML>

Simpan kode-kode di atas dalam format HTML dan beri nama Belajar CSS – Box Shadow.html

Kemudian, jalankan file tersebut dengan meng-klik dua kali. Biasanya akan langsung terbuka dengan browser favorit kalian masing-masing. Perhatikan giman hasil yang muncul di browser.

Jika benar, maka hasil yang muncul akan sama seperti di bawah ini :

Contoh box shadow pertama
Contoh box shadow kedua
Contoh box shadow ketiga
Contoh box shadow keempat
Contoh box shadow kelima
Contoh box shadow keenam
*****

Penjelasan Tentang Property Box Shadow

Untuk memahami prinsip kerja dari contoh penggunaan property box shadow diatas, baiknya kalian membaca baris per baris dari kode-kode HTML yang saya berikan. Perhatikan saja masing-masing kode box-shadow dari setiap elemen div. Dan cocokkan dengan hasil yang muncul ketika dibuka dari browser.

Berikut ini sedikit penjelasannya :

  • Pada contoh pertama, diberikan efek box shadow dengan nilai X offset sebesar 5px dan Y offset sebesar 5px sehingga bayangan akan bergeser ke arah kanan bawah.
  • Pada contoh kedua, masing-masing X offset dan Y offset diberi nilai negatif sebesar -5px sehingga bayangan akan bergeser ke arah kiri atas.
  • Pada contoh ketiga, diberikan nilai Spread value sebesar 10px sehingga terlihat bayangan menyebar ke sekeliling elemen tanpa ada blur.
  • Pada contoh keempat, diberikan nilai Blur value sebesar 10px sehingga terlihat bayangan dengan efek blur di sekeliling elemen.
  • Pada contoh kelima, diberikan dua efek bersamaan antara Blur value dan Spread value dengan nilai yang sama sebesar 10px, sehingga terlihat muncul bayangan di sekeliling elemen yang melebar dan kabur di pinggirannya.
  • Pada contoh keenam, diberikan efek box shadow dengan keempat macam value yaitu X offset sebesar -5px sehingga bayangan bergeser ke kiri. Lalu Y offset sebesar 5px sehingga bayangan bergeser ke bawah. Kemudian ditambah Blur value dan Spread value dengan nilai sama sebesar 10px untuk memunculkan efek bayangan melebar dan kabur.

Supaya lebih menarik, kalian bisa merubah-rubah nilai dari keempat macam value yang ada sesuai selera. Silahkan coba-coba saja sendiri. Biar kalian mengerti gimana cara menggunakan property box shadow ini.

Jika ada yang bertanya lalu untuk apa kita mempelajari teknik seperti ini?

Apakah bisa jika dipakai untuk mengubah tampilan template blogspot? Atau wordpress?

Iyaa jelas bisa! Halaman apapun yang muncul di browser umumnya selalu menggunakan teknik CSS. Tanpa adanya CSS bisa kalian bayangkan sendiri kode-kode HTML yang muncul akan sangat statis dan polos. Makanya kita perlu mempelajari teknik-teknik CSS ini supaya kita bisa mengotak-atik tampilan dari suatu template agar menjadi terlihat lebih menarik nantinya.

Seperti biasa sebelum menutup tutorial hari ini, saya ingin mengajukan satu pertanyaan soal untuk Anda. Bagi yang bisa jawab, berarti kalian sudah lulus dalam mempelajari teknik box shadow yang saya berikan.

Dari template saya ini, bagian mana saja yang menggunakan property box shadow?
Kira-kira bisakah kalian menuliskan kode CSS-nya?

Silahkan tinggalkan jawaban kalian lewat kotak komentar di bawah tulisan ini.

Sekian dulu sedikit pengetahuan dari saya. Walaupun memang ilmu ini terbilang cukup sederhana tapi mudah-mudahan tetap bisa memberikan bermanfaat. Selanjutnya kita akan coba mempelajari teknik CSS lainnya yaitu Penggunaan CSS Property Background.

Selamat belajar!! ^_^