Mempercantik Teks Dengan Efek Stroke di CSS3

Mempercantik teks dengan menggunakan CSS sebelumnya tidak bisa menggunakan stroke, biasanya stroke itu sering kita temui di photoshop, yaitu untuk memberi garis di sekeliling teks, biasanya ada di blending option kalau di photoshop.

Sekarang dengan CSS3 kita bisa membuat teks yang memiliki stroke, namun sayangnya saat ini baru bisa digunakan di browser webkit seperti Google Chrome dan Safari.

Browser support:

majalahdesain-stroke
Berikut contoh cara membuatnya:

Sintak html yang digunakan cukup h1 dan h2.

</p>
<h1>Majalah</h1>
<h2>Desain</h2>
<p>

Selanjutnya kita percantik tag h1 tersebut dengan css, kita beri dia stroke (garis dipinggiran teks nya)

h1{
  font-size: 150px;
  color: black;
  text-align: center;
    -webkit-text-fill-color: white;
    -webkit-text-stroke: 2px black;
}

h2{
  font-size: 150px;
  color: black;
  text-align: center;
    -webkit-text-fill-color: yellow;
    -webkit-text-stroke: 2px red;
}

-webkit-text-fill-color: white; ini untuk warna teks nya
-webkit-text-stroke: 2px black; ini untuk garis diluar teks nya

Demo

Untuk hasilnya bisa dilihat demonya disini.

Sekian tulisan kali ini, jangan lupa kunjungi majalah desain untuk update terbaru seputar dunia desain

5 Comments

Leave a Comment.