Senin, 07 Februari 2011

Cara Membuat Text Shadow

Eeemmmmm..kali ini gue bakal berbagi ilmu lagi gimana caranya bikin text shadow dengan menggunakan CSS.
Dengarkan sugesti yang saya berikan http://www.smileycodes.info
Dari pada ribet-ribet bikin efek text shadow di Photoshop mending langsung aja bikin pake CSS, lagian kan klo pake CSS lebih enteng saat load di websitenya dari pada pake gambar.
Okeh langsung aja cara buatnya.

1. Membuat 2 bayangan
Kode:
<div style="text-shadow: 4px 3px 2px #ff0000, -4px -3px 2px #0000ff;">TEXT SHADOW</div>

Hasil:


TEXT SHADOW

2. Membuat 3 bayangan
Kode:
<div style="text-shadow: 4px 10px 2px #ff0000, -4px -10px 2px #0000ff, 15px 3px 2px #333333;">TEXT SHADOW</div>

Hasil:


TEXT SHADOW


penjelasan:
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

sumber: http://www.myherro.com/2009/12/trik-css-text-shadows.html

Tidak ada komentar:

Posting Komentar