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

-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/d... https://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 - https://t.me/web_education_new 🥅 Не знаете, что такое пиксель или почему он не тот, за кого себя выдает? 👉    • А px, то не настоящий! PPI и DPI, DPPX и ...   ✍️ 🪃 Не знаете какие есть единицы для задания углов или когда и какие применять? 👉    • CSS Units: Deg, Rad, Grad, Turn  . ✍️ 📏 Абсолютные единицы измерения в CSS? 👉    • Нужны ли они нам? Абсолютные единицы измер...  . ✍️ 📐 Относительные единицы измерения ex, ch, ic, lh 👉    • Зачем они были добавлены? CSS Units: ex, c...   ✍️ 🔍 Не знаете что выбрать REM или EM 👉    • Вы точно не знаете зачем мы используем REM...   ✍️ 💻 Все про viewport, vh, vw, vmin, vmax 👉    • 😏 CSS Viewport Units: vw, vh, vmin, vmax! ...   ✍️