text-strokeadalah properti eksperimental yang menyediakan opsi dekorasi teks yang mirip dengan yang ditemukan di Adobe Illustrator atau aplikasi gambar vektor lainnya. Saat ini tidak termasuk dalam spesifikasi W3C atau WHATWG. Mulai Juni 2013, ini hanya diterapkan di belakang -webkitawalan vendor, meskipun versi Firefox dan Internet Explorer yang akan datang mungkin mendukung properti (kemungkinan dengan awalannya sendiri).
mark ( -webkit-text-stroke: 2px red; )The text-strokeproperti sebenarnya singkatan untuk dua properti lainnya:
text-stroke-width, yang mengambil nilai satuan (1px, 0.125em, 4in, dll.) dan menjelaskan ketebalan efek goresan.text-stroke-color, yang mengambil nilai warna (hex, rgb / rgba, hsl / hsla, dan lain-lain).
text-strokejuga memiliki properti pendamping text-fill-color, yang akan menimpa colorproperti, memungkinkan penggantian dengan baik ke warna teks berbeda di browser yang tidak mendukung text-stroke.
Tempat Menarik
- Stroke yang digambar
text-strokesejajar dengan bagian tengah bentuk teks (seperti default di Adobe Illustrator), dan saat ini tidak ada opsi untuk mengatur perataan ke dalam atau luar bentuk. Sayangnya ini membuatnya kurang dapat digunakan, karena tidak peduli apa sekarang goresan tersebut mengganggu bentuk huruf yang menghancurkan maksud desainer tipe asli. Sebuah pengaturan akan ideal, tetapi jika kita harus memilih satu, pukulan luar akan jauh lebih berguna. - di Webkit,
text-strokedapat dianimasikan dengan Transisi dan Animasi CSS - tetapi hanya warna guratan, bukan lebar guratan. - Yang lebih kompatibel dengan browser (dan bisa dibilang kuat) stand-in untuk
text-strokeefek yang digunakantext-shadow, yang diuraikan dalam artikel Trik CSS ini.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | 10 | Rumit | -webkit- |
Catatan tentang dukungan browser: Tabel di atas adalah ringkasan dari keseluruhan dukungan browser untuk text-stroke- kenyataannya jauh lebih rumit (misalnya, Android mendukung properti di versi 2.1-2.3, lalu menghapus dukungan di 3.0, sebelum memulihkan dukungan di 4.0) . Untuk tabel dukungan browser lengkap, kunjungi caniuse.com/text-stroke.