Cara Membuat Text Shadow

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

<p style="padding:15px 0;font-size:40px;text-shadow:value1 value2 value3 value4;">CONTOH TEXT SHADOW</p>

 maka kodenya akan menjadi seperti ini.

<p style="padding:15px 0;font-size:40px;text-shadow:4px 4px 4px blue">CONTOH TEXT SHADOW</p>

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.

<p style="padding:15px 0;font-size:40px;text-shadow:4px 4px;">CONTOH TEXT SHADOW</p>

Contoh bayangan dengan menggunakan 2 Value

CONTOH TEXT SHADOW

Contoh bayangan dengan menggunakan 3 Value

<p style="padding:15px 0;font-size:40px;text-shadow:4px 4px 4px">CONTOH TEXT SHADOW</p>

bayangan kanan bawah

CONTOH TEXT SHADOW

<p style="padding:15px 0;font-size:40px;text-shadow:-4px 4px 4px">CONTOH TEXT SHADOW</p>

bayangan kiri bawah

CONTOH TEXT SHADOW

<p style="padding:15px 0;font-size:40px;text-shadow:4px -4px 4px">CONTOH TEXT SHADOW</p>

bayangan kanan atas

CONTOH TEXT SHADOW

<p style="padding:15px 0;font-size:40px;text-shadow:-4px -4px 4px">CONTOH TEXT SHADOW</p>

bayangan kiri atas

CONTOH TEXT SHADOW

Contoh bayangan dengan menggunakan 4 Value

<p style="padding:15px 0;font-size:40px;text-shadow:4px 4px 4px blue">CONTOH TEXT SHADOW</p>

bayangan kanan bawah

CONTOH TEXT SHADOW

<p style="padding:15px 0;font-size:40px;text-shadow:-4px 4px 4px blue">CONTOH TEXT SHADOW</p>

bayangan kiri bawah

CONTOH TEXT SHADOW

<p style="padding:15px 0;font-size:40px;text-shadow:4px -4px 4px blue">CONTOH TEXT SHADOW</p>

bayangan kanan atas

CONTOH TEXT SHADOW

<p style="padding:15px 0;font-size:40px;text-shadow:-4px -4px 4px blue">CONTOH TEXT SHADOW</p>

bayangan kiri atas

CONTOH TEXT SHADOW

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

misalnya color: #FF0000

<p style="padding:15px 0;font-size:40px;text-shadow:-4px 4px 4px blue; colur:red">CONTOH TEXT SHADOW</p>

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