adsense link 728px X 15px

Monday, April 26, 2010, 

Pada postingan kali ini saya akan mengajak anda untuk membahas tentang penggunaan kode CSS dalam membuat teks bayangan (shadow). Ini adalah pengalaman saya ketika saya masih sering otak-atik wapsite di xtgem.com. Dengan menggunakan teks bayangan, teks yang kita buat terasa lebih unik dan lebih hidup. Sebagai contoh sederhana bisa anda lihat di bawah ini.


TEKS DENGAN SATU BAYANGAN


     Anda dapat membuat teks bayangan seperti contoh di atas dengan kode CSS seperti berikut.

<div style="text-shadow: 4px 3px 2px #3399FF;">TEKS DENGAN SATU BAYANGAN</div>

keterangan:
* 4px adalah jarak kekanan antara teks dengan bayangan.
* 3px adalah jarak kebawah antara teks dengan bayangan.
* 2px adalah tebal teks bayangan.
* #3399FF adalah kode warna untuk teks bayangan.
* silakan ganti teks "TEKS DENGAN SATU BAYANGAN" dengan teks anda.

     Selanjutnya dengan sedikit penambahan penggunaan kode minus (-) pada kode di atas maka akan menghasilkan teks bayangan seperti di bawah ini.

TEKS DENGAN DUA BAYANGAN


     penambahan kodenya seperti ini.

<div style="text-shadow: 4px 3px 2px #3399FF, -4px -3px 2px #FF9933;">TEKS DENGAN DUA BAYANGAN</div>

keterangan:
* 4px adalah jarak kekanan antara teks dengan bayangan.
* 3px adalah jarak kebawah antara teks dengan bayangan.
* 2px adalah tebal teks bayangan yang berada di kanan bawah.
* #3399FF adalah kode warna untuk teks bayangan yang berada di kanan bawah teks.
* -4px adalah jarak kekiri antara teks dengan bayangan.
* -3px adalah jarak keatas antara teks dengan bayangan.
* 2px adalah tebal teks bayangan yang berada di kiri atas.
* #FF9933 adalah kode warna untuk teks bayangan yang berada di kiri atas.
* silakan ganti teks "TEKS DENGAN DUA BAYANGAN" dengan teks anda.

     Kode-kode di atas adalah sebagian kecil dari penggunaan CSS dalam membuat teks bayangan. Selanjutnya bagi anda yang familiar dengan kode CSS, anda dapat berkreasi untuk menghasilkan teks yang lebih unik lagi.







4 Comments:

mansuka life said...  on  May 15, 2010 at 4:24 AM

wah pernah di xtgwm juga ya mas? aku dulu juga sempet buat.. mampir ja mansuka.xtgem.com

Masda said...  on  May 15, 2010 at 5:03 AM

Iya mas, hehe,,, sebenernya saya lebih dulu di blogspot, tapi berhubung saya lum tahu apa-apa tentang kode HTML dkk. Sayapun pindah ke xtgem.com untuk belajar, :D salah satu wap yang jadi guru saya ya cyberbali.jw.lt dari link ke link ketemu blog mas, xixi... Kog malah dongeng... Ok mas segera ke TKP.

Anonymous said...  on  October 17, 2011 at 1:13 AM

tes

tutorial blogger said...  on  September 22, 2017 at 7:34 AM

menarik sekali untuk disamak

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

It's Me

My Photo
Masda
Seorang blogger "KOTA GADIS" yang selalu penasaran dengan sesuatu hal yang baru. Belajar, belajar, dan terus belajar serta berusaha untuk menerapkannya. Karena menurut saya "Ilmu itu untuk diterapkan bukan untuk dipelajari".

Facebook Twitter
View my complete profile

Exchange Link

MasdaZine

Followers