stop bacanya jika browser anda versi lama(saran firefox v3.5.6+, opera 10+)
berbahagialah anda karena css versi 3 sudah keluar. saya yakin anda sangat suka dengan css. yups css itu sangat mudah dan menyenangkan.
sebenarnya saya sudah pelajarin css3 sejak akhir tahun 2009, hanya saja saat itu browser belum bisa menjalankanya atau browsernya belum support dengan css3. sekarang beberapa property css3 sudah support di beberapa browser, salah satunya adalah text-shadow, coba perhatikan text dibawah!
ini adalah style css3 dengan text-shadow
ini adalah style css3 dengan text-shadow
ini adalah style css3 dengan text-shadow
ini adalah style css3 dengan text-shadow
ini adalah style css3 dengan text-shadow
ini adalah style css3 dengan text-shadow
apa itu text-shadow?
text-shadow adalah salah satu property dalam css3, fungsi dari text-shadow adalah membuat bayangan pada text, contohnya diatas!
aturan penulisan dan value text-shadow
text-shadow memiliki beberapa aturan, diantanya
selector_atau_taghtml:text-shadow:value1(spasi)value2;
selector_atau_taghtml:text-shadow:value1(spasi)value2(spasi)value3;
selector_atau_taghtml:text-shadow:value1(spasi)value2(spasi)value3(spasi)value4(color);
value text-shadow
saya menggunakan length(dalam px)
- value1 fungsinya untuk mengatur jarak bayangan kiri-kanan diisi dangan length(px)
- value2 fungsinya untuk mengatur jarak bayangan atas-bawah diisi dengan length(px)
- value3 fungsinya untuk mengatur keburaman diisi dengan length(px)
- value4 fungsinya untuk mengatur warna bayangan diisi dengan color atau hex_color
contoh text-shadow dalam inline style
text-shadow:value1 value2
contoh code
<p style="padding:15px 0;font-size:40px;text-shadow:4px -4px;">ini adalah style css3 dengan text-shadow</p>
tampilan
ini adalah style css3 dengan text-shadow
text-shadow:value1 value2 value3
contoh code
<p style="padding:15px 0;font-size:40px;text-shadow:4px -4px 5px;">ini adalah style css3 dengan text-shadow</p>
tampilan
ini adalah style css3 dengan text-shadow
text-shadow:value1 value2 value3 value4
contoh code
<p style="padding:15px 0;font-size:40px;text-shadow:4px -4px 6px blue;color:blue;">ini adalah style css3 dengan text-shadow</p>
tampilan
ini adalah style css3 dengan text-shadow
contoh text-shadow dalam internal style
perhatikan markup style dibawah
<html>
<head>
<title>css text-shadow</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
#contoh1{padding:15px 0;font-size:40px;
text-shadow:4px -4px;
}
#contoh2{padding:15px 0;font-size:40px;
text-shadow:4px -4px 5px;
}
#contoh3{padding:15px 0;font-size:40px;color:blue;
text-shadow:4px -4px 6px blue;
}
#contoh4{padding:15px 0;font-size:40px;color:lime;
text-shadow:4px -4px 5px lime;
}
#contoh5{padding:15px 0;font-size:40px;
text-shadow:4px -4px 4px yellow;
}
#contoh6{padding:15px 0;font-size:40px;
text-shadow:2px 2px 2px pink;
}
</style>
</head>
<body>
<p id="contoh1">ini adalah style css3 dengan text-shadow</p>
<p id="contoh2">ini adalah style css3 dengan text-shadow</p>
<p id="contoh3">ini adalah style css3 dengan text-shadow</p>
<p id="contoh4">ini adalah style css3 dengan text-shadow</p>
<p id="contoh5">ini adalah style css3 dengan text-shadow</p>
<p id="contoh6">ini adalah style css3 dengan text-shadow</p>
<div style="clear:both;/**/"></div>
<p style="padding:15px 0;font-size:40px;text-shadow:4px -4px 5px lime;color:lime;">salam <a href="http://www.indaam.com" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>
untuk melihat hasilnya
- copy markup style diatas
- paste ke notepad
- save as (pilih all types) dengan nama contohtext-shadow.htm
- jalankan(double click), atau
- open with (firefox, ie, opera, safari, chrome)
- silakan edit valuenya
- letak valuenya antara : (titik dua) dan ;(titik koma)
- selamat belajar
References
http://www.w3.org/Style/CSS
Sorry, formulir komentar sedang dalam perbaikan