-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, DP... ✍️
🪃 Не знаете какие есть единицы для задания углов или когда и какие применять? 👉 • CSS Units: Deg, Rad, Grad, Turn . ✍️
📏 Абсолютные единицы измерения в CSS? 👉 • Нужны ли они нам? Абсолютные единицы ... . ✍️
📐 Относительные единицы измерения ex, ch, ic, lh 👉 • Зачем они были добавлены? CSS Units: ... ✍️
🔍 Не знаете что выбрать REM или EM 👉 • Вы точно не знаете зачем мы используе... ✍️
💻 Все про viewport, vh, vw, vmin, vmax 👉 • 😏 CSS Viewport Units: vw, vh, vmin, v... ✍️
Watch video -webkit-text-stroke, -webkit-text-fill-color и paint-order их роль в CSS и SVG. Нужны ли они нам? online without registration, duration hours minute second in high quality. This video was added by user Maksym Fariga 27 February 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 142 once and liked it 16 people.