Bayangan

Podcast CSS - 017: Shadows

Katakanlah Anda telah dikirimi desain untuk dibuat dan dalam desain itu ada gambar kaos, dipotong, dengan drop shadow. Desainer memberi tahu Anda bahwa gambar produk bersifat dinamis dan dapat diperbarui melalui sistem pengelolaan konten, sehingga drop shadow juga harus dinamis. Alih-alih kaus, gambar bisa berupa visor atau celana pendek, atau barang lainnya. Bagaimana cara melakukannya dengan CSS?

CSS memiliki properti box-shadow dan text-shadow, tetapi gambarnya bukan teks sehingga Anda tidak dapat menggunakan text-shadow. Jika Anda menggunakan box-shadow, bayangan ada di kotak di sekitarnya, bukan di sekitar kaus.

Untungnya, ada opsi lain: filter drop-shadow(). Hal ini memungkinkan Anda untuk melakukan apa yang diminta oleh desainer. Ada banyak pilihan mengenai bayangan dalam CSS, masing-masing dirancang untuk kasus penggunaan yang berbeda.

Bayangan kotak

Properti box-shadow digunakan untuk menambahkan bayangan ke kotak elemen HTML. Kode ini berfungsi pada elemen blok dan elemen inline.

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

Urutan nilai untuk box-shadow adalah sebagai berikut:

1. Offset horizontal: angka positif mendorongnya dari kiri dan angka negatif akan mendorongnya keluar dari kanan.
2. Offset vertikal: angka positif akan mendorongnya ke bawah dari atas, dan angka negatif akan mendorongnya ke atas dari bawah.
3. Radius blur: angka yang lebih besar menghasilkan bayangan yang lebih buram, sedangkan angka kecil akan menghasilkan bayangan yang lebih tajam.
4. Spread radius (opsional): angka yang lebih besar akan meningkatkan ukuran bayangan dan angka yang lebih kecil akan menguranginya, sehingga sama ukurannya dengan radius blur jika diatur ke 0.
5. Warna: Semua nilai warna yang valid. Jika tidak ditentukan, warna teks yang dihitung akan digunakan.

Untuk membuat bayangan kotak menjadi bayangan dalam, bukan bayangan luar default, tambahkan kata kunci inset sebelum properti lainnya.

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

Beberapa bayangan

Anda dapat menambahkan bayangan sebanyak yang Anda inginkan dengan box-shadow. Tambahkan kumpulan set nilai yang dipisahkan koma untuk melakukan ini:

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

Properti yang memengaruhi box-shadow

Menambahkan border-radius ke kotak Anda juga akan memengaruhi bentuk bayangan kotak. Hal ini karena CSS menciptakan bayangan berdasarkan bentuk kotak seolah-olah cahaya menunjuk ke sana.

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

Jika kotak Anda yang berisi box-shadow berada dalam container yang memiliki overflow: hidden, bayangan juga tidak akan keluar dari overflow tersebut.

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

Bayangan teks

Properti text-shadow sangat mirip dengan properti box-shadow. Solusi ini hanya berfungsi pada node teks.

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

Nilai untuk text-shadow sama dengan box-shadow dan dalam urutan yang sama. Satu-satunya perbedaan adalah text-shadow tidak memiliki nilai spread dan tidak ada kata kunci inset.

Saat Anda menambahkan box-shadow, klip akan diklip sesuai bentuk kotak Anda, tetapi text-shadow tidak akan memiliki pemotongan. Artinya, jika teks Anda sepenuhnya atau semi transparan, bayangan akan terlihat melalui teks tersebut.

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

Beberapa bayangan

Anda dapat menambahkan bayangan sebanyak yang diinginkan dengan text-shadow, sama seperti box-shadow. Tambahkan kumpulan kumpulan nilai yang dipisahkan koma, dan Anda dapat membuat beberapa efek teks yang sangat keren, seperti teks 3D.

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

Drop shadow

Untuk mendapatkan drop shadow yang mengikuti potensi kurva gambar, gunakan filter drop-shadow CSS. Bayangan ini diterapkan ke mask alfa sehingga sangat berguna untuk menambahkan bayangan ke gambar potongan, seperti dalam pengantar modul ini.

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

Filter drop-shadow memiliki nilai yang sama dengan box-shadow, tetapi kata kunci inset dan nilai spread tidak diizinkan. Anda dapat menambahkan bayangan sebanyak yang diinginkan, dengan menambahkan beberapa instance nilai drop-shadow ke properti filter. Setiap bayangan akan menggunakan bayangan terakhir sebagai titik acuan pemosisian.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang bayangan