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. Yesterday, The Beatles
  2. Cara Menggabungkan File CSS WordPress
  3. Source Code Main Remi Bersama Top Komentator
  4. 80 Inspirasi, Design Footer Nan Cantik Dan Unik
  5. Border Style, Border Width, Border Color
  6. Bypass Template Path dan Stylesheet Path
  7. CSS3 Animation, Zoom In Zoom Out, Rotation
  8. CSS3, Sonic Mengejar Bola
  9. Membuat Text Gradient Dengan CSS
  10. Modifikasi Tampilan Halaman Daftar Isi
  1. 7-10-2010 at 05:36 | #1

    Hal2 teknis kek beginian mah belum mudeng gan…

    Nyimak aja..

    Reply

    Muhammad Faisal Aziz Reply:

    Izin Mengamankan Yang pertamaxx

    Reply

    Bang Iwan Reply:

    Izin nyelip pertamaX

    Reply

    alamendah Reply:

    ikutan (Maaf) izin mengamankan PERTAMAX dulu. Boleh, kan?!

    Reply

    alamendah Reply:

    (Maaf) izin mengamankan PERTAMAX dulu. Boleh, kan?! rombongan

    Reply

    Muhammad Faisal Aziz Reply:

    wew pak alam nyemplit disini

    Reply

    alamendah Reply:

    nyemplit lagi biar tambah anget, ah

    Reply

    Muhammad Faisal Aziz Reply:

    Izin Mengamankan yang keduaxx

    Reply

    Bang Iwan Reply:

    Kemudian nyerempet keduaX

    Reply

    alamendah Reply:

    juga (Maaf) izin mengamankan KEDUAX dulu. Boleh, kan?!

    Reply

    alamendah Reply:

    (Maaf) izin mengamankan KEDUAX dulu. Boleh, kan?! rombongan

    Reply

    Muhammad Faisal Aziz Reply:

    rombongan pejwan dateng disini

    Reply

    Muhammad Faisal Aziz Reply:

    Izin Mengamankan Yang Ketigaxx

    Reply

    Bang Iwan Reply:

    lalu nimbrung di ketigax

    Reply

    alamendah Reply:

    ikutan (Maaf) izin mengamankan KETIGAX dulu. Boleh, kan?!

    Reply

    alamendah Reply:

    (Maaf) izin mengamankan KETIGAX dulu. Boleh, kan?! rombongan

    Reply

    Muhammad Faisal Aziz Reply:

    rombongan top komenxnya pada dateng kesini

    Reply

    alamendah Reply:

    ngumpul-ngumpul sambil arisan kale

    Reply

    Muhammad Faisal Aziz Reply:

    Izin Mengamankan yang keempatxx

    Reply

    Bang Iwan Reply:

    sambil nyengghollll di keempatxx

    Reply

    alamendah Reply:

    ikutan (Maaf) izin mengamankan KEEMPAX dulu. Boleh, kan?!

    Reply

    alamendah Reply:

    (Maaf) izin mengamankan KEEMPAX dulu. Boleh, kan?! rombongan

    Reply

    Muhammad Faisal Aziz Reply:

    mari amankan keempatxx nya

    Reply

    alamendah Reply:

    biar makin aman keempatxxnya

    Reply

    Muhammad Faisal Aziz Reply:

    Izin Mengamankan Yang kelimaxx

    Reply

    Bang Iwan Reply:

    langsung cabut di kelimaxx

    Reply

    alamendah Reply:

    ikutan (Maaf) izin mengamankan KELIMAAAX dulu. Boleh, kan?!

    Reply

    alamendah Reply:

    (Maaf) izin mengamankan KELIMAAAX dulu. Boleh, kan?!
    bareng-bareng

    Reply

    alamendah Reply:

    rombongan (Maaf) izin mengamankan KELIMAAAX dulu. Boleh, kan?!

    Reply

    Muhammad Faisal Aziz Reply:

    wew langsung rame kelimaxxnya

    Reply

    Muhammad Faisal Aziz Reply:

    Mantapp ilmunya kang alwi

    Reply

    Bang Iwan Reply:

    Kang Alwi memang selalu berbagi hal yang baru

    Reply

    Bang Iwan Reply:

    makasih banyak Kang…

    Reply

    alamendah Reply:

    kang alwi selalu senang berbagi

    Reply

    Muhammad Faisal Aziz Reply:

    Ilmunya langsung CSS,baru lagi :)

    Reply

    Barcode Printer Reply:

    sekarang belajar untuk mudheng kang, kita coba

    Reply

  2. 7-10-2010 at 05:38 | #2

    Ya…gagal pertamaxxx

    Reply

    Muhammad Faisal Aziz Reply:

    semangat buat shie hoe buat dapetin pertamaxx

    Reply

    alamendah Reply:

    saya juga (Maaf) izin mengamankan PERTAMAX dulu. Boleh, kan?!
    hehehehe

    Reply

    Hybrid car Reply:

    Sama ! saya enggak pernah dapat yang pertamaxx…

    Reply

    Muhammad Faisal Aziz Reply:

    nyemplit aja biar dapet

    Reply

    Barcode Printer Reply:

    sekarang belajar untuk mudheng kang, kita coba yuk mariii

    Reply

  3. 7-10-2010 at 06:18 | #3

    Mampir pagi menyapa disuguhin ilmu baru lagi.

    Reply

    Hybrid car Reply:

    Selamat pagi juga bang iwan…

    Reply

    Muhammad Faisal Aziz Reply:

    Selamat siang Hybrid Car

    Reply

    alamendah Reply:

    selamat siang menjelang sore

    Reply

    Muhammad Faisal Aziz Reply:

    Selamat siang pak iwan

    Reply

    Bang Iwan Reply:

    Selamat siang menjelang sore.

    Reply

    alamendah Reply:

    hampir sore … ….
    hehehe

    Reply

    Barcode Printer Reply:

    kan selalu ada yg baru disini, pasti sipp deh

    Reply

  4. 7-10-2010 at 08:08 | #4

    Ikutan bang udin. nyimak dulu…

    Reply

    Muhammad Faisal Aziz Reply:

    mari simak tret ini *saya gak pake wp sih,kalo di blogger ada?*

    Reply

    Bang Iwan Reply:

    katanya punya blog WP?

    Reply

    alamendah Reply:

    saya punyanya malah wp….

    Reply

    Hybrid car Reply:

    tinggal pake ya kalau di blogger ?

    Reply

    Muhammad Faisal Aziz Reply:

    wp punya,gak keurus.URL nya aja udah lupa

    Reply

    Bang Iwan Reply:

    Wakakakaka… URL koq sampai lupa…

    Reply

    Bang Iwan Reply:

    Jangan-jangan kena amnesia nih?

    Reply

    alamendah Reply:

    untung gak lupa url-nya kang alwi

    Reply

  5. 7-10-2010 at 11:26 | #5

    merhatiin dulu,
    lumayan dapet ilmu…

    Reply

    Hybrid car Reply:

    Selamat siang bung aming… !

    Reply

    Muhammad Faisal Aziz Reply:

    Selamat siang buat hybrid car

    Reply

    alamendah Reply:

    selamat malam kang aming

    Reply

    Muhammad Faisal Aziz Reply:

    Selamat siang buat bang aming

    Reply

    alamendah Reply:

    selamat siang semua………

    Reply

    Hybrid car Reply:

    Selamat siang juga bung Faisal

    Reply

    Barcode Printer Reply:

    dah dapat ilmu gratis lagi enak banget kan

    Reply

  6. 7-10-2010 at 14:05 | #6

    wah mantep nih
    nice share
    thanks ya..

    Reply

    Muhammad Faisal Aziz Reply:

    Iya,mantep
    Saya jadi tertarik pake wp

    Reply

    Bang Iwan Reply:

    harus coba buat deh…
    saya juga baru mencoba di
    [http://setiawantara.wordpres.com]

    Reply

    alamendah Reply:

    ayo pada pakai wp ….!!!!

    Reply

  7. 7-10-2010 at 14:14 | #7

    Walau gak dapet pertamaxx,keduaxx,ketigaxx.Yang penting dapet ilmunya dan dapet pejwan

    Reply

    Bang Iwan Reply:

    Itu yang paling penting…

    Reply

    alamendah Reply:

    makin hari makin tambah ilmu

    Reply

    alamendah Reply:

    makin hari makin tambah pengetahuan

    Reply

    alamendah Reply:

    makin bertambah pintar

    Reply

    alamendah Reply:

    semakin bertambah terampil ….

    Reply

    Bang Iwan Reply:

    Hayo Kang Alam,… mulai lagi nyusul nih.

    Reply

    alamendah Reply:

    sekedar ngikut pelan-pelan dari belakang

    Reply

  8. 7-10-2010 at 15:19 | #8

    Kudu segera dicoba biar langsung bisa

    Reply

    Hybrid car Reply:

    Langsung melejit bung Alam ? kemana saja kemarin ?

    Reply

    Muhammad Faisal Aziz Reply:

    wew,langsung dapet 5 besar pak alam

    Reply

    alamendah Reply:

    persoalan justru gak kemana-mana, tuh….

    Reply

    Barcode Printer Reply:

    yuk dicoba yuk untuk mempercantik web kita

    Reply

    Muhammad Faisal Aziz Reply:

    mari dicoba,bisa dipake dimana aja ya?

    Reply

  9. 7-10-2010 at 15:20 | #9

    Kalau enggak pasti langsung lupa

    Reply

    Barcode Printer Reply:

    apalagi kalo sudah kelewat waktu, lupa deh, di bookmark aja

    Reply

  10. 7-10-2010 at 15:26 | #10

    trick menarik, boleh dicoba

    Reply

    Barcode Printer Reply:

    mari silahkan , tidak pernah rugi untuk mencoba hal positif

    Reply

Comment pages
4+9=? (Wajib diisi)