Bayangan

Podcast CSS - 017: Shadows

Katakanlah Anda telah dikirim sebuah desain untuk dibangun dan ada gambar sebuah kaos, dipotong, dengan {i>drop shadow<i}. Desainer memberi tahu Anda bahwa gambar produk bersifat dinamis dan dapat diperbarui melalui sistem pengelolaan konten, jadi {i>drop shadow<i} harus dinamis juga. Alih-alih sebuah kaos, gambar dapat berupa visor atau celana pendek, atau item lainnya. Bagaimana cara melakukannya dengan CSS?

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

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

Bayangan kotak

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 kabur, sedangkan angka kecil menghasilkan bayangan yang lebih tajam.
4. Radius penyebaran (opsional): angka yang lebih besar meningkatkan ukuran bayangan dan angka yang lebih kecil menguranginya, membuatnya berukuran 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, alih-alih {i>outer shadow<i} {i>default<i}, 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 diinginkan dengan box-shadow. Tambahkan kumpulan set nilai yang dipisahkan koma untuk mencapai hasil 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 membuat bayangan berdasarkan bentuk kotak seolah-olah ada cahaya yang menunjuk ke sana.

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

Jika kotak Anda yang berisi box-shadow berada dalam penampung yang berisi 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

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 ditambahkan, box-shadow akan diklip sesuai bentuk kotak, tetapi text-shadow tidak memiliki penyesuaian nilai. Ini berarti bahwa jika teks Anda sepenuhnya atau semi transparan, bayanganlah 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 himpunan 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 menghasilkan drop shadow yang mengikuti setiap kurva potensial gambar, gunakan filter drop-shadow CSS. Bayangan ini diterapkan ke {i>alpha mask<i} yang membuatnya sangat berguna untuk menambahkan bayangan ke gambar potongan, seperti dalam kasus di 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 suka, dengan menambahkan beberapa instance nilai drop-shadow ke properti filter. Setiap bayangan akan menggunakan bayangan terakhir sebagai titik referensi pemosisian.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang bayangan