0 Cara Membuat Text Shadow Dengan CSS3

Baru saja kemarin posting tentang trik membuat text shadow, Kali ini saya mengajak anda lagi untuk bermain2 dengan Trik CSS "Text Shadows" atau kalo diartiin tuh text dengan bayangan. Tentunya bagi yang belum tau trik CSS ini :p. Selain itu juga, setau saya trik CSS ini hanya untuk Browser Mozilla Firefox(jadi gunakan Browser FF untuk membaca postingan ini, hahaha).

Langsung mulai aja yah, kode CSS-nya seperti ini:

text-shadow: 4px 3px 2px #ff0000;

Contohnya seperti ini :

Tulisan dengan Bayangan

penjelasannya kira2 seperti ini :

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

Cara penggunaannya seperti ini :

1. Langsung digunakan pada CSS Template
Misalnya anda ingin memberi text bayangan pada judul posting. Secara umum template blogspot menggunakan tag .Post H3 untuk judul posting. Jadi masuk ke EDIT HTML lalu cari tag .post H3.

Misal, kode CSSnya seperti ini:
.post h3 {
margin:0;
padding:10px 0;
font-size:14px;
font-weight:bold;
line-height:1.4em;
color:#0000ff;
}

Tinggal tambahkan kode text shadow nya:
.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;
}

2. Digunakan pada postingan

tambahan kode HTML seperti contoh dibawah ini :

Kode :

<div style="text-shadow: 4px 3px 2px #ff0000; font-size: 24px; font-weight:bold;">GANTI TULISAN INI DENGAN TEXT YANG INGIN ANDA BERI BAYANGAN</div>

Hasil :

GANTI TULISAN INI DENGAN TEXT YANG INGIN ANDA BERI BAYANGAN

Variasi dari kode text shadow :

1. Membuat Dua Bayangan

Kode :

<div style="text-shadow: 4px 3px 2px #ff0000, -4px -3px 2px #0000ff;">TEXT DENGAN BAYANGAN</div>

Hasil :

TEXT DENGAN BAYANGAN

2. Membuat Tiga Bayangan

Kode :

<div style="text-shadow: 4px 10px 2px #ff0000, -4px -10px 2px #0000ff, 15px 3px 2px #333333;">TEXT DENGAN BAYANGAN</div>

Hasil :

TEXT DENGAN BAYANGAN

3. Efek Cahaya Neon [1]

Kode :

<div style="text-shadow: 0px 0px 4px #8877ff; font-size: 24px; font-weight:bold;">TEXT DENGAN BAYANGAN</div>

Hasil:

TEXT DENGAN BAYANGAN

3. Efek Cahaya Neon [2]

Kode :

<div style="text-shadow: 0px 0px 4px #8877ff, 0px 0px 4px #8877ff, 0px 0px 4px #8877ff; font-size: 24px; font-weight:bold;">TEXT DENGAN BAYANGAN</div>

Hasil:

TEXT DENGAN BAYANGAN

Jadi, Silahkan anda bereksperimen sendiri dengan mengganti2 angka dan kode warnanya serta besar ukuran fontnya(font-size) untuk mendapatkan hasil yang sesuai dengan keinginan anda ;)