Lebih terarah belajar coding melalui Kelas Online dan Interactive Coding Lihat Materi Belajar

Tutorial Menggunakan Box Shadow di Elemen HTML

Ditulis oleh Bagus Aji Santoso, dipublikasi pada 18 May 2020 dalam kategori Info
Tutorial Menggunakan Box Shadow di Elemen HTML - CodePolitan.com

Diterjemahkan dari Box Shadow CSS Tutorial – How to Add a Drop Shadow to Any HTML Element oleh Joe Liang

Kita bisa menambahkan drop shadow ke semua elemen HTML menggunakan property CSS box-shadow. Baca terus untuk mengetahui caranya.

Menambahkan Drop Shadow Sederhana

Mari kita siapkan elemen HTML sederhana untuk diberikan drop shadow:

<div id="box1" class="box">Box1</div>
<div id="box2" class="box">Box2</div>
<div id="box3" class="box">Box3</div>

Lalu tambahkan CSS:

p {
    padding: 10px;
}
.box {
    padding: 20px;
    width: 50%;
    margin: 30px auto;
    background: #000;
    color: #fff;
}

Hasilnya adalah tiga buah kotak yang akan mempermudah pemberian drop shadow dengan memanggil id dari masing-masing kotak.

Untuk menambahkan drop shadow, mari berikan properti box-shadow ke Box 1:

/* offset-x | offset-y | color */
#box1 {
    box-shadow: 6px 12px yellow;
}

Ada tiga parameter yang kita berikan. Dua parameter pertama adalah offset-x dan offset-y. Keduanya menentukan lokasi drop shadow.

Offset yang diberikan relatif terhadap posisi sudut kiri atas dari suatu elemen. Nilai positif pada offset-x artinya mengarahkan shadow ke kanana dan positif pada offset-y artinya mengarahkan shadow ke bawah.

Parameter ketiga adalah warna drop shadow yang diinginkan.

Meskipun di sini kita menggunakan elemen <div>, properti box-shadow bisa diaplikasikan ke semua elemen HTML lainnya.

Memberikan Blur Radius

Jika ingin agar shadownya terlihat lebih realistis, kita bisa memanfaatkan parameter blur-radius.

Parameter ini akan mengatur bagaimana kita memberikan efek blur pada shadow. Mari aplikasikan pada Box 2:

/* offset-x | offset-y | blur-radius | color */
#box2 {
    box-shadow: 6px 12px 4px red;
}

Perhatikan parameter ketiga, nilai 4px mengatur radius blur yang diaplikasikan pada drop shadow.

Memberikan Spread Radius

Jika ingin mengatur ukuran shadow, kita bisa menambahkan prameter spread-radius yang bisa membuat shadow meluas atau menciut.

Mari tambahkan spread radius sebesar 8px ke Box 2:

/* offset-x | offset-y | blur-radius | spread-radius | color */
#box2 {
    box-shadow: 6px 12px 4px 8px red;
}

Perhatikan urutan parameternya.

Menggabungkan Beberapa Shadow

Kita bahkan bisa menggabungkan beberapa shadow sekaligus ke sebuah elemen.

Mari kita buat Box 3 mengaplikasikan drop shadow biru dan hijau:

/* Berapapun jumlah shadownya, pisahkan dengan koma */
#box3 {
    box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green;
}

Bonus: Membuat Inset Shadow

Kita bisa membuat sebuah shadow yang mengarah ke dalam dengan parameter inset.

Parameter inset bisa ditulis di awal atau akhir dari properti box-shadow. Berikut ini contoh dengan menggunakan elemen blockquote.

<blockquote>
  <q>The key to success is to start before you're ready.</q>
  <p>— Marie Forleo</p>
</blockquote>
blockquote {
  width: 50%;
  margin: 50px auto;
  padding: 20px;
  font-size: 24px;
  box-shadow: inset 10px 5px black;
}

Kita juga bisa menambahkan beberapa blur dan spread untuk memperabgus shadow:

box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;

Dengan properti box-shadow, kita bisa memberikan shadow pada halaman web yang kita buat sehingga bisa memberikan efek pencahayaan 3D yang bagus.

Beriut CodePen yang bisa pembaca lihat untuk bereksperimen.


background

Gabung CodePolitan Membership

Ingin belajar coding secara online dengan lebih terarah? Gabung sekarang dalam program Premium Membership di CodePolitan. Dapatkan ratusan modul belajar pemrograman premium dalam beragam format dengan materi silabus lengkap dan tersusun rapi dari awal hingga mahir.

LIHAT MATERI BELAJAR GABUNG MEMBERSHIP