Tutorial Belajar CSS3: Cara Membuat Efek Bayangan (Box Shadow)

Posted on

Seandainya di panduan belajar CSS3: Cara Membuat Efek Teks Berbayang kita mendesain bayangan (shadow) di tulisan teks, kali ini saya akan membahas cara membuat efek bayangan di ‘bingkai’ element HTML. Property yang akan kita gunakan yaitu box-shadow.


Property CSS3 box-shadow untuk Mendesain Efek Bayangan

Untuk mendesain efek bayangan di sebuah element HTML (Box Model), kita dapat menggunakan property CSS3 box-shadow.

Property box-shadow dapat diisi dengan beragam nilai, tapi setidaknya perlu 2 nilai utama yang menentukan seberapa jauh jarak bayangan ditampilkan. Berikut contohnya:

Property box-shadow: 7px 7px akan menghasilkan efek bayangan di posisi 7 pixel ke kanan dan 7 pixel kebawah. Bagaimana sekiranya saya ingin kearah kiri dan atas? Kita dapat menggunakan angka negatif:

Kali ini efek bayangan akan tampil dengan jarak 7 pixel ke kiri dan 7 pixel ke atas.


Mengatur Efek Blur Bayangan

Selain posisi bayangan, kita pun dapat mengatur seberapa ‘kabur’ bayangan yang ditampilkan. Di istilah design, ini dikenal dengan istilah blur. Semakin tinggi nilai blur, semakin samar-samar bayangan yang terjadi. Berikut contohnya:

Property box-shadow: 7px 7px 10px berarti saya ingin menampilkan bayangan di 7 pixel ke kanan, 7 pixel ke bawah, dengan blur sebesar 10 pixel.


Menentukan Besar Bayangan

Nilai berikutnya yang dapat diinput ke di property box-shadow yaitu Spread. Spread menentukan seberapa besar bayangan yang dibentuk. Berikut contohnya:

Kini efek bayangan yang didapatkan terlihat lebih besar dari sebelumnya. Ini berasal dari nilai 15 pixel untuk spread.


Mengganti Warna Bayangan

Di contoh sebelumnya, bayangan tampil dengan warna hitam, dimana ini yaitu warna default bawaan web browser. Kita dapat menambahkan nilai warna ke di property box-shadow untuk mengganti warna bayangan ini. Berikut contohnya:

Property box-shadow: 7px 7px 10px 2px green berarti: bikin bayangan di posisi 7 pixel ke kanan, 7 pixel kebawah, blur sebesar 10 pixel, spread 2 pixel, dan berwarna hijau (green).


Menambahkan Efek Bayangan ke Gambar (img)

Efek bayangan dari property box-shadow yang kita pelajari disini amat menarik untuk digunakan di pelbagai element HTML, terutama ke di gambar.

Dengan menambahkan property box-shadow: 10px 10px 10px ke di bingkai gambar yang pernah kita bikin di di Tutorial Belajar CSS: Membuat Gallery Gambar dengan HTML dan CSS, efek yang didapatkan terlihat professional. Berikut hasilnya:

Berikut kode yang saya gunakan:

Untuk memperoleh hasil yang sama, rekan-rekan tinggal mengganti nama file gambar.

Tertarik mengetahui efek property CSS3 lainnya? saya membahasnya dengan lebih detail di eBook CSS Uncover Duniailkom 🙂


eBook CSS Uncover Duniailkom

Seandainya rekan-rekan ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web mempunyai tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/