-webkit-text-stroke, -webkit-text-fill-color и paint-order их роль в CSS и SVG. Нужны ли они нам?

Как с помощью CSS сделать текст более привлекательным, чтобы он собирал на себе больше внимания пользователя? Есть множество вариантов. И один из них - это -webkit-text-stroke. Который на самом деле состоит из 2-х других свойств -webkit-text-stroke-color и
-webkit-text-stroke-width.
Не так давно по рамкам веба появилось новое свойство paint-order.
Оно позволяет нам контролировать порядок, в котором отрисовываются заливка, обводка и маркеры текста и фигур.
Если мы задаем paint-order: stroke - то сначала будет отрисована обводка, а потом заливка и маркеры.
Задавая paint-order: fill - отрисовывается заливка, а за ней обводка и маркеры.
paint-order: markers - вы можете встретить только в SVG файлах и рассмотрим как это там выглядит и что такое markers.
-webkit-text-fill-color - устанавливает заливку текста цветом. А в чем отличие этого свойства от свойства color?
text-fill-color - имеет приоритет над свойством color. И оно используется для создания различных эффектов шрифта, например, текста с градиентом.
Ссылки на статьи, чтобы почитать что такое маркеры.
developer.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...
0:00 webkit-text-stroke?
1:04 webkit-text-stroke example
1:30 webkit-text-stroke vs text-shadow
2:27 paint-order
4:22 paint-order: markers
5:43 webkit-text-fill-color
6:11 webkit-text-fill-color vs color
6:25 webkit-text-fill-color example
#css #html #web #webdevelopment #frontend #htmlcss #html5 #htmltutorial #htmlelements #css3 #csscourse #csstutorialscool #csstricks #csshovereffect #csshover #csshovereffects
#webdev #cssanimation #csstransition #csstricks #htmlcss3 #fullstack #cssamazing #cssfeatures #csseasy #cssbasic #csslesson #csscourse #cssteach #javascript #vue #react #angular #svelte #vanillajs #js #animation #cssawesome #learncss #course #programming #crash_course #learning
Подписывайтесь на меня в соц. сетях:
👨‍💻 LinkedIn - / maksymfariga
📷 Instagram - / maksym_fariga (@maksym_fariga)
📖 Facebook - / maksymfariga
🐤 Twitter - / fariga_m
🛩 Telegram - t.me/web_education_new
🥅 Не знаете, что такое пиксель или почему он не тот, за кого себя выдает? 👉 • А px, то не настоящий... ✍️
🪃 Не знаете какие есть единицы для задания углов или когда и какие применять? 👉 • CSS Units: Deg, Rad, G... . ✍️
📏 Абсолютные единицы измерения в CSS? 👉 • Нужны ли они нам? Абсо... . ✍️
📐 Относительные единицы измерения ex, ch, ic, lh 👉 • Зачем они были добавле... ✍️
🔍 Не знаете что выбрать REM или EM 👉 • Вы точно не знаете зач... ✍️
💻 Все про viewport, vh, vw, vmin, vmax 👉 • 😏 CSS Viewport Units: ... ✍️