Cara Membuat Drop Shadow Dengan CSS

Meskipun tren desain bervariasi setiap tahun, Anda dapat mengandalkan penggunaan efek bayangan pokok seperti bayangan kotak dan bayangan jatuh untuk berkontribusi positif pada estetika situs web. Anda dapat gunakan bayangan jatuh untuk menciptakan efek menyenangkan yang diberikan dengan indah tanpa terlihat murahan.

Mari kita lihat lebih dekat CSS bayangan jatuh Properti.

Apa itu drop-shadow CSS?

bayangan jatuh ( ) adalah efek CSS yang menampilkan bayangan di sekitar bentuk objek tertentu. Berikut sintaks untuk menerapkan CSS bayangan jatuh.

Sintaksis:
filter: drop-shadow (warna offset-x offset-y blur-radius);

Ada berbagai macam fungsi filter termasuk kabur ( ), kecerahan ( ), dan bayangan jatuh ( ).

offset-x menentukan jarak mendatar dan offset-y menentukan jarak vertikal. Perhatikan bahwa nilai negatif menempatkan bayangan di sebelah kiri (offset-x) dan di atas (offset-y) objeknya.

Dua parameter terakhir adalah opsional. Anda dapat menentukan radius blur bayangan sebagai panjangnya. Secara default, ini disetel ke 0. Anda tidak dapat memiliki radius blur negatif.

Warna bayangan ditentukan sebagai. Jika Anda belum menentukan warna, itu mengikuti nilai warna Properti.

Kapan CSS drop-shadow Berguna?

Anda mungkin sudah tahu itu bayangan kotak melakukan pekerjaan dengan cukup baik. Jadi, Anda mungkin berpikir, mengapa kita perlu bayangan jatuh sama sekali? Ada banyak kasus di mana bayangan jatuh ( ) fungsinya adalah penyelamat. Mari kita lihat beberapa di antaranya:

Bentuk Non-Persegi Panjang

Tidak seperti bayangan kotak, Anda dapat menambahkan bayangan jatuh untuk bentuk non-persegi panjang. Misalnya, kami memiliki SVG atau PNG transparan dengan bentuk non-persegi panjang—bintang misalnya. Di sini, menambahkan bayangan yang sesuai dengan objek itu sendiri dapat diselesaikan dengan baik bayangan kotak atau bayangan jatuh. Pertimbangkan kedua skenario:

HTML

CSS

.bintang-img img {
tampilan: blok sebaris;
tinggi: 15em;
lebar: 25em;
}
.kotak-bayangan {
warna merah;
bayangan kotak: 0.60em 0.60em 0.2em;
}
.drop-bayangan {
filter: drop-shadow (0.60em 0.60em 0.2em);
}

Keluaran:

Saat membandingkan kedua efek, terlihat bahwa a bayangan kotak memberikan bayangan persegi panjang; juga tidak masalah apakah gambar itu transparan atau sudah memiliki latar belakang. Di samping itu, bayangan jatuh memungkinkan Anda membuat bayangan yang sesuai dengan bentuk gambar itu sendiri.

Faktor pembatasnya adalah bayangan jatuh ( ) fungsi menerima semua parameter tipe kecuali sisipan kata kunci dan sebaran parameter.

Elemen yang Dikelompokkan

Ada beberapa contoh ketika Anda mungkin perlu membangun komponen dengan menumpang tindih elemen tertentu. Jika Anda menggunakan bayangan kotak, Anda akan menghadapi masalah dalam mencoba memberikan bayangan dengan cara yang benar. Berikut cara kerjanya saat mengelompokkan gambar dan komponen teks:

HTML

Hidup di saat ini

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam insiden.

CSS dasar

tubuh {
bantalan: 5em 1em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Jenewa, Verdana, sans-serif;
}
h2 {
ukuran font: 2rem;
}
P {
ukuran font: 0.8rem;
}
.induk-wadah {
tampilan: fleksibel;
arah fleksibel: kolom;
tinggi: 17rem;
lebar: 50em;
}
.image-container img {
lebar: 15em;
posisi: mutlak;
indeks-z: 1;
atas: 2em;
kiri: 1.5em;
}
.text-container {
warna: rgb (255, 236, 236);
warna latar: rgb (141 0 35);
lebar: 30rem;
bantalan: 3rem;
align-self: flex-end;
posisi: relatif;
}

