Refmasi

Tutorial Efek Bayangan pada Teks dengan CSS

Pendahuluan

Menambahkan efek bayangan pada teks bisa membuat tampilan website Anda menjadi lebih menarik dan dinamis. Dalam tutorial ini, kita akan membahas cara menggunakan properti text-shadow pada CSS untuk membuat efek bayangan yang keren.

Langkah-langkah

Berikut adalah langkah-langkah untuk menambahkan efek bayangan pada teks menggunakan CSS:

1. Buka file HTML atau CSS Anda.
2. Tentukan teks yang ingin Anda tambahkan efek bayangan.
3. Gunakan properti text-shadow pada CSS. Format dasar dari properti ini adalah:

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

Contoh:

        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    

Contoh Teks dengan Efek Bayangan

Ini adalah contoh teks dengan bayangan!

Penjelasan

Dalam contoh di atas, kita telah menambahkan bayangan ke teks dengan offset horizontal 2px, offset vertikal 2px, dan radius blur 5px. Warna bayangan yang digunakan adalah hitam dengan opasitas 30%.

Kesimpulan

Dengan menggunakan properti text-shadow, Anda bisa membuat efek bayangan pada teks yang sederhana namun menarik. Bereksperimenlah dengan nilai-nilai berbeda untuk mendapatkan efek yang Anda inginkan!

© 2024 Blog Teknologi