Потез текста - ЦСС-трикови

Anonim

text-strokeје експериментално својство које пружа могућности украшавања текста сличне онима које се налазе у Адобе Иллустратору или другим апликацијама за векторско цртање. Тренутно није укључен ни у једну спецификацију В3Ц или ВХАТВГ. Од јуна 2013. примењује се само иза -webkitпрефикса добављача, мада будуће верзије Фирефок-а и Интернет Екплорер-а можда подржавају својство (вероватно под властитим префиксима).

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

text-strokeИмовина је заправо скраћеница за два друга својства:

  1. text-stroke-width, која узима јединичну вредност (1пк, 0,125ем, 4ин итд.) и описује дебљину ефекта удара.
  2. text-stroke-color, који узима вредност боје (хек, ргб / ргба, хсл / хсла итд.).

text-strokeтакође има пратеће својство, text-fill-colorкоје ће заменити colorсвојство, омогућавајући грациозан повратак на другу боју текста у прегледачима који не подржавају text-stroke.

Погледајте ову оловку!

Тачке од интереса

  • Потез исцртан text-strokeпоравнат је према средини облика текста (као што је подразумевано у Адобе Иллустратору) и тренутно не постоји опција за подешавање поравнања на унутрашњост или спољашњост облика. Нажалост, ово га чини много мање употребљивим, јер без обзира на то шта сада потез омета облик слова уништавајући првобитну намеру дизајнера. Поставка би била идеална, али да смо морали да је одаберемо, спољни ударац био би много кориснији.
  • у text-strokeВебкит-у је анимиран са ЦСС транзицијама и анимацијама - али само бојом потеза, а не ширином потеза.
  • text-strokeКористи се компатибилнији са претраживачима (и вероватно робусни) станд-ин за ефекат text-shadow, који је описан у овом чланку о ЦСС-триковима.

Подршка прегледача

Хром Сафари Фирефок Опера ИЕ Андроид иОС
-вебкит- -вебкит- 21 15+ 10 Компликован -вебкит-

Напомена о подршци за прегледаче: Горња табела је сажетак целокупне подршке за прегледаче text-stroke- истина је много компликованија (на пример, Андроид је подржао својство у верзијама 2.1-2.3, а затим уклонио подршку у 3.0, пре него што је вратио подршку у 4.0) . Потпуну табелу подршке за прегледач посетите цаниусе.цом/тект-строке.