Sekarang, terapkan bayangan kotak dan bayangan jatuh untuk melihat perbedaannya.

.drop-bayangan {
filter: drop-shadow (0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,5));
}
.kotak,
.kotak img {
bayangan kotak: 0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.3);
}

Keluaran:

Seperti yang Anda lihat, bayangan kotak diterapkan pada setiap elemen secara individual sementara bayangan jatuh mengelompokkan keduanya dan menerapkan bayangan.

Elemen Terpotong

Anda dapat menggunakan clip-path properti untuk memotong wilayah tertentu yang menentukan bagian gambar atau elemen mana yang harus ditampilkan. NS filter bayangan memungkinkan kita untuk membuat bayangan jatuh pada elemen yang terpotong dengan menerapkannya ke induk elemen itu:

HTML

CSS

.induk-wadah {
filter: drop-shadow (0rem 0rem 1.5rem merah marun);
}
.clipped-element {
lebar: 50em;
tinggi: 50em;
margin: 0 otomatis;
background-image: url (gadis-tersenyum.jpg);
clip-path: lingkaran (50%);
ukuran latar belakang: sampul;
background-repeat: jangan ulangi;
}

Keluaran:

Kami telah memotong 50% gambar dengan jalur melingkar. Oleh karena itu, filter bayangan diterapkan hanya pada bagian gambar yang terlihat. Bukankah itu luar biasa?

Keterbatasan dan Perbedaan

Seperti yang telah kita bahas di atas, bayangan jatuh tidak mendukung sebaran parameter. Ini berarti bahwa membuat efek garis besar tidak mungkin dilakukan dengan menggunakan bayangan jatuh ( ) berfungsi karena terbunuh di mana-mana. Juga, itu membuat efek bayangan yang berbeda dari bayangan kotak dan bayangan teks (dengan parameter yang sama). Anda mungkin merasa bahwa perbedaan antara bayangan kotak dan bayangan jatuh mendidih ke Model Kotak CSS. Yang satu mengikutinya sementara yang lain tidak. Berikut ini contohnya:

HTML

Setiap artikel MUO akan membawa Anda selangkah lebih dekat.


Setiap artikel MUO akan membawa Anda selangkah lebih dekat.



Setiap artikel MUO akan membawa Anda selangkah lebih dekat.

CSS dasar

tubuh {
bantalan: 5em 1em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Jenewa, Verdana, sans-serif;
}
.induk-wadah {
lebar: 72rem;
}
P {
ukuran font: 3em;
gaya font: tebal;
}

Menerapkan efek bayangan

.drop-bayangan {
filter: drop-shadow (0,5em 0,5em 0,1em #555);
}
.kotak-bayangan {
bayangan kotak: 0.5em 0.5em 0.1em #555;
}
.bayangan teks {
teks-bayangan: 0.5em 0.5em 0.1em #555;
}

Keluaran:

Anda dapat melihat bahwa bayangan kotak memberikan bayangan yang lebih berat dan lebih gelap daripada bayangan teks dan bayangan jatuh. Juga, ada sedikit perbedaan dalam posisi bayangan antara bayangan teks dan bayangan jatuh. Namun demikian, Anda dapat memilih efek bayangan yang berbeda sesuai dengan kebutuhan Anda.

Dukungan Peramban

NS bayangan jatuh ( ) fungsi ini didukung di semua browser modern kecuali browser lama seperti Internet Explorer. Meskipun itu bukan sesuatu yang secara serius akan menghambat UX, Anda dapat menambahkan kueri fitur dengan a bayangan kotak mundur.

Bereksperimen Dengan Efek Bayangan Berbeda

Popularitas dari bayangan kotak cukup jelas karena banyaknya kasus penggunaan. Namun, bayangan jatuh ( ) fungsi sangat kurang dimanfaatkan. Kami harap Anda akan bereksperimen dengan berbagai efek bayangan dan mencoba menerapkannya bayangan jatuh dalam proyek masa depan Anda.

Kelas semu menambahkan rangkaian fungsionalitas yang sama sekali baru ke CSS dan repertoar pengembangan web pribadi Anda. Pelajari lebih lanjut tentang mereka untuk menjadi pengembang web yang lebih mahir dan efisien.

Cara Menggunakan CSS box-shadow: 13 Trik dan Contoh

Kotak hambar terlihat membosankan. Rapikan mereka dengan efek bayangan kotak CSS!

Baca Selanjutnya

Tentang Penulis