Menggunakan Properti Text Shadow Pada CSS

Hallo Kawan, pada kesempatan kali ini saya akan memposting tentang penggunaan properti pada CSS yaitu Text-Shadow

Properti text-shadow menambahkan bayangan ke teks. Dibutuhkan empat nilai: nilai pertama mendefinisikan jarak bayangan dalam arah x (horizontal), nilai kedua mengatur jarak dalam arah y (vertikal), nilai ketiga mendefinisikan blur bayangan, dan nilai keempat mengatur warna.

Contoh penerapan pada kode HTML :

<h1>Text-Shadow</h1>

Contoh penerapan pada kode CSS :

h1 { color: red; font-size: 30px; text-shadow: 5px 2px 4px black; }

Hasil dari kode HTML dan CSS diatas :

Dalam contoh di atas, kita membuat bayangan dengan menggunakan parameter berikut :
5px - koordinat X.
2px - koordinat-Y.
4px - radius buram warna hitam - warna bayangan(text shadow)

Untuk menambahkan lebih dari satu bayangan ke teks, tambahkan daftar bayangan yang dipisahkan koma.

Text-shadow dengan Blur Effect

Saat bekerja dengan bayangan / Text Shadow, kalian dapat menggunakan format warna yang didukung oleh CSS. Untuk offset x dan y, berbagai tipe unit dapat digunakan (seperti px, cm, mm, in, pc, pt, dll). Nilai negatif juga didukung.

Contoh di bawah ini membuat drop-shadow biru, dua piksel lebih tinggi dari teks utama, satu piksel di sebelah kiri, dan dengan blur 0,5em:

Contoh penerapan pada HTML :

<h1>Text-Shadow dengan bayangan blur</h1>

Contoh penerapan pada CSS :

h1 { font-size: 20pt; text-shadow: rgba(0,0,255,1) -1px -2px 0.5em; }

Hasil dari kode HTML dan CSS di atas :

Baiklah cukup sekian, saya ucapkan terima kasih, mohon maaf bila ada kesalahan karena saya sendiri sebagai penulis masih dalah tahap pembelajaran.