Cara Menggunakan Bayangan Kotak CSS dan Bayangan Teks


CSS penuh dengan opsi untuk meningkatkan tampilan situs web Anda; teks dan bayangan 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 kita 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 spread color inset;

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.

 box-shadow: 10px 10px;

Nilai positif menghasilkan bayangan di bawah dan kanan elemen.

Anda juga dapat menggunakan nilai negatif untuk h-offset dan v-offset:

 box-shadow: -10px -10px;

Sebuah h-offset negatif memindahkan bayangan ke kiri, sementara v-offset negatif memindahkannya ke atas:

Blur Bayangan Kotak CSS

Seperti yang Anda lihat, menambahkan h-offset dan v-offset ke bayangan Anda menciptakan bayangan yang solid tanpa bulu apapun. Nilai blur mengaburkan bayangan kotak CSS Anda dan berlaku jika Anda memberikan nilai ketiga:

box-shadow: 10px 10px 20px;

Semakin tinggi angka yang Anda tambahkan ke nilai blur, semakin kabur bayangan kotak CSS Anda. Nilai ini tidak boleh negatif.

Penyebaran Bayangan Kotak CSS

Nilai spread memungkinkan Anda untuk mengubah ukuran bayangan Anda tanpa mengubah posisinya.

 box-shadow: 10px 10px 20px 30px;

Nilai spread 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 menggantinya dengan menambahkan warna:

box-shadow: 10px 10px 20px 10px 

Warna yang Anda gunakan harus dalam format warna legal CSS, seperti kode hex, kode RGB, atau warna yang telah ditentukan sebelumnya. Anda dapat mempelajari tentang kode hex dan opsi warna legal CSS lainnya sebelum memulai dengan bayangan Anda.

Inset Bayangan Kotak CSS

Bayangan kotak CSS default berada di luar elemen yang ditetapkan. Dengan menambahkan inset ke properti box-shadow, Anda bisa menampilkan bayangan di bagian dalam elemen.

box-shadow: 10px 10px 20px 10px 

Ini adalah nilai teks yang telah ditentukan sebelumnya; cukup tambahkan atau hapus untuk mengatur nilainya.

Cara Menggunakan Bayangan Teks CSS

Bayangan teks CSS seperti bayangan kotak, meskipun mereka memiliki lebih sedikit nilai untuk dimodifikasi. Sintaks untuk bayangan teks CSS terlihat seperti ini:

text-shadow: offset-x offset-y blur-radius color;

Tapi bagaimana nilai-nilai ini bekerja?

Posisi Bayangan Teks CSS

Offset bayangan teks CSS bekerja sangat mirip dengan nilai bayangan kotak yang sama:

text-shadow: 10px 10px;

Nilai positif akan memposisikan bayangan di bawah dan kanan teks.

Nilai negatif melakukan sebaliknya, menempatkan bayangan di atas dan kiri teks.

 text-shadow: -10px -10px;

Anda dapat mencampur nilai negatif dan positif untuk memposisikan bayangan teks CSS Anda dengan sempurna.

Radius Buram Bayangan Teks CSS

radius blur bayangan teks CSS memungkinkan Anda untuk mengaburkan bayangan di belakang teks Anda.

text-shadow: 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.

text-shadow: 10px 10px 10px 

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 untuk 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 mereka, Anda dapat menambahkan bayangan baru ke satu properti.

box-shadow: 30px 30px #0000ff, -30px -30px 0px #00ff00;

Perbatasan dua warna ini adalah contoh bagus untuk ini. Dua bayangan kotak CSS dengan posisi berlawanan dan tanpa blur/spread menghasilkan batas kreatif yang sangat baik.

Bayangan Teks CSS Ganda untuk Efek Drama

Dalam nada yang mirip dengan ide di atas, Anda dapat menambahkan dan memposisikan teks beberapa bayangan teks untuk hasil yang menarik.

text-shadow: 35px 20px 4px darkgray, -35px -20px 4px darkgray;

Contoh ini menunjukkan baris teks dengan bayangan di atas dan bayangan di bawah, keduanya memiliki nilai warna berbasis teks.

Latar Belakang Multicolor Dengan Inset CSS Box Shadows

CSS cukup kuat untuk membuat aset yang unik dan menarik tanpa file eksternal apa pun. Menggunakan bayangan kotak inset CSS sebagai latar belakang adalah contoh yang bagus untuk ini.

box-shadow: 20px 10px 10px 40px 

Kotak ini memiliki latar belakang putih, bersama dengan tiga bayangan sisipan dalam warna berbeda. Bayangan saling tumpang tindih untuk menciptakan latar belakang yang unik.

Meningkatkan efek ini lebih jauh adalah masalah sederhana dengan 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 bekerja dengannya. Anda sekarang memiliki alat yang Anda butuhkan untuk mulai mengerjakan desain Anda sendiri, tetapi Anda harus terus meneliti CSS untuk meningkatkan keterampilan Anda.


https://www.makeuseof.com/css-box-text-shadows/

Leave a Comment