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 :
Hal2 teknis kek beginian mah belum mudeng gan…
Nyimak aja..
Reply
Muhammad Faisal Aziz Reply:7-10-2010 at 14:12
Izin Mengamankan Yang pertamaxx
Reply
Bang Iwan Reply:7-10-2010 at 14:39
Izin nyelip pertamaX
Reply
alamendah Reply:7-10-2010 at 15:06
ikutan (Maaf) izin mengamankan PERTAMAX dulu. Boleh, kan?!
Reply
alamendah Reply:7-10-2010 at 15:17
(Maaf) izin mengamankan PERTAMAX dulu. Boleh, kan?! rombongan
Reply
Muhammad Faisal Aziz Reply:8-10-2010 at 13:17
wew pak alam nyemplit disini
Reply
alamendah Reply:10-10-2010 at 00:04
nyemplit lagi biar tambah anget, ah
Reply
Muhammad Faisal Aziz Reply:7-10-2010 at 14:13
Izin Mengamankan yang keduaxx
Reply
Bang Iwan Reply:7-10-2010 at 14:40
Kemudian nyerempet keduaX
Reply
alamendah Reply:7-10-2010 at 15:07
juga (Maaf) izin mengamankan KEDUAX dulu. Boleh, kan?!
Reply
alamendah Reply:7-10-2010 at 15:18
(Maaf) izin mengamankan KEDUAX dulu. Boleh, kan?! rombongan
Reply
Muhammad Faisal Aziz Reply:8-10-2010 at 13:18
rombongan pejwan dateng disini
Reply
Muhammad Faisal Aziz Reply:7-10-2010 at 14:14
Izin Mengamankan Yang Ketigaxx
Reply
Bang Iwan Reply:7-10-2010 at 14:40
lalu nimbrung di ketigax
Reply
alamendah Reply:7-10-2010 at 15:08
ikutan (Maaf) izin mengamankan KETIGAX dulu. Boleh, kan?!
Reply
alamendah Reply:7-10-2010 at 15:18
(Maaf) izin mengamankan KETIGAX dulu. Boleh, kan?! rombongan
Reply
Muhammad Faisal Aziz Reply:8-10-2010 at 13:19
rombongan top komenxnya pada dateng kesini
Reply
alamendah Reply:10-10-2010 at 00:05
ngumpul-ngumpul sambil arisan kale
Reply
Muhammad Faisal Aziz Reply:7-10-2010 at 14:24
Izin Mengamankan yang keempatxx
Reply
Bang Iwan Reply:7-10-2010 at 14:40
sambil nyengghollll di keempatxx
Reply
alamendah Reply:7-10-2010 at 15:09
ikutan (Maaf) izin mengamankan KEEMPAX dulu. Boleh, kan?!
Reply
alamendah Reply:7-10-2010 at 15:18
(Maaf) izin mengamankan KEEMPAX dulu. Boleh, kan?! rombongan
Reply
Muhammad Faisal Aziz Reply:8-10-2010 at 13:19
mari amankan keempatxx nya
Reply
alamendah Reply:10-10-2010 at 00:05
biar makin aman keempatxxnya
Reply
Muhammad Faisal Aziz Reply:7-10-2010 at 14:25
Izin Mengamankan Yang kelimaxx
Reply
Bang Iwan Reply:7-10-2010 at 14:41
langsung cabut di kelimaxx
Reply
alamendah Reply:7-10-2010 at 15:10
ikutan (Maaf) izin mengamankan KELIMAAAX dulu. Boleh, kan?!
Reply
alamendah Reply:7-10-2010 at 15:10
(Maaf) izin mengamankan KELIMAAAX dulu. Boleh, kan?!
bareng-bareng
Reply
alamendah Reply:7-10-2010 at 15:19
rombongan (Maaf) izin mengamankan KELIMAAAX dulu. Boleh, kan?!
Reply
Muhammad Faisal Aziz Reply:8-10-2010 at 13:20
wew langsung rame kelimaxxnya
Reply
Muhammad Faisal Aziz Reply:7-10-2010 at 14:26
Mantapp ilmunya kang alwi
Reply
Bang Iwan Reply:7-10-2010 at 14:41
Kang Alwi memang selalu berbagi hal yang baru
Reply
Bang Iwan Reply:7-10-2010 at 14:41
makasih banyak Kang…
Reply
alamendah Reply:7-10-2010 at 15:10
kang alwi selalu senang berbagi
Reply
Muhammad Faisal Aziz Reply:8-10-2010 at 13:21
Ilmunya langsung CSS,baru lagi :)
Reply
Barcode Printer Reply:8-10-2010 at 23:45
sekarang belajar untuk mudheng kang, kita coba
Reply
Ya…gagal pertamaxxx
Reply
Muhammad Faisal Aziz Reply:7-10-2010 at 14:26
semangat buat shie hoe buat dapetin pertamaxx
Reply
alamendah Reply:7-10-2010 at 15:11
saya juga (Maaf) izin mengamankan PERTAMAX dulu. Boleh, kan?!
hehehehe
Reply
Hybrid car Reply:8-10-2010 at 09:05
Sama ! saya enggak pernah dapat yang pertamaxx…
Reply
Muhammad Faisal Aziz Reply:8-10-2010 at 13:21
nyemplit aja biar dapet
Reply
Barcode Printer Reply:8-10-2010 at 23:46
sekarang belajar untuk mudheng kang, kita coba yuk mariii
Reply
Mampir pagi menyapa disuguhin ilmu baru lagi.
Reply
Hybrid car Reply:7-10-2010 at 08:08
Selamat pagi juga bang iwan…
Reply
Muhammad Faisal Aziz Reply:7-10-2010 at 14:28
Selamat siang Hybrid Car
Reply
alamendah Reply:7-10-2010 at 15:12
selamat siang menjelang sore
Reply
Muhammad Faisal Aziz Reply:7-10-2010 at 14:26
Selamat siang pak iwan
Reply
Bang Iwan Reply:7-10-2010 at 14:33
Selamat siang menjelang sore.
Reply
alamendah Reply:7-10-2010 at 15:12
hampir sore … ….
hehehe
Reply
Barcode Printer Reply:8-10-2010 at 23:46
kan selalu ada yg baru disini, pasti sipp deh
Reply
Ikutan bang udin. nyimak dulu…
Reply
Muhammad Faisal Aziz Reply:7-10-2010 at 14:28
mari simak tret ini *saya gak pake wp sih,kalo di blogger ada?*
Reply
Bang Iwan Reply:7-10-2010 at 14:45
katanya punya blog WP?
Reply
alamendah Reply:7-10-2010 at 15:13
saya punyanya malah wp….
Reply
Hybrid car Reply:8-10-2010 at 09:06
tinggal pake ya kalau di blogger ?
Reply
Muhammad Faisal Aziz Reply:8-10-2010 at 13:22
wp punya,gak keurus.URL nya aja udah lupa
Reply
Bang Iwan Reply:9-10-2010 at 09:24
Wakakakaka… URL koq sampai lupa…
Reply
Bang Iwan Reply:9-10-2010 at 09:25
Jangan-jangan kena amnesia nih?
Reply
alamendah Reply:10-10-2010 at 00:06
untung gak lupa url-nya kang alwi
Reply
merhatiin dulu,
lumayan dapet ilmu…
Reply
Hybrid car Reply:7-10-2010 at 13:49
Selamat siang bung aming… !
Reply
Muhammad Faisal Aziz Reply:7-10-2010 at 14:30
Selamat siang buat hybrid car
Reply
alamendah Reply:10-10-2010 at 00:06
selamat malam kang aming
Reply
Muhammad Faisal Aziz Reply:7-10-2010 at 14:29
Selamat siang buat bang aming
Reply
alamendah Reply:7-10-2010 at 15:13
selamat siang semua………
Reply
Hybrid car Reply:8-10-2010 at 09:07
Selamat siang juga bung Faisal
Reply
Barcode Printer Reply:8-10-2010 at 23:49
dah dapat ilmu gratis lagi enak banget kan
Reply
wah mantep nih
nice share
thanks ya..
Reply
Muhammad Faisal Aziz Reply:7-10-2010 at 14:35
Iya,mantep
Saya jadi tertarik pake wp
Reply
Bang Iwan Reply:7-10-2010 at 14:46
harus coba buat deh…
saya juga baru mencoba di
[http://setiawantara.wordpres.com]
Reply
alamendah Reply:7-10-2010 at 15:14
ayo pada pakai wp ….!!!!
Reply
Walau gak dapet pertamaxx,keduaxx,ketigaxx.Yang penting dapet ilmunya dan dapet pejwan
Reply
Bang Iwan Reply:7-10-2010 at 14:46
Itu yang paling penting…
Reply
alamendah Reply:7-10-2010 at 15:14
makin hari makin tambah ilmu
Reply
alamendah Reply:7-10-2010 at 15:14
makin hari makin tambah pengetahuan
Reply
alamendah Reply:7-10-2010 at 15:15
makin bertambah pintar
Reply
alamendah Reply:7-10-2010 at 15:15
semakin bertambah terampil ….
Reply
Bang Iwan Reply:9-10-2010 at 09:25
Hayo Kang Alam,… mulai lagi nyusul nih.
Reply
alamendah Reply:10-10-2010 at 00:08
sekedar ngikut pelan-pelan dari belakang
Reply
Kudu segera dicoba biar langsung bisa
Reply
Hybrid car Reply:8-10-2010 at 09:08
Langsung melejit bung Alam ? kemana saja kemarin ?
Reply
Muhammad Faisal Aziz Reply:8-10-2010 at 13:25
wew,langsung dapet 5 besar pak alam
Reply
alamendah Reply:10-10-2010 at 00:09
persoalan justru gak kemana-mana, tuh….
Reply
Barcode Printer Reply:8-10-2010 at 23:47
yuk dicoba yuk untuk mempercantik web kita
Reply
Muhammad Faisal Aziz Reply:9-10-2010 at 12:12
mari dicoba,bisa dipake dimana aja ya?
Reply
Kalau enggak pasti langsung lupa
Reply
Barcode Printer Reply:8-10-2010 at 23:47
apalagi kalo sudah kelewat waktu, lupa deh, di bookmark aja
Reply
trick menarik, boleh dicoba
Reply
Barcode Printer Reply:8-10-2010 at 23:49
mari silahkan , tidak pernah rugi untuk mencoba hal positif
Reply