Teksto brūkšnys - CSS-gudrybės

Anonim

text-strokeyra eksperimentinė ypatybė, suteikianti teksto dekoravimo parinktis, panašias į tas, kurios yra „Adobe Illustrator“ ar kitose vektorinių piešimo programose. Šiuo metu jis nėra įtrauktas į jokias W3C ar WHATWG specifikacijas. Nuo 2013 m. Birželio mėn. Jis diegiamas tik už -webkittiekėjo priešdėlio, nors būsimos „Firefox“ ir „Internet Explorer“ versijos gali palaikyti nuosavybę (greičiausiai su savo priešdėliais).

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

text-strokeNuosavybė yra faktiškai sutrumpinta dviem kitus objektus:

  1. text-stroke-width, kuri ima vieneto vertę (1px, 0.125em, 4in ir kt.) ir apibūdina smūgio efekto storį.
  2. text-stroke-color, kuris ima spalvos vertę (šešioliktainis, rgb / rgba, hsl / hsla ir kt.).

text-stroketaip pat turi papildomą ypatybę, text-fill-colorkuri nepaisys colorsavybės, todėl naršyklėse, kurios nepalaiko, gali būti grakščiai pakeista kita teksto spalva text-stroke.

Patikrinkite šį rašiklį!

Lankytinos vietos

  • Braižas, kurį text-strokenubrėžė brūkšnys, yra sulygiuotas su teksto formos centru (kaip tai yra numatytoji programoje „Adobe Illustrator“), ir šiuo metu nėra galimybės nustatyti lygiavimą formos viduje ar išorėje. Deja, dėl to jis yra daug mažiau tinkamas naudoti, nes nesvarbu, koks brūkšnelis dabar trukdo raidės formai, naikinančiai originalaus tipo dizainerių ketinimus. Nustatymas būtų idealus, bet jei mes turėtume pasirinkti vieną, išorinis smūgis būtų buvęs daug naudingesnis.
  • „Webkit“, text-strokeyra animacinis naudojant CSS perėjimus ir animacijas, tačiau tik brūkšnio spalva, o ne pločio juosta.
  • Naudojamas labiau su naršykle suderinamas (ir, be abejo, tvirtas) text-strokeefekto budėjimas text-shadow, kuris aprašytas šiame CSS-Tricks straipsnyje.

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
internetinis rinkinys internetinis rinkinys 21 15+ 10 Komplikuota internetinis rinkinys

Pastaba apie naršyklės palaikymą: aukščiau pateikta lentelė yra bendro naršyklės palaikymo santrauka text-stroke- tiesa yra daug sudėtingesnė (pavyzdžiui, „Android“ palaikė nuosavybę 2.1–2.3 versijose, tada pašalino palaikymą 3.0 versijoje, prieš atkurdama palaikymą 4.0 versijoje). . Norėdami rasti visą naršyklės palaikymo lentelę, apsilankykite caniuse.com/text-stroke.