Trik CSS : Text Shadows

By Admin di 12/08/2009 |

Trik CSS : Text Shadows - Tak terasa, sudah sekitar 2 minggu saya tidak membuat postingan untuk blog ini karena tidak ada koneksi internet :D. Kali ini saya mengajak anda 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 :

GANTI TULISAN INI DENGAN TEXT YANG INGIN ANDA BERI BAYANGAN

Hasil :

GANTI TULISAN INI DENGAN TEXT YANG INGIN ANDA BERI BAYANGAN

Variasi dari kode text shadow :

1. Membuat Dua Bayangan

Kode :

TEXT DENGAN BAYANGAN

Hasil :

TEXT DENGAN BAYANGAN

2. Membuat Tiga Bayangan

Kode :

TEXT DENGAN BAYANGAN

Hasil :

TEXT DENGAN BAYANGAN

3. Efek Cahaya Neon [1]

Kode :

TEXT DENGAN BAYANGAN

Hasil:

TEXT DENGAN BAYANGAN

3. Efek Cahaya Neon [2]

Kode :

TEXT DENGAN BAYANGAN

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 ;)

Related Posts by Categories