Membuat Efek Text Stroke Dengan CSS
Bagi yang biasa menggunakan Photoshop mungkin sudah tidak asing dengan fungsi stroke pada tampilan text/font. Dengan CSS kita pun bisa menampilkan efek stroke pada text/font yang digunakan. Text-stroke adalah sebuah eksperimen dengan menggunakan CSS property, yakni semacam pemberian efek border atau outline, tapi efek stroke ini hanya berfungsi pada browser atau peramban yang sudah mendukung WebKit seperti Google Chrome dan Safari. Dengan CSS property kita juga bisa menambahkan efek lainnya seperti tampilan font menjadi transparan, efek shadow, dan juga bisa dikombinasikan dengan ::first-letter
dan ::first-line
.
Contoh screenshort font dengan text-stroke :
Untuk menampilkan seperti screenshort di atas kodenya adalah :
<div style="font-family: Arial Black; font-size: 60px;
-webkit-text-stroke: 3px grey; color: blue;">TEKS ANDA DI SINI
</div>
Hasilnya seperti contoh di bawah ini (harus menggunakan peramban dengan fitur WebKit seperti Google Chrome/Safari versi terbaru) :
Text-stroke transparan kodenya adalah :
<div style="font-family: Arial Black; font-size: 40px;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px #217408;">TEKS ANDA DI SINI
</div>
Hasilnya seperti ini :
Text-stroke transparan dan efek shadow/bayangan kodenya seperti ini :
<div style="font-size: 60px; text-shadow: 5px 5px 5px black;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 3px purple;">TEKS ANDA DI SINI
</div>
Hasilnya akan seperti ini :
Contoh text-stroke pada font atau tulisan arab :
gagal pertamax, atas maho :)
Reply
alamendah Reply:10-10-2010 at 00:07
yang penting ikutan berkomentar
Reply
sori gan, cuma bercanda..
Reply
Barcode Printer Reply:8-10-2010 at 23:48
bercanda biar awet muda selalu
Reply
alamendah Reply:10-10-2010 at 00:10
kalau yang bikin awet kaya ada gak?
Reply
bwt, trik diats boleh juga tuk dicoba..
Reply
Barcode Printer Reply:8-10-2010 at 23:50
boleh boleh nggak ada yg larang kok, disini kan semuanya di share lengkap
Reply
alamendah Reply:10-10-2010 at 00:10
bebas dan gratis tentunya …
Reply
hayo, siap disini yg udah nyoba trik diatas?
Reply
Hybrid car Reply:8-10-2010 at 09:10
Aku belum sob Naruto…. :D
Reply
alamendah Reply:10-10-2010 at 00:10
saya juga belum nyobain
Reply
ntar q boleh liat gak?
Reply
Barcode Printer Reply:8-10-2010 at 23:48
boleh lah silahkan, monggo dilihat
Reply
alamendah Reply:10-10-2010 at 00:11
ngelihatnya pakai lirikan gak?
Reply
cuma webkit ya? untuk gecko nya ga ada ya, Kang?
Reply
Alwi Reply:8-10-2010 at 12:28
geckonya belum ada kayaknnya …. saya coba2 dg beberapa cara tetap gak muncul ….
Reply
Muhammad Faisal Aziz Reply:8-10-2010 at 13:16
kayaknya gak ada deh.Tanyain aja ke mas alwinya
Reply
alamendah Reply:9-10-2010 at 23:59
ayo lekas tanya….. !!!.
Reply
alamendah Reply:9-10-2010 at 23:59
malu bertanya sesat di jalan
Reply
alamendah Reply:10-10-2010 at 00:00
banyak bertanya ngerepotin….
Reply
dapet juga keduaxx di pejtu ini
Reply
alamendah Reply:10-10-2010 at 00:00
ikutan dapet keduax di page yang ini
Reply
Ini bisa dipake dimana aja?
Reply
Bang Iwan Reply:9-10-2010 at 09:23
Bisa dipake untuk memperindah postingan tentunya.
Reply
Muhammad Faisal Aziz Reply:9-10-2010 at 12:13
di blogger,wp,atau apa?
Reply
alamendah Reply:10-10-2010 at 00:01
makin indah tentunya makin menarik
Reply
alamendah Reply:10-10-2010 at 00:02
makin indah, endah suka
Reply
Bang Iwan Reply:10-10-2010 at 13:41
Aku coba di blogspot kemarin ternyata bisa…
Reply
Muhammad Faisal Aziz Reply:10-10-2010 at 15:45
oh,berarti bisa ya.Kalo dijadiin bagian template bisa gak?
Reply
di Firefox & Opera nggak kelihatan stroke-nya Mas, yang kelihatan cuma shadow saja. :P
Reply
Alwi Reply:9-10-2010 at 10:51
Seperti yg saya tulis di postingan, fungsi stroke hanya bisa tampil di Google Chrome/Safari yg sudah support WebKit, FF dan Opera blm support kayaknya
Reply
Muhammad Faisal Aziz Reply:9-10-2010 at 12:13
wew..berarti saya harus download chrome ya
Reply
alamendah Reply:10-10-2010 at 00:02
saya pakainya malah hanya MF
Reply
keren sekali nih tips nya , pelajari ahhh
Reply
Bang Iwan Reply:9-10-2010 at 09:22
Hayo sama2 pelajari…
Reply
Bang Iwan Reply:9-10-2010 at 09:23
Sekalian coba-coba praktek dalam postingan
Reply
Muhammad Faisal Aziz Reply:9-10-2010 at 12:14
tapi di kompi saya gak akan keliatan *gak pake chrome sih*
Reply
alamendah Reply:10-10-2010 at 00:02
saya juga gak pakai GC
Reply