-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. И оно используется для создания различных эффектов шрифта, например, текста с градиентом.

Ссылки на статьи, чтобы почитать что такое маркеры.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/marker-start
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker

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 - https://www.linkedin.com/in/maksymfariga
📷 Instagram - https://www.instagram.com/maksym_fariga/ (@maksym_fariga)
📖 Facebook - https://www.facebook.com/maksymfariga/
🐤 Twitter - https://twitter.com/Fariga_M
🛩 Telegram - https://t.me/web_education_new

🥅 Не знаете, что такое пиксель или почему он не тот, за кого себя выдает? 👉 https://www.youtube.com/watch?v=ZTC9ELoE6uA ✍️
🪃 Не знаете какие есть единицы для задания углов или когда и какие применять? 👉 https://www.youtube.com/watch?v=PYRWoBQbHQg. ✍️
📏 Абсолютные единицы измерения в CSS? 👉 https://www.youtube.com/watch?v=que3a_AZDQU. ✍️
📐 Относительные единицы измерения ex, ch, ic, lh 👉 https://www.youtube.com/watch?v=QgqKxofFSK4 ✍️
🔍 Не знаете что выбрать REM или EM 👉 https://www.youtube.com/watch?v=veHNzolvR5M ✍️
💻 Все про viewport, vh, vw, vmin, vmax 👉 https://www.youtube.com/watch?v=JT4J5hOcfqE ✍️