CSS Text Shadow = Text Stroke?

Kamis, 18 Oktober 2012

Stroke text bukan Stroke yang biasa dikenal sebagai istilah penyakit loo ;) ya itu garis disekeliling huruf yang fungsinya hanya untuk memperindah penampilan huruf (jika teman bisa mengaplikasikannya) bagaimana caranya? kita hanya cukup memainkan suatu kode CSS. Memang tidak rumit namun membutuhkan kesabaran, konsentrasi, dan juga logika #lebay XD oke langsung aja yaa ;)

Untuk stroke ini teman dapat memilih diantara kedua kode dibawah, yang pertama menggunakan rumus -webkit- / -o- / -moz- didepan kodenya, yang kedua menggunakan "text shadow" (cara saya) monggoo ;)


-webkit-text-stroke: 1px black;
-moz-text-stroke: 1px black;
-o-text-stroke: 1px black;
text-stroke: 1px black;

Hasilnya akan seperti ini:
Text Stroke Webkit
Rekomendasi untuk font ukuran Besar > 20px


font-size: 14px;
text-shadow: 1px 1px black, -1px -1px black, 1px 0 black, 0 1px black, -1px 0 black, 0 -1px black;
color: white;


Hasilnya akan seperti ini:
Text Shadow Effect
Rekomendasi untuk font ukuran Kecil < 15px

Memang, penggunaan kode diatas itu sangatlah berbeda, namun lebih enak dilihat yang mana? hanya teman sendiri yang dapat menilai dan memakai kode sesuai selera.. ;)