CSS : Text-Shadow

Posted on Aug 21,09
| File Blogs
Tag : css, css3, html

Sebelum korang baca dengan lebeh lanjut aku nak ucapkan selamat menyambut bulan Ramadhan buat umat Islam yang berpuasa, alhamdulillah jumpa lagi Ramadan. Hari ini aku nak buat share berkenaan dengan CSS properties text-shadow (asyik-asyik CSS, haih). Text-shadow ni adalah bayang-bayang text. Hehehe. Okay, serious-serious. Betul la tu bayang-bayang text, ia digunakan dalam CSS untuk generate shadow kepada text kita. Disarankan untuk browser-browser yang latest ajek.

Okay, mula-mula kita create 1 class dulu, bagi nama bayang-text, dan letak properties class tu seperti berikut :

.bayang-text {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 24px;
   font-weight: bold;
   font-style: italic;
   line-height: 30px;
   color: #00aaff;

   text-shadow: 0px 1px 2px #555;
}

Ok, rajah di bawah explain sikit pasal text-shadow properties neh

text-shadow

..kita apply class tu kat span macam kat bawah ni.

hello world

and ini adalah result dia,

hello world

Cantikkan? Aku rasa style ni sangat cantik kalo kita apply kat text-logo(ehem-ehem, cek atas, ehem-ehem) atau headings. Selamat mencuba!

Owh, further reference :

CSS3.info – Text-shadow, Photoshop like effects using CSS
Line25 - Create A Letterpress Effect With CSS Text-Shadow

Author

Ikram Hakimi is front end developer, who shares his love and passion in web standard & optimization, better user experience, and programming. You should follow him on Twitter.

15 responses to this article

xun on August 21, 2009 at 11:44 am ∞

menarik. boleh diletakkan dalam theme yang bakal dikeluarkan nnt. tp, lambat lagi

Reply to this comment
I, Hakimi on August 21, 2009 at 11:53 am ∞

@xun
sila bagi theme tu free kat aku, boleh? hohoho

Reply to this comment
wAnjAk dOnUt on August 21, 2009 at 10:15 pm ∞

adakah ak rabun?…pesal ak xnmpak shadow kat hello world?…yg kat ikramhakimi tu ak nmpak

Reply to this comment
- I, Hakimi on August 22, 2009 at 1:19 am ∞
  
  @wanjak
  sah kene h1n1 ni, bek ko pegi klinik skrg
datin sri on August 22, 2009 at 3:22 am ∞

ade la wanjak kuh!!

Reply to this comment
- I, Hakimi on August 22, 2009 at 3:52 am ∞
  
  @wanjak
  ko pegi klinik skrg, thanks datin
zh on August 22, 2009 at 6:58 pm ∞

dann aku buzz ko di sini pula…;))

beb lawa la header..ekekek

Reply to this comment
- I, Hakimi on August 23, 2009 at 3:59 pm ∞
  
  @miss zh
  kutuk la tuh ek?
fairuzara on August 23, 2009 at 10:54 pm ∞

i jeles ngan blog you. damn.

Reply to this comment
I, Hakimi on August 24, 2009 at 1:10 am ∞

@fairuzara
LOL! thanks bebeh ^____________________^

Reply to this comment
razifmustapha on August 24, 2009 at 8:32 am ∞

ko buat lagi byk tuto pasal CSS ni, bila aku kata buat, ko kena buat ok? lalalallalalallaa……

Reply to this comment
I, Hakimi on August 24, 2009 at 8:50 am ∞

@razifmustapha
menjunjung perintah sifoo ^____________^

Reply to this comment
Saffa on August 29, 2009 at 6:45 am ∞

Tak nak release theme ker? Hehehe

Reply to this comment
- I, Hakimi on August 29, 2009 at 7:27 am ∞
  
  @saffa
  takde masa la cik saffa..
  huhu
E-Jump on April 11, 2010 at 7:32 am ∞

jumpa pon coding text shadow nih, thanks bro!

Reply to this comment

CSS : Text-Shadow

Author

15 responses to this article

Leave a Reply Cancel reply