Cara membuat Text-Shadow | OOM RIO

Saturday, August 13, 2011

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.






Judul: Cara membuat Text-Shadow; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:


1 comments:

Seedbox said...

Enjoyed reading the article above , really explains everything in detail,the article is very interesting and effective.buy facebook likes

Post a Comment

Informasi Pilihan Identitas:
Google/Blogger : Khusus yang punya Account Blogger.
Lainnya : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan).