text-strokeje eksperimentalna lastnost, ki ponuja možnosti okrasitve besedila, podobne tistim, ki jih najdemo v Adobe Illustratorju ali drugih aplikacijah za vektorsko risanje. Trenutno ni vključen v nobeno specifikacijo W3C ali WHATWG. Od junija 2013 se izvaja le za -webkitpredpono prodajalca, čeprav lahko prihodnji različici Firefox in Internet Explorer lastnost podpirata (verjetno pod lastnimi predponami).
mark ( -webkit-text-stroke: 2px red; )text-strokeLastnost je dejansko okrajšava za dve drugi lastnosti:
text-stroke-width, ki ima enotno vrednost (1px, 0,125em, 4in itd.) in opisuje debelino udarnega učinka.text-stroke-color, ki ima barvno vrednost (hex, rgb / rgba, hsl / hsla itd.).
text-strokeima tudi spremljevalno lastnost, text-fill-colorki bo preglasila colorlastnost, kar bo v brskalnikih, ki ne podpirajo, omogočilo elegantno vrnitev na drugačno barvo besedila text-stroke.
Zanimivosti
- Poteg, ki ga nariše,
text-strokeje poravnan na sredino oblike besedila (kot je privzeto v programu Adobe Illustrator) in trenutno ni možnosti za nastavitev poravnave na notranjo ali zunanjo stran oblike. Na žalost je zaradi tega veliko manj uporaben, saj ne glede na to, kaj zdaj poteza ovira obliko črke, ki uniči prvotni namen oblikovalcev. Nastavitev bi bila idealna, če pa bi jo morali izbrati, bi bila zunanja poteza veliko bolj uporabna. - v
text-strokeWebkitu je animiran s CSS prehodi in animacijami - vendar le barva poteze, ne pa širina poteze. - Uporablja se bolj združljiv z brskalnikom (in verjetno zanesljiv) vmesnik za
text-strokeučinektext-shadow, ki je opisan v tem članku o trikih CSS.
Podpora za brskalnik
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21. | 15+ | 10. | Zapleteno | -webkit- |
Opomba o podpori brskalnika: Zgornja tabela je povzetek celotne podpore za brskalnik text-stroke- resnica je veliko bolj zapletena (Android je na primer lastnost podprl v različicah 2.1-2.3, nato pa podporo odstranil v 3.0, preden je obnovil podporo v 4.0) . Za celotno tabelo podpore brskalnika obiščite caniuse.com/text-stroke.