Home » CSS » Membuat Efek Text Stroke Dengan CSS

Membuat Efek Text Stroke Dengan CSS

7 Okt. 2010146 comments
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 :

Text Stroke Property

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) :

CONTOH STROKE

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 :

TRANSPARENT STROKE

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 :

Transparent stroke

dan shadow

Contoh text-stroke pada font atau tulisan arab :

بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ
Mudah-mudahan artikel tentang Membuat Efek Text Stroke Dengan CSS ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Cara Mencegah Copy Paste Dengan CSS
  2. Membuat Background Pattern Dengan CSS3 Repeat Linear Gradient
  3. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  4. Cara Mengganti Background Theme WordPress
  5. Border Style, Border Width, Border Color
  6. Tips dan Tricks CSS (Cascading Style Sheets)
  7. CSS3 Animation, Zoom In Zoom Out, Rotation
  8. Menggulingkan Top Komentator
  9. Cara Menggabungkan File CSS WordPress
  10. CSS3 Linear Gradient, Fitur Baru Opera 11.11
  1. 8-10-2010 at 01:58 | #1

    gagal pertamax, atas maho :)

    Reply

    alamendah Reply:

    yang penting ikutan berkomentar

    Reply

  2. 8-10-2010 at 01:58 | #2

    sori gan, cuma bercanda..

    Reply

    Barcode Printer Reply:

    bercanda biar awet muda selalu

    Reply

    alamendah Reply:

    kalau yang bikin awet kaya ada gak?

    Reply

  3. 8-10-2010 at 01:58 | #3

    bwt, trik diats boleh juga tuk dicoba..

    Reply

    Barcode Printer Reply:

    boleh boleh nggak ada yg larang kok, disini kan semuanya di share lengkap

    Reply

    alamendah Reply:

    bebas dan gratis tentunya …

    Reply

  4. 8-10-2010 at 01:59 | #4

    hayo, siap disini yg udah nyoba trik diatas?

    Reply

    Hybrid car Reply:

    Aku belum sob Naruto…. :D

    Reply

    alamendah Reply:

    saya juga belum nyobain

    Reply

  5. 8-10-2010 at 01:59 | #5

    ntar q boleh liat gak?

    Reply

    Barcode Printer Reply:

    boleh lah silahkan, monggo dilihat

    Reply

    alamendah Reply:

    ngelihatnya pakai lirikan gak?

    Reply

  6. 8-10-2010 at 11:15 | #6

    cuma webkit ya? untuk gecko nya ga ada ya, Kang?

    Reply

    Alwi Reply:

    geckonya belum ada kayaknnya …. saya coba2 dg beberapa cara tetap gak muncul ….

    Reply

    Muhammad Faisal Aziz Reply:

    kayaknya gak ada deh.Tanyain aja ke mas alwinya

    Reply

    alamendah Reply:

    ayo lekas tanya….. !!!.

    Reply

    alamendah Reply:

    malu bertanya sesat di jalan

    Reply

    alamendah Reply:

    banyak bertanya ngerepotin….

    Reply

  7. 8-10-2010 at 13:16 | #7

    dapet juga keduaxx di pejtu ini

    Reply

    alamendah Reply:

    ikutan dapet keduax di page yang ini

    Reply

  8. 8-10-2010 at 13:18 | #8

    Ini bisa dipake dimana aja?

    Reply

    Bang Iwan Reply:

    Bisa dipake untuk memperindah postingan tentunya.

    Reply

    Muhammad Faisal Aziz Reply:

    di blogger,wp,atau apa?

    Reply

    alamendah Reply:

    makin indah tentunya makin menarik

    Reply

    alamendah Reply:

    makin indah, endah suka

    Reply

    Bang Iwan Reply:

    Aku coba di blogspot kemarin ternyata bisa…

    Reply

    Muhammad Faisal Aziz Reply:

    oh,berarti bisa ya.Kalo dijadiin bagian template bisa gak?

    Reply

  9. 8-10-2010 at 21:37 | #9

    di Firefox & Opera nggak kelihatan stroke-nya Mas, yang kelihatan cuma shadow saja. :P

    Reply

    Alwi Reply:

    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:

    wew..berarti saya harus download chrome ya

    Reply

    alamendah Reply:

    saya pakainya malah hanya MF

    Reply

  10. 8-10-2010 at 23:45 | #10

    keren sekali nih tips nya , pelajari ahhh

    Reply

    Bang Iwan Reply:

    Hayo sama2 pelajari…

    Reply

    Bang Iwan Reply:

    Sekalian coba-coba praktek dalam postingan

    Reply

    Muhammad Faisal Aziz Reply:

    tapi di kompi saya gak akan keliatan *gak pake chrome sih*

    Reply

    alamendah Reply:

    saya juga gak pakai GC

    Reply

Comment pages
1+6=? (Wajib diisi)