Cara menambahkan bayangan pada teks / tulisan di blog

MEMBUAT BAYANGAN PADA TEKS - Pada kesempatan kali ini saya akan membuat tutorial tentang cara menambahkan efek bayangan pada teks / tulisan. Mudah-mudahan artikel ini akan berguna untuk sobat blogger.

Ada banyak alasan kenapa kita harus membuat efek bayangan pada teks / tulisan meskipun sebenarnya hal ini tidak di wajibkan. Alasan paling logis kenapa kita ingin menambahkan efek bayangan pada teks / tulisan, terutama untuk para blogger yaitu untuk mempercantik tampilan blog mereka saja.

Alasan lainnya mungkin hanya orang yang mencari artikel seperti ini lah yang tau, karena sudah pasti bukan tanpa alasan mereka mencari artikel tentang cara menambahkan bayangan pada teks / tulisan seperti yang saya tulis ini.

Seperti contoh saya sendiri, saya menemukan cara ini dari hasil pencarian saya tentang cara menambahkan bayangan pada teks / tulisan , tujuan saya waktu itu adalah agar teks dapat terlihat pada background bergambar , seperti yang kita tau bahwa sebuah gambar / Poto memiliki banyak varian warna yang bercampur, sehingga pada saat teks berada pada posisi yang sama dengan warna yang ada pada gambar, otomatis teks akan terlihat samar atau bahkan tidak terlihat sama sekali.

Contoh : Gambar dibawah ini mempunyai banyak warna, kemudian saya tambahkan beberapa tulisan pada gambar tersebut dengan warna yang berbeda-beda, coba kalian perhatikan. Teks dengan warna apa yang paling terlihat jelas dan lebih mudah dibaca pada gambar tersebut.

Teks warna hitam
Teks warna kuning

Teks warna biru

Teks warna hijau

Teks warna merah

Teks warna putih

Jika kalian memilih teks dengan warna putih sebagai teks yang paling mencolok, berarti jawaban kalian tepat. Karena pada teks / tulisan yang berwarna putih telah saya tambahkan shadow ( bayangan ).

Teks / tulisan dengan warna putih di atas menggunakan skrip seperti berikut :

<div style="text-shadow: 0 0 4px red, 0 0 6px blue; color: white;">Teks warna putih</div>

Skrip di atas akan menghasilkan tulisan warna putih dengan bayangan warna violet karena menggabungkan warna merah dan warna biru.

Cara menambahkan bayangan pada teks / tulisan.

Untuk menggunakan warna dan gaya yang berbeda silahkan simak tutorial di bawah ini

1. Teks dengan bayangan

<div style="text-shadow: 3px 3px 3px;">Teks dengan bayangan</div>

2. Teks dengan bayangan biru

<div style="text-shadow: 3px 3px 3px blue;">Teks dengan bayangan biru</div>

3. Teks dengan bayangan biru blur

<div style="text-shadow: 3px 3px 6px blue;">Teks dengan bayangan biru blur</div>

4. Teks warna merah dengan bayangan biru blur

<div style="text-shadow: 3px 3px 5px blue; color: red;">Teks warna merah dengan bayangan biru blur</div>

5. Teks putih dengan bayangan merah menyala

<div style="text-shadow: 0 0 6px red; color: white;">Teks putih dengan bayangan merah menyala</div>

6. Teks biru dengan bayangan 3 warna

<div style="text-shadow: 2px 2px 3px red, 0 0 10px blue, 0 0 4 yellow; color: blue;">Teks biru dengan bayangan 3 warna</div>

Kalian bisa kreasikan sesuai minat masing masing sebagai contoh keseluruhan skrip yang saya buat seperti berikut.

Teks tebal menggunakan ukuran paling besar dengan bayangan hijau

<div style="color: black; text-align: center; text-shadow: 3px 3px 4px green;">
<b><span style="font-size: x-large;"> 
TULISAN </span></b>
</div>

Silahkan kreasikan sendiri tulisan kamu dengan cara mengubah bagian-bagian seperti yang saya tandai dalam gambar berikut .

Demikian artikel saya kali ini tentang cara menambahkan bayangan pada teks / tulisan di blog ini, semoga postingan ini bisa bermanfaat buat kalian semua. Jika ada yang kurang jelas pada pembahasan di atas silahkan kalian tanyakan di kolom komentar.