Bayangan

Misalnya, Anda telah dikirimi desain untuk dibuat dan dalam desain tersebut terdapat gambar kaus, yang dipotong, dengan drop shadow. Desainer memberi tahu Anda bahwa gambar produk bersifat dinamis dan dapat diperbarui melalui sistem pengelolaan konten, sehingga bayangan jatuh juga harus dinamis. Selain kaos, gambar dapat berupa visor atau celana pendek, atau item lainnya. Bagaimana cara melakukannya dengan CSS?

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

Untungnya, ada opsi lain: filter drop-shadow(). Hal ini memungkinkan Anda melakukan persis seperti yang diminta desainer. Ada banyak opsi terkait bayangan di CSS, dan masing-masing dirancang untuk kasus penggunaan yang berbeda.

Bayangan kotak

Browser Support

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.1.

Source

Properti box-shadow digunakan untuk menambahkan bayangan ke kotak elemen HTML. Fungsi 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 keluar dari kiri dan angka negatif akan mendorongnya keluar dari kanan.
  2. Offset vertikal: angka positif 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 yang kecil menghasilkan bayangan yang lebih tajam.
  4. Radius penyebaran (opsional): angka yang lebih besar akan meningkatkan ukuran bayangan dan angka yang lebih kecil akan menguranginya, sehingga ukurannya sama dengan radius blur jika disetel ke 0.
  5. Warna: Nilai warna apa pun 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 kumpulan nilai yang dipisahkan koma untuk mencapai hal 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 juga akan memengaruhi bentuk bayangan kotak. Hal ini karena CSS membuat bayangan berdasarkan bentuk kotak seolah-olah cahaya mengarah ke sana.

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

Jika kotak Anda dengan box-shadow berada dalam penampung yang memiliki overflow: hidden, bayangan 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

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

Properti text-shadow sangat mirip dengan properti box-shadow. Fungsi 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 memiliki kata kunci inset.

Saat Anda menambahkan box-shadow, box-shadow akan dipangkas ke bentuk kotak, tetapi text-shadow tidak memiliki pemangkasan. Artinya, jika teks Anda sepenuhnya atau semi transparan, bayangan akan terlihat melaluinya.

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

Beberapa bayangan

Anda dapat menambahkan bayangan sebanyak yang Anda inginkan dengan text-shadow, seperti halnya dengan 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 bayangan jatuh yang mengikuti potensi kurva gambar, gunakan filter drop-shadow CSS. Bayangan ini diterapkan ke mask alfa yang membuatnya 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 Anda inginkan, dengan menambahkan beberapa instance nilai drop-shadow ke properti filter. Setiap bayangan akan menggunakan bayangan terakhir sebagai titik referensi pemosisian.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang bayangan

Manakah nilai bayangan di bawah ini yang unik untuk box-shadow?

inset
Offset vertikal
Offset horizontal
Warna
Radius penyebaran
Radius pemburaman

Hanya 13 bayangan kotak yang diizinkan pada elemen sekaligus.

Salah
Benar