Teksta trieciens - CSS-triki

Anonim

text-strokeir eksperimentāls rekvizīts, kas nodrošina teksta apdares iespējas, kas ir līdzīgas tām, kas atrodamas Adobe Illustrator vai citās vektoru zīmēšanas lietojumprogrammās. Pašlaik tas nav iekļauts nevienā W3C vai WHATWG specifikācijā. Sākot ar 2013. gada jūniju, tas tiek ieviests tikai aiz -webkitpiegādātāja prefiksa, lai gan nākamās Firefox un Internet Explorer versijas var atbalstīt īpašumu (iespējams, ar saviem prefiksiem).

mark ( -webkit-text-stroke: 2px red; )

text-strokeĪpašums faktiski saīsinājums diviem citiem īpašumiem:

  1. text-stroke-width, kas ņem vienības vērtību (1px, 0.125em, 4in utt.) un apraksta gājiena efekta biezumu.
  2. text-stroke-color, kas ņem krāsu vērtību (hex, rgb / rgba, hsl / hsla utt.).

text-strokeir arī pavadonisks rekvizīts, text-fill-colorkas to ignorēs color, ļaujot pārlūkiem, kas neatbalsta, graciozi atkāpties uz citu teksta krāsu text-stroke.

Pārbaudiet šo pildspalvu!

Apskates vietas

  • Zīmētais zīmējums text-strokeir izlīdzināts ar teksta formas centru (kā tas ir noklusējums programmā Adobe Illustrator), un pašlaik nav iespēju iestatīt izlīdzinājumu formas iekšpusē vai ārpusē. Diemžēl tas padara to daudz mazāk lietojamu, jo neatkarīgi no tā, kāds trieciens tagad traucē burta formai, kas iznīcina oriģinālo dizaineru nodomu. Iestatījums būtu ideāls, bet, ja mums tas būtu jāizvēlas, ārējais trieciens būtu bijis daudz noderīgāks.
  • Webkit text-strokeir animējams ar CSS pārejām un animācijām, taču tikai insulta krāsa, nevis insulta platums.
  • Tiek izmantota vairāk ar pārlūku saderīga (un neapšaubāmi izturīga) text-strokeefekta gaidīšana text-shadow, kas ir aprakstīta šajā CSS-Tricks rakstā.

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
-webkit- -webkit- 21 15+ 10 Sarežģīti -webkit-

Piezīme par pārlūka atbalstu: Iepriekš redzamā tabula ir kopsavilkums par vispārējo pārlūkprogrammas atbalstu text-stroke- patiesība ir daudz sarežģītāka (piemēram, Android atbalstīja īpašumu versijā 2.1-2.3, pēc tam noņema atbalstu 3.0, pirms atjaunoja atbalstu 4.0). . Pilnu pārlūka atbalsta tabulu skatiet vietnē caniuse.com/text-stroke.