Hello hello, siang sob... dapat Experiment menarik lagi nih :D hehee... kali ini tentang "Stroke Text" udah pernah liat Stroke text? kalau belum liat nih kaya gini nih Stroke text.







Kalau ngga salah Stoke itu adalah Outline (kalo di photoshop).
Stroke Text ternyata hanya menyatukan 4 shadow text, Fungsinya untuk membentuk bayangan di pinggir-pinggir text, sama halnya seperti border yang membuat garis di pinggir objek...
dan oke deh langsung aja cara pembuatannya.

CSS Stoke Text

#stroke{
font-family:arial black;
font-size:50px;
color: white;
text-shadow:
-5px -2px 1px #000,
-3px 3px 1px #000,
4px 3px 1px #000,
3px -3px 1px #000;
}

HTML Stroke Text

<div id='stroke'>STROKE</div>

KLIK DISINI UNTUK DEMO


Eh tapi ada lho yang lebih Rapih, ini fahmi Dapetin dari http://css-tricks.com.
nih liat dulu Gambar example nya...



Langsung saja cara pembuatannya cekidot :

CSS Stroke CSS-Trik

h1 {
font-family:Arial Black;
font-size:60px;
color: black;
text-fill-color: white;
text-stroke-width: 1px;
text-stroke-color: black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
-moz-text-fill-color: white;
-moz-text-stroke-width: 1px;
-moz-text-stroke-color: black;
-o-text-fill-color: white;
-o-text-stroke-width: 1px;
-o-text-stroke-color: black;
}

Atau seperti ini :

Stroke Text with Text-shadow

h1 {
font-family:Arial Black;
font-size:60px;
-webkit-text-stroke: 1px black;
color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,  
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}

KLIK DISINI UNTUK DEMO CSS-Trick

Selesai