Drop shadow adalah efek yang menjatuhkan atau menambahkan bayangan di belakang elemen HTML yang dipilih saat ditampilkan di halaman web. Efek ini dapat dicapai dengan menggunakan “ bayangan jatuh() ” metode sebagai nilai untuk CSS “ Saring ” atau menggunakan properti “ bayangan kotak ' Properti. Dengan memanfaatkan properti 'box-shadow', peningkatan visual, pengalaman pengguna, penekanan, dan fokus dapat ditarik ke elemen HTML tertentu yang ditargetkan.
Panduan ini mendemonstrasikan prosedur membuat efek drop shadow menggunakan properti box-shadow:
-
- Membuat Drop Shadow Padat Menggunakan Properti box-shadow
- Membuat Drop Shadow Buram Menggunakan Properti box-shadow
- Perluas Area Drop Shadow
Bagaimana Cara Membuat Drop Shadows di CSS3 Menggunakan Properti box-shadow?
“ bayangan kotak ” properti memungkinkan pengembang untuk membuat hierarki visual dengan menunjukkan posisi relatif elemen pada halaman. Dengan menggunakannya, pembuat halaman web dapat menciptakan ilusi objek yang menghasilkan bayangan pada permukaan, memberikan elemen nuansa yang lebih interaktif.
Sintaksis
Properti 'box-shadow' memiliki sintaks:
bayangan kotak: [ offset horisontal ] [ offset vertikal ] [ radius buram ] [ radius penyebaran ] [ warna ] ;
Penjelasan istilah yang digunakan dalam sintaks di atas:
-
- Awalnya, “ offset horisontal ” mengambil/ menyimpan posisi sumbu X, dan tombol “ negatif ” nilai mengatur bayangan ke kiri dan sebaliknya.
- “ offset vertikal ” nilai menyimpan posisi sumbu Y, nilai “ positif ” nilai mengatur bayangan ke arah bawah, dan sebaliknya dalam kasus “ negatif ' nilai.
- Selanjutnya, “ radius buram ” nilai dari namanya menentukan keburaman bayangan.
- “ radius penyebaran ” nilai menentukan berapa banyak radius bayangan harus diperluas.
- “ warna ” mengatur warna bayangan, bisa di “ HSL ' atau ' RGB formatnya juga.
Sekarang, mari kita telusuri beberapa contoh untuk pemahaman yang lebih baik:
Contoh 1: Terapkan Solid Drop Shadow Menggunakan Properti box-shadow
Untuk mengatur solid drop shadow, hanya arah dan warna bayangan yang dimasukkan sebagai nilai ke “ bayangan kotak ' Properti:
< gaya >.boxShadowExample {
lebar: 210px;
batas: 2px sutra jagung padat;
tinggi: 210px;
warna latar belakang: #f0f0f0;
bayangan kotak: 10px 10px hijau hutan;
}
gaya >
Dalam kode di atas:
-
- Pertama, elemen HTML dipilih yang memiliki kelas “ boxShadowExample ”. Dan nilai “ 210px ” diberikan kepada “ tinggi ' Dan ' lebar ” properti. Juga, gunakan ' berbatasan ' Dan ' warna latar belakang ” properti untuk visualisasi yang lebih baik.
- Selanjutnya, atur nilai “ 10px 10px hijau hutan ' ke ' bayangan kotak ” Properti CSS. “ 10px ” adalah offset horizontal dan vertikal yang menentukan lokasi di mana bayangan perlu diterapkan. Dan “ hutan hijau ” adalah warna bayangan.
Setelah kompilasi, halaman web muncul seperti ini:
Output mengonfirmasi bahwa drop shadow tipe padat telah ditempatkan menggunakan properti box-shadow.
Contoh 2: Menerapkan Drop Shadow Buram Menggunakan Properti box-shadow
Untuk membuat bayangan yang sudah diterapkan menjadi kabur, satu lagi nilai numerik dimasukkan sebelum warna untuk “ bayangan kotak ' Properti. Kunjungi kode yang diperbarui di bawah ini:
< gaya >.boxShadowExample {
lebar: 210px;
batas: 2px sutra jagung padat;
tinggi: 210px;
background-color: asap putih;
bayangan kotak: 10px 10px 15px hijau hutan;
}
gaya >
Menurut kode di atas, bayangannya sekarang adalah “ 15px ” kabur. Setelah akhir fase kompilasi, halaman web terlihat seperti ini:
Gambar di atas menunjukkan bahwa bayangan sekarang kabur.
Contoh 3: Memperluas Area Drop Shadow
Nilai spread diberikan ke “ bayangan kotak ” properti untuk memperluas wilayah bayangan. Nilai spread harus dalam format numerik. Seperti pada cuplikan kode di bawah ini, wilayah bayangan diperluas menjadi “ 20px ”:
< gaya >.boxShadowExample {
lebar: 210px;
batas: 2px sutra jagung padat;
tinggi: 210px;
background-color: asap putih;
bayangan kotak: 10px 10px 15px 20px hijau hutan;
}
gaya >
Setelah eksekusi, drop shadow sekarang muncul seperti ini:
Seperti yang Anda lihat, wilayah bayangan sekarang bertambah 20px.
Kesimpulan
“ bayangan kotak ' properti digunakan untuk pembuatan ' bayangan jatuh ” berpengaruh pada elemen HTML yang dipilih. “ bayangan jatuh ” properti menerima lima nilai, “ offset horisontal ”, “ offset vertikal ”, “ radius buram ”, “ radius penyebaran ' Dan ' warna ”. Nilai 'offset horizontal' dan 'offset vertikal' mengatur dimensi bayangan dari mana drop shadow akan muncul. Nilai 'blur radius' membuat bayangan buram dan nilai 'spread radius' memperluas wilayah bayangan.