Salah satu properti CSS yang sangat mudah untuk dikreasikan adalah Text Shadow atau bayangan pada teks. Anda dapat menerapkan banyak gaya text-shadow pada setiap tulisan agar terlihat lebih indah dan menarik.
Dalam artikel ini, saya akan menyajikan 12 contoh CSS text shadow yang bisa Anda coba.
Dasar CSS Text Shadow
Sintaks untuk membuat text-shadow sangatlah sederhana. Perhatikan di bawah ini:
text-shadow: horizontal-offset vertical-offset blur color;
Ada empat variabel di dalam sintaks text-shadow. Dua yang pertama digunakan untuk mengatur posisi bayangan, variabel ketiga untuk mengatur nilai blur dan variabel keempat untuk mengatur warna bayangan.
Jika saya membuat contoh kode seperti ini:
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
Maka hasilnya akan menjadi seperti ini:
Kenapa Menggunakan Kode Warna RGBA?
Tidak harus menggunakan kode warna RGBA, Anda dapat menggunakan kode warna apapun yang berlaku di CSS.
Kode warna RGBA digunakan jika Anda menginginkan komposisi warna yang lebih kompleks. Selain itu, dengan RGBA Anda dapat mengatur opacity dari warna yang digunakan langsung di dalam kode warna.
12 Contoh CSS Text Shadow
Saya sudah membuat 12 contoh CSS untuk text-shadow di CodePen. Anda tinggal menyalin kode yang ingin digunakan, atau bisa juga dimodifikasi kembali sesuai dengan kebutuhan Anda.
See the Pen on CodePen.
Gunakan kolom komentar jika ada yang ingin ditanyakan.