Membuat Bayangan Tulisan dengan CSS Text Shadows

TULISAN DENGAN BAYANGAN

Kali ini saya akan memberikan tutorial mengenai cara membuat tulisan dengan bayangan. Untuk membuat tulisan yang muncul bayangan, caranya yaitu memakai fungsi Text Shadows pada CSS. Fungsi ini mungkin tidak berjalan di IE, hanya berjalan pada browser Mozilla Firefox atau Chrome.

Misalkan CSS template Anda akan dimasukkan text shadow pada H3
Kode CSS awal

.post H3 {
margin:0;
padding:10px 0;
font-size:14px;
font-weight:bold;
line-height:1.4em;
color:#0000ff;
}

Tambahkan kode text shadow nya menjadi:

.post H3 {
margin:0;
padding:10px 0;
font-size:14px;
font-weight:bold;
line-height:1.4em;
color:#0000ff;
text-shadow: 4px 3px 2px #ff0000;
}

Pada saat Anda menggunakan tag H3 dalam posting, secara otomatis style H3 akan menggunakan fungsi CSS tersebut.

<H3> Kuliah Komputer </H3>

Penjelasan:
4px merupakan jarak pergeseran text bayangan dari kiri ke kanan
3px merupakan jarak pergeseran text bayangan dari atas ke bawah
2px merupakan lebar dari text bayangan, semakin besar angkanya semakin blur textnya
#ff0000 merupakan kode warna dari text bayangan

Penggunaan text shadow pada postingan bisa juga dengan memasukkan kode HTML seperti berikut

Kode:

<div style=”text-shadow: 4px 3px 2px #ff0000; font-size: 24px; font-weight:bold;”>TULISAN DENGAN BAYANGAN</div>

Hasilnya:

TULISAN DENGAN BAYANGAN