CSS penuh dengan opsi untuk menyempurnakan tampilan situs web Anda; bayangan teks dan kotak adalah contoh utama. Mereka menawarkan hasil yang mirip dengan bayangan yang ditemukan di perangkat lunak pengedit gambar seperti Photoshop.
Tapi bagaimana cara kerja bayangan CSS? Mari selami.
Cara Menggunakan Bayangan Kotak CSS
Anda dapat menerapkan bayangan kotak CSS dengan satu baris CSS yang berisi rentang hingga enam nilai. Urutan nilai sangat penting agar bayangan kotak CSS Anda berfungsi, dan terlihat seperti ini:
box-shadow: offset-x offset-y blur menyebar inset warna;Mari kita lihat masing-masing nilai secara berurutan.
Posisi Bayangan Kotak CSS
Nilai offset-x dan offset-y mengontrol posisi bayangan kotak Anda. Nilai offset-x mewakili posisi horizontal bayangan, sedangkan offset-y adalah offset vertikal.
bayangan kotak: 10px 10px;Nilai positif menghasilkan bayangan di bawah dan kanan elemen.
Anda juga dapat menggunakan nilai negatif untuk offset-h dan offset-v:
bayangan kotak: -10px -10px;Offset-h negatif memindahkan bayangan ke kiri, sedangkan offset-v negatif memindahkannya ke atas:
Kabur Bayangan Kotak CSS
Seperti yang Anda lihat, menambahkan h-offset dan v-offset ke bayangan Anda menciptakan bayangan padat tanpa bulu. Nilai blur mengaburkan bayangan kotak CSS Anda dan berlaku jika Anda memberikan nilai ketiga:
bayangan kotak: 10px 10px 20px;Semakin tinggi angka yang Anda tambahkan ke nilai blur, bayangan kotak CSS Anda akan semakin kabur. Nilai ini tidak boleh negatif.
Penyebaran Bayangan Kotak CSS
Nilai sebaran memungkinkan Anda mengubah ukuran bayangan tanpa mengubah posisinya.
bayangan kotak: 10px 10px 20px 30px;Nilai sebaran positif akan membuat bayangan kotak CSS Anda lebih besar, sedangkan nilai negatif akan membuatnya lebih kecil.
Warna Bayangan Kotak CSS
Bayangan kotak CSS default ke warna teks elemen, tetapi Anda dapat menimpanya dengan menambahkan warna:
bayangan kotak: 10px 10px 20px 10px #0000ff;Warna yang Anda gunakan harus dalam format warna legal CSS, seperti kode hex, kode RGB, atau warna yang telah ditentukan sebelumnya. Kamu bisa belajar tentang kode hex dan opsi warna legal CSS lainnya sebelum Anda memulai dengan bayangan Anda.
Inset Bayangan Kotak CSS
Bayangan kotak CSS secara default berada di luar elemen yang ditetapkan. Dengan menambahkan inset ke properti box-shadow, Anda bisa menampilkan bayangan di bagian dalam elemen.
bayangan kotak: 10px 10px 20px 10px #0000ff sisipan;Ini adalah nilai teks yang telah ditentukan sebelumnya; cukup tambahkan atau hapus untuk menetapkan nilainya.
Cara Menggunakan Bayangan Teks CSS
Bayangan teks CSS seperti bayangan kotak, meskipun memiliki lebih sedikit nilai untuk dimodifikasi. Sintaks untuk bayangan teks CSS terlihat seperti ini:
teks-bayangan: warna offset-x offset-y blur-radius;Tapi bagaimana nilai-nilai ini bekerja?
Posisi Bayangan Teks CSS
Offset bayangan teks CSS bekerja sangat mirip dengan nilai bayangan kotak yang sama:
teks-bayangan: 10px 10px;Nilai positif akan memposisikan bayangan di bawah dan kanan teks.
Nilai negatif sebaliknya, menempatkan bayangan di atas dan kiri teks.
teks-bayangan: -10px -10px;Anda dapat menggabungkan nilai negatif dan positif untuk memposisikan bayangan teks CSS Anda dengan sempurna.
Radius Blur Bayangan Teks CSS
Radius bayangan bayangan teks CSS memungkinkan Anda mengaburkan bayangan di belakang teks Anda.
teks-bayangan: 10px 10px 10px; Default untuk nilai ini adalah 0 (tanpa blur).
Warna Bayangan Teks CSS
Secara default, bayangan teks CSS cocok dengan warna teks. Anda dapat mengubah warna teks Anda dengan menambahkannya ke akhir properti bayangan teks CSS.
bayangan teks: 10px 10px 10px #0000ff;Seperti warna bayangan kotak CSS, Anda harus menggunakan warna legal CSS untuk ini.
Contoh Desain Kotak CSS dan Bayangan Teks
Anda dapat mulai bereksperimen dengan penggunaan kotak CSS dan bayangan teks setelah Anda memahami dasar-dasarnya. Ide-ide di bawah ini akan menginspirasi Anda untuk menemukan cara kreatif Anda sendiri dalam menggunakan properti CSS ini.
Perbatasan Dua Warna Dengan Dua Bayangan Kotak CSS
Anda dapat menambahkan lebih dari satu bayangan kotak atau bayangan teks ke elemen HTML. Selama mereka memiliki koma di antara keduanya, Anda dapat menambahkan bayangan baru ke satu properti.
bayangan kotak: 30px 30px#0000ff, -30px-30px 0px#00ff00;Perbatasan dua warna ini adalah contoh yang bagus untuk ini. Dua bayangan kotak CSS dengan posisi berlawanan dan tanpa kekaburan/penyebaran menghasilkan batas kreatif yang luar biasa.
Bayangan Teks CSS Ganda untuk Efek Dramatis
Serupa dengan ide di atas, Anda dapat menambahkan dan memposisikan teks beberapa bayangan teks untuk hasil yang menarik.
teks-bayangan: 35px 20px 4px darkgray, -35px -20px 4px darkgray;Contoh ini menampilkan baris teks dengan bayangan di atas dan bayangan di bawah, keduanya memiliki nilai warna berbasis teks.
Latar Belakang Banyak Warna Dengan Inset CSS Box Shadows
CSS cukup kuat untuk membuat aset unik dan menarik tanpa file eksternal apa pun. Menggunakan bayangan kotak CSS inset sebagai latar belakang adalah contoh yang bagus untuk ini.
bayangan kotak: 20px 10px 10px 40px sisipan #000000, sisipan abu-abu -50px -30px 8px 60px, sisipan abu-abu muda 30px 20px 6px 90px;Kotak ini memiliki latar belakang putih, bersama dengan tiga bayangan sisipan dengan warna berbeda. Bayangan tumpang tindih satu sama lain untuk menciptakan latar belakang yang unik.
Meningkatkan efek ini lebih jauh adalah masalah sederhana menambahkan gradien latar belakang CSS yang bergaya ke elemen Anda.
Bayangan Kotak CSS & Bayangan Teks untuk Desain Web Kreatif
Kotak CSS dan bayangan teks mudah digunakan setelah Anda tahu cara menggunakannya. Anda sekarang memiliki alat yang Anda butuhkan untuk mulai mengerjakan desain Anda sendiri, tetapi Anda harus terus meneliti CSS untuk meningkatkan keterampilan Anda.