Cara membuat Text-Shadow

Update lagi cara membuat Text-Shadow. Banyak cara membuat variasi tampilan pada web ataupun blog kita, diantaranya kita bisa memberikan efek shadow pada teks. Penggunaan efek shadow pada teks merupakan salah satu bagian trik yang bagus, selain teks lebih enak dibaca juga agar web ataupun blog tampil lebih menarik dan terkesan lebih elegan. Tapi tentu dalam pemberian efek shadow pada teks juga harus disesuaikan besar kecilnya ukuran font, gelap terangnya efek shadow yang tampil, dan lebar tidaknya efek blur yang muncul. Dan semua itu bisa kita atur nilainya agar teks yang kita buat menggunakan efek ini lebih enak dibaca dan tampil lebih indah.

OK...!!!,  Ada dua cara dalam pembuatan text-shasow :

1. Menggunakan kode html (xhtml)

Kita bisa secara langsung membuat Text Shadow pada area posting, dengan cara    menambah kode html pada area html. Berikut adalah cara penulisan kode HTML :

<h3 style="color: #01022c; font-family: staccato222 BT; font-size: 2em; font-weight: 700; line-height: 1.2em; padding: 3px 10px; text-shadow: 0.1em 0.1em 0.2em rgb(119, 119, 119);">
Tuliskan Teks di sini !!
</h3>

Berikut hasilnya :

Tuliskan Teks di sini !!

2.  Menggunakan kode CSS.

Untuk cara yang ini anda harus menyisipkan kode Css pada Template, tepatnya anda bisa letakkan kode Css sebelum tag </head>.

Berikut contoh teks shadow menggunakan kode Css :

<style type='text/css'>
.teks-shadow {
color: #01022c;
font-family: staccato222 BT;
font-size: 2em;
font-weight: 700;
line-height: 1.2em;
padding: 3px 10px;
text-shadow: 0.1em 0.1em 0.2em rgb(119, 119, 119)
}
</style>

Kemudian untuk menampilkan text shadow kita tinggal menambah kode html pada widget atau area posting ataupun dimana anda akan menempatkan teks shadow sesuai kebutuhan anda.

<div class="teks-shadow">
Teks Shadow disini
</div>

Berikut hasilnya :

Teks Shadow disini

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Related Articles :
Baca artikel lain :
Informasi Artikel :

---

Judul : "Cara membuat Text-Shadow"
Diulas Oleh : Noer Cholis | Sabtu, 13 Agustus 2011 | 13.07
Description : Update lagi cara membuat Text-Shadow. Banyak cara membuat variasi tampilan pada web ataupun bl...
Label : Cara membuat Text-Shadow,css,HTML
Posisi Rich Snippets : Rating: 3.4

Sampai saat ini baru ada : 6komentar

>>> Silahkan tambahkan komentar Anda...

---