text-strokeje experimentálna vlastnosť, ktorá poskytuje možnosti dekorácie textu podobné tým, ktoré sa nachádzajú v aplikácii Adobe Illustrator alebo v iných aplikáciách na vektorové kreslenie. Momentálne nie je zahrnutý v žiadnej špecifikácii W3C alebo WHATWG. Od júna 2013 sa implementuje iba za -webkitpredponou dodávateľa, aj keď budúce verzie prehliadačov Firefox a Internet Explorer môžu túto vlastnosť podporovať (pravdepodobne pod svojimi vlastnými predponami).
mark ( -webkit-text-stroke: 2px red; )text-strokeNehnuteľnosť je vlastne skratka pre dve ďalšie vlastnosti:
text-stroke-width, ktorá berie jednotkovú hodnotu (1px, 0,125 em, 4 palce atď.) a popisuje hrúbku efektu ťahu.text-stroke-color, ktorá má farebnú hodnotu (hex, rgb / rgba, hsl / hsla atď.).
text-strokemá tiež sprievodnú vlastnosť, text-fill-colorktorá túto colorvlastnosť prepíše, čo umožní nenápadné prepnutie na inú farbu textu v prehľadávačoch, ktoré nepodporujú text-stroke.
Body záujmu
- Ťah, ktorý nakreslí,
text-strokeje zarovnaný do stredu tvaru textu (ako je predvolené v aplikácii Adobe Illustrator) a momentálne nie je k dispozícii žiadna možnosť nastavenia zarovnania na vnútornú alebo vonkajšiu stranu tvaru. To ho však bohužiaľ robí oveľa menej použiteľným, pretože bez ohľadu na to, čo teraz ťah zasahuje do tvaru písmena, ničí pôvodné zámery dizajnérov. Ideálne by bolo nastavenie, ale ak by sme ho mali zvoliť, vonkajšia rana by bola oveľa užitočnejšia. - vo
text-strokeWebkite je animovateľný s prechodmi a animáciami CSS - ale iba s farbou ťahu, nie so šírkou ťahu. - Využíva sa viac
text-strokeefektu kompatibilného s prehliadačom (a pravdepodobne robustného)text-shadow, ktorý je popísaný v tomto článku o trikoch CSS.
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | 10 | Komplikované | -webkit- |
Poznámka k podpore prehľadávača: V tabuľke vyššie je zhrnutie celkovej podpory prehľadávača text-stroke- pravda je oveľa komplikovanejšia (napríklad Android podporoval túto vlastnosť vo verziách 2.1-2.3, potom odstránil podporu vo verzii 3.0 a potom obnovil podporu vo verzii 4.0). . Úplnú tabuľku podpory prehľadávačov nájdete na stránke caniuse.com/text-stroke.