The CSS Podcast - 017: Shadows
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
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:
- Offset horizontal: angka positif mendorongnya keluar dari kiri dan angka negatif akan mendorongnya keluar dari kanan.
- Offset vertikal: angka positif mendorongnya ke bawah dari atas, dan angka negatif akan mendorongnya ke atas dari bawah.
- Radius blur: angka yang lebih besar menghasilkan bayangan yang lebih buram, sedangkan angka yang kecil menghasilkan bayangan yang lebih tajam.
- 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.
- 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
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
Hanya 13 bayangan kotak yang diizinkan pada elemen sekaligus.