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

Dukungan Browser

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

Sumber

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

Dukungan Browser

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

Sumber

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

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

Offset horizontal
Coba lagi.
Offset vertikal
Coba lagi.
Radius buram
Coba lagi.
Radius penyebaran
🎉
Warna
Coba lagi.
inset
Coba lagi. inset adalah kata kunci yang juga unik untuk box-shadow.

Hanya 13 bayangan kotak yang diperbolehkan pada satu elemen sekaligus.

Benar
Tidak ada batasan resmi.
Salah
Tambahkan beberapa bayangan kotak sebanyak yang Anda butuhkan.