Cara Membuat Text Shadow

Posted by Tips Trick Blogger Thursday, January 27, 2011 0 comments

Sebelum memulai perlu kita ketahui dulu apa itu text shadow?

text-shadow adalah property dari CSS3 yang berfungsi membuat bayangan pada text. Fungsi penggunaan text shadow saya yakin sudah anda pahami, salah satunya adalah untuk memperindah tampilan blog, jika diletakkan pada properti template. Selain itu untuk membuat daya tarik tersendiri pada postingan anda.

Value text-shadow

selector_atau_taghtml:text-shadow:value1(spasi)value2;
selector_atau_taghtml:text-shadow:value1(spasi)value2(spasi)value3;
selector_atau_taghtml:text-shadow:value1(spasi)value2(spasi)value3(spasi)value4(color);

CONTOH TEXT SHADOW

maka kodenya akan menjadi seperti ini.

CONTOH TEXT SHADOW

Keterangan

value1 fungsinya untuk mengatur jarak bayangan kiri-kanan diisi dangan lenght(px)
value2 fungsinya untuk mengatur jarak bayangan atas-bawah diisi dengan lenght(px)
value3 fungsinya untuk mengatur keburaman diisi dengan lenght(px)
value4 fungsinya untuk mengatur warna bayangan diisi dengan color atau hex_color

Sebenarnya bisa juga anda menggunakan length em, jadi isiannya bisa 0.5, 1, 1.5, 2 dan seterusnya. Ok gan sekarang contoh penggunaannya. Misalnya menggunakan script seperti di bawah ini.

CONTOH TEXT SHADOW

Contoh bayangan dengan menggunakan 2 Value

CONTOH TEXT SHADOW

Contoh bayangan dengan menggunakan 3 Value

CONTOH TEXT SHADOW

bayangan kanan bawah

CONTOH TEXT SHADOW

CONTOH TEXT SHADOW

bayangan kiri bawah

CONTOH TEXT SHADOW

CONTOH TEXT SHADOW

bayangan kanan atas

CONTOH TEXT SHADOW

CONTOH TEXT SHADOW

bayangan kiri atas

CONTOH TEXT SHADOW

Contoh bayangan dengan menggunakan 4 Value

CONTOH TEXT SHADOW

bayangan kanan bawah

CONTOH TEXT SHADOW

CONTOH TEXT SHADOW

bayangan kiri bawah

CONTOH TEXT SHADOW

CONTOH TEXT SHADOW

bayangan kanan atas

CONTOH TEXT SHADOW

CONTOH TEXT SHADOW

bayangan kiri atas

CONTOH TEXT SHADOW

Anda dapat mengganti warna text dasar dengan menambahkan kode color: kode warna,

misalnya color: #FF0000

CONTOH TEXT SHADOW

Hasilnya menjadi seperti ini

CONTOH TEXT SHADOW

text-shadow:-4px 4px 4px blue; /* biru adalah warna bayangan */
colur:red /* warna text asli sebelum mendapat bayangan */

Ok selamat berkreasi dan sukses selalu

KEEP SPIRITS AND DO THE BEST

Adsense Content. bottom of article

Trick Untuk Blogger