mazudi.com   retroactive 

Tujuan code css ini adalah untuk memaparkan text dengan lebih berkesan. Sebelum ini text shadow hanya boleh dipaparkan dengan menggunakan imej. Penggunaan text yang dipaparkan dalam bentuk imej memberi masalah untuk enjin carian mengindex kandungan web. Selain dari itu imej juga lebih berat untuk dipaparkan berbanding sebaris text.

Browser Compatibility

Berikut adalah senarai browser yang support dan tak support text-shadow

Browser	Compatibility
Safari 3.1 (Mac/Win)	Ya, tanpa multi shadow
Safari 4 (Mac/Win)	Ya
Opera 9.5 (Mac/Win/Lin)	Ya
Firefox 2/3 (Mac/Win/Lin)	Tidak
Firefox 3.1/3.5 (Mac/Win/Lin)	Ya
Google Chrome 1 (Win)	Tidak
Google Chrome 2 (Win)	Ya
IE 7/8 (Win)	Tidak
Shiira (Mac)	Ya, tanpa multi shadow
Konqueror (Lin/Mac/Win)	Ya
iCab (Mac)	Ya, tanpa multi shadow
Epiphany (Lin)	Ya
Safari on iPhone	Ya, tanpa multi shadow
Nokia Symbian-Smartphones (Series 60)	Ya
Opera Mini 4.1	Ya, tanpa sudut yang blur

Ya. IE memang tak akan support text-shadow. Even IE9.0 pun tak support text-shadow. Mereka ada DXImageTransform.Microsoft.Shadow-stuff untuk cater text-shadow. Tak payah peduli lah dengan IE.

Kaedah Penggunaan

Bila define kat css style sheet, property syntax dia adalah seperti kat bawah:

p { text-shadow: 1px 1px 1px #000; }

• Nilai pertama adalah jarak bayang dalam arah melintang
• Nilai kedua adalah jarak bayang dalam arah menegak
• Nilai ketiga adalah sudut blur dalam arah menegak
• Nilai ke empat adalah warna shadow

Nilai sudut blur adalah pilihan, kalau tak letak pun takper tapi dia akan bagi nilai default iaitu 0px.

Contoh Penggunaan

*Aku cuma test entry ni dengan FF3.5.5, kalian akan nampak style yang aku paparkan, kalau tak nampak, haha.. cari browser yang compatible.
1. Text hitam di atas background putih dengan bayangan lembut.

color: #000;
background: #fff;
text-shadow: 2px 2px 3px #000;

Text hitam di atas background putih dengan bayangan lembut.

2. Funky text dengan warna yang lebih menyerlah

color: #33cc33;
background: #fff;
text-shadow: 2px 2px 2px #ff3300;

Funky text dengan warna yang lebih menyerlah

3. Gaya Apple (Text terukir pada logam)

color: #000;
background: #666;
text-shadow: 0px 1px 1px #fff;

Gaya Apple (Text terukir pada logam)

4. Text bergemerlapan

color: #fff;
background: #000;
text-shadow: 1px 1px 6px #fff;

Text bergemerlapan

5. Kepelbagaian bayangan

color: #000;
background: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

Kepelbagaian bayangan

Happy coding!

css text-shadow, css tutorial, laman web bahasa melayu, nota pembangunan laman web, pembangunan laman web, pembangunan laman web bahasa malaysia, proses pembangunan laman web, text shadow css, text shadow css3, text shadow html, text shadow ie, text-shadow, tutorial laman web bahasa melayu.