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. CSS3, Sonic Mengejar Bola
  2. Menggulingkan Top Komentator
  3. Membuat Background Pattern Dengan CSS3 Repeat Linear Gradient
  4. Membuat Menu Navigasi Dengan CSS3
  5. Cara Menggabungkan File CSS WordPress
  6. Tips dan Tricks CSS (Cascading Style Sheets)
  7. 80 Inspirasi, Design Footer Nan Cantik Dan Unik
  8. Free CSS Button Generator
  9. Mempercantik Tampilan Code Snippets Dengan CSS
  10. Bypass Template Path dan Stylesheet Path
  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
3+4=? (Wajib diisi)