Home » CSS » Membuat Efek Text Stroke Dengan CSS

Membuat Efek Text Stroke Dengan CSS

7 Oct. 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. Free CSS Button Generator
  2. Cara Mengganti Background Theme WordPress
  3. Tips dan Tricks CSS (Cascading Style Sheets)
  4. Border Style, Border Width, Border Color
  5. 80 Inspirasi, Design Footer Nan Cantik Dan Unik
  6. Source Code Main Remi Bersama Top Komentator
  7. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  8. Main Remi Bersama Top Komentator
  9. Membuat Background Pattern Dengan CSS3 Repeat Linear Gradient
  10. CSS3 Linear Gradient, Fitur Baru Opera 11.11
  1. panama
    21-10-2011 at 02:19 | #1

    Keren mas.. lgs ku praktekan neh..thanks!

    Reply

  2. 25-10-2017 at 19:19 | #2

    Thanks Gan Membantu banget :D

    Reply

Comment pages
1 2 3 42074
2+8=? (Wajib diisi)