Ingin menambahkan efek drop shadow ke gambar website Anda atau konten lainnya? Itu bisa dilakukan dengan menggunakan CSS, tidak perlu menggunakan software yang rumit. Manfaat menggunakan CSS untuk menambahkan efek bayangan adalah Anda dapat menargetkan elemen dengan tepat dan memodifikasinya sesuai kebutuhan. Dalam kasus gambar, menambahkan efek drop-shadow melalui CSS menghilangkan kebutuhan untuk memodifikasinya secara permanen.
Anda dapat menambahkan efek drop shadow menggunakan properti CSS sederhana yang disebut Box Shadow ke hampir semua elemen HTML atau gambar. Box Shadow adalah properti CSS sederhana yang menempelkan satu atau lebih bayangan ke elemen menggunakan offset, blur, radius, dan warna. Box Shadow diperkenalkan dengan CSS sejak dulu dan didukung oleh semua browser modern.
Hal terbaik tentang Box Shadow adalah Anda dapat menambahkan efek bayangan di luar atau di dalam kotak konten. Sekarang, Anda mungkin bertanya-tanya apa artinya kotak konten. Secara sederhana, kotak konten tidak lain adalah elemen HTML seperti P, DIV, dll.
Sintaks Bayangan Kotak CSS
Sintaks untuk properti Box-Shadow akan menjadi seperti ini.
box-shadow:;
Offset horizontal (nilai yang diperlukan): Ini adalah nilai yang diperlukan dan saat Anda menetapkan nilai positif (seperti 10px), bayangan akan didorong ke sisi kiri secara horizontal. Nilai negatif (seperti -10px) akan mendorong bayangan ke sisi kanan. Anda dapat menyetelnya ke 0 jika Anda tidak ingin mengimbangi bayangan.
Offset vertikal (nilai wajib): Ini adalah nilai yang diperlukan dan saat Anda menetapkan nilai positif (seperti 10px), bayangan akan didorong ke bawah secara vertikal. Nilai negatif (seperti -10px) akan mendorong bayangan ke atas secara vertikal. Anda dapat menyetelnya ke 0 jika Anda tidak ingin mengimbangi bayangan.
Radius blur (nilai yang dibutuhkan): Nilai ini memburamkan bayangan sehingga tidak akan memiliki tepian yang tajam. Semakin tinggi Anda menetapkan nilainya, semakin tinggi efek buramnya. Jika Anda tidak menginginkan efek buram, Anda dapat menyetelnya ke "0".
Radius penyebaran (nilai opsi): Ini adalah nilai opsional yang menyebarkan bayangan tergantung pada nilai yang Anda tetapkan. Semakin tinggi nilainya, semakin tinggi spreadnya. Jika Anda tidak menginginkan efek penyebaran, Anda dapat menghilangkan nilai atau menyetelnya ke "0".
Warna (nilai wajib): Anda dapat mengatur warna apa pun yang Anda inginkan menggunakan hex, RGB (Red, Blue, Green, Alpha), HLSA (Hue, Saturation, Lightness, Alpha), dan warna HTML bernama. Jika Anda tidak menyetel warna apa pun, browser akan menyetel warna default. Warna default sepenuhnya bergantung pada browser yang Anda gunakan. Jadi, selalu merupakan ide yang bagus untuk mengatur warnanya.
Tambahkan Bayangan Kotak CSS ke Gambar atau Kotak Konten
Menggunakan sintaks di atas, Anda dapat menambahkan efek drop-shadow ke elemen apa pun dengan mudah. Misalnya, jika Anda ingin menambahkan efek bayangan dengan blur dan menyebar ke elemen div maka yang harus Anda lakukan adalah menargetkan elemen itu menggunakan tag elemen atau kelas atau ID CSS-nya dan mengisi nilai box-shadow Properti. Ini akan terlihat seperti ini.
.shadow-effect {box-shadow: 3px 3px 10px 2px # a9a1a1; } Hasil:
Jika Anda tidak ingin memburamkan bayangan tetapi ingin menyebarkannya, kode akan terlihat seperti ini.
.shadow-effect {box-shadow: 5px 5px 0px 2px # a9a1a1; } Seperti yang Anda lihat, saya telah menyetel radius buram ke 0px. Efek bayangan yang dihasilkan memiliki tepi yang keras dan terlihat seperti ini.
Salah satu hal paling gila tentang properti Box-Shadow adalah memungkinkan Anda menambahkan banyak bayangan. Untuk melakukan itu, yang harus Anda lakukan adalah menentukan nilai yang dipisahkan koma. Sintaksnya akan terlihat seperti ini.
.shadow-effect {box-shadow: 10px 10px 0 blue, 15px 15px 0 red, 20px 20px 0 green; } 
Dengan menambahkan "inset" ke properti box-shadow, Anda dapat menampilkan efek bayangan di dalam kotak konten.
.shadow-effect {box-shadow: inset 3px 3px 10px 2px # a9a1a1; } Hasil:
Ini hanyalah beberapa contoh bagaimana Anda dapat menambahkan efek bayangan ke kotak konten atau gambar apa pun. Dengan hanya memodifikasi nilai yang berbeda, Anda bisa mendapatkan efek bayangan yang Anda inginkan. Hanya bermain-main dan lihat apa yang sesuai dengan kebutuhan Anda.
Pembuat Bayangan Teks CSS
Jika Anda ingin menambahkan drop shadow ke teks maka Anda harus menggunakan properti Text-Shadow. Sintaksnya sangat mirip dengan properti Box-Shadow tetapi tidak ada radius penyebaran di properti Text-Shadow. Ini sintaksnya.
bayangan teks:;
Saat Anda mengganti sintaks di atas dengan nilai aktual, akan terlihat seperti ini.
p {text-shadow: 1px 1px 2px # 333333; } Efek yang dihasilkan akan seperti ini.
Tidak seperti properti box-shadow, nilai blur di Text-Shadow bersifat opsional. yaitu, jika Anda tidak ingin bayangan teks menjadi buram, Anda dapat menghilangkan nilai atau menyetelnya ke "0".
Tambahkan CSS Box Shadow pada Gambar Tertentu di Wordpress
Sekarang, setelah kita mengetahui, bagaimana menambahkan efek bayangan ke gambar menggunakan CSS, sekarang kita membutuhkan cara untuk menambahkannya pada gambar tertentu tanpa mempengaruhi gambar lain di situs web.
Untuk melakukannya, Anda cukup membuat kelas CSS baru dan menambahkannya ke gambar jika diperlukan. Dengan cara ini, hanya gambar dengan kelas CSS tertentu yang akan memiliki efek bayangan.
Untuk membuat kelas CSS baru, Anda dapat menggunakan plugin Wordpress CSS Kustom Sederhana atau sebagian besar tema WP juga dilengkapi dengan file custom.css. Anda juga dapat menambahkan kode CSS di file itu.
Selanjutnya, klik dua kali pada file Sunting ikon untuk gambar itu (yang terlihat seperti pensil). Di bawah Maju pilihan mencariKelas CSS Gambardan ketik nama kelas, yang telah Anda tentukan di lembar gaya kami. Untuk contoh ini, nama kelas kami adalah efek bayangan,setelah selesai simpan perubahan.
Lalu klik "Menyimpan konsep" atau 'Memperbarui'Untuk memperbarui halaman WordPress. Saat halaman di-refresh, hasilnya terlihat seperti ini:
Hanya gambar dengan efek bayangan Kelas CSS, yang akan memiliki Box Shadow di sekitarnya. Jika posting blog Anda memiliki 20 gambar, Anda harus melakukannya secara manual untuk 20 gambar, yang agak membosankan. Namun, itu masih akan menghemat banyak waktu untuk mengeditnya di Photoshop.
Seperti yang Anda lihat, menambahkan efek drop-shadow menggunakan CSS tidaklah sulit. Contoh yang saya tunjukkan di sini hanyalah dasar-dasarnya. Mainkan saja dengan nilai yang berbeda dan Anda akan melihat seberapa efektif properti Box-Shadow dan Text-Shadow sebenarnya. Untuk kemudahan penggunaan, Anda juga dapat menggunakan generator box-shadow.
Semoga membantu. Beri komentar di bawah untuk membagikan pemikiran dan pengalaman Anda tentang penggunaan metode di atas untuk menambahkan efek drop shadow ke gambar atau kotak konten menggunakan CSS.
