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. Custom CSS Per Post
  2. Cara Mengganti Background Theme WordPress
  3. Membuat Text Gradient Dengan CSS
  4. 80 Inspirasi, Design Footer Nan Cantik Dan Unik
  5. Bypass Template Path dan Stylesheet Path
  6. Main Remi Bersama Top Komentator
  7. CSS3, Sonic Mengejar Bola
  8. Membuat Menu Navigasi Dengan CSS3
  9. Cara Membuat Tampilan Postingan Yang Berbeda-beda
  10. Free CSS Button Generator
  1. 9-10-2010 at 19:13 | #1

    It’s the very thing i want to catch. Thanks!,

    Reply

  2. 9-10-2010 at 22:39 | #2

    keren…bisa langsung praktek nih…

    Reply

    alamendah Reply:

    ayo lekas dipraktekin entar lupa

    Reply

    Bang Iwan Reply:

    Ternyata di blogspot bisa juga yah Kang?

    Reply

    Muhammad Faisal Aziz Reply:

    di bagian mana blogspotnya?

    Reply

    Hybrid car Reply:

    enggak bung alam….daya ingatnya josss kok… :D

    Reply

  3. 10-10-2010 at 18:17 | #3

    pengen coba mas, nakasih mas infonya,,,langsung di tes hehehehe

    Reply

  4. 11-10-2010 at 01:07 | #4

    bukan cuma orang yang stroke, teks juga stroke

    Reply

    citromduro Reply:

    saya masih belum paham dengan css
    membedakan kode html, java dan css masih bingung di blogspot

    Reply

    citromduro Reply:

    mantabs mas postingnya untuk pembelajaran

    Reply

    Hybrid car Reply:

    ada-ada saja bung citro…

    Reply

  5. 11-10-2010 at 20:53 | #5

    bagus banget mas efeknya tapi sayang mozilla belum bisa baca…

    Reply

  6. 14-10-2010 at 14:15 | #6

    praktek satu jenis mas
    ijin kopas buat koleksi boleh kan

    Reply

  7. 15-10-2010 at 11:32 | #7

    Untuk yang tulisan arab, pake font arab juga bung alwi ?

    Reply

  8. 18-10-2010 at 00:42 | #8

    It’s the very thing i want to catch. Thanks!,

    Reply

  9. 24-10-2010 at 13:21 | #9

    Sip mas nanti dijajal yak :D

    Reply

  10. 6-5-2011 at 07:51 | #10

    maz, mw tanya, ada tutorial bikin reply comment yg hasil replynya di bawah comment yg di reply ga? saya bkin reply link tp hasil replynya ga di bawah comment yg di reply nih,

    Reply

Comment pages
2+4=? (Wajib diisi)