text-strokeeksperimentalno je svojstvo koje pruža mogućnosti ukrašavanja teksta slične onima koje se nalaze u Adobe Illustratoru ili drugim aplikacijama za vektorsko crtanje. Trenutno nije uključen ni u jednu specifikaciju W3C ili WHATWG. Od lipnja 2013. implementiran je samo iza -webkitprefiksa dobavljača, iako buduće verzije Firefoxa i Internet Explorera mogu podržavati svojstvo (vjerojatno pod vlastitim prefiksima).
mark ( -webkit-text-stroke: 2px red; )text-strokeImovina je zapravo skraćenica za druga dva svojstva:
text-stroke-width, koja uzima jediničnu vrijednost (1px, 0,125em, 4in itd.) i opisuje debljinu efekta udara.text-stroke-color, koji uzima vrijednost boje (hex, rgb / rgba, hsl / hsla itd.).
text-stroketakođer ima popratno svojstvo, text-fill-colorkoje će nadjačati colorsvojstvo, omogućujući graciozan povratak na drugu boju teksta u preglednicima koji ne podržavaju text-stroke.
Točke interesa
- Potez iscrtan
text-strokeporavnat je prema sredini oblika teksta (kao što je zadani u Adobe Illustratoru) i trenutno ne postoji mogućnost postavljanja poravnanja na unutarnju ili vanjsku stranu oblika. Nažalost, ovo ga čini mnogo manje korisnim, jer bez obzira na to što sada potez ometa oblik slova uništavajući izvornu namjeru dizajnera. Postavka bi bila idealna, ali da je moramo odabrati, vanjski udarac bio bi puno korisniji. - u
text-strokeWebkitu , animiran je s CSS prijelazima i animacijama - ali samo bojom poteza, a ne širinom poteza. - Koristi se više prilagodljiv preglednik (i vjerojatno robustan) stand-in za
text-strokeučinaktext-shadow, koji je opisan u ovom članku o CSS trikovima.
Podrška preglednika
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | 10 | Komplicirano | -webkit- |
Napomena o podršci preglednika: Gornja tablica sažetak je cjelokupne podrške preglednika text-stroke- istina je puno složenija (na primjer, Android je podržao svojstvo u verzijama 2.1-2.3, a zatim je uklonio podršku u 3.0, prije nego što je vratio podršku u 4.0) . Za potpunu tablicu podrške preglednika posjetite caniuse.com/text-stroke.