[HTML Academy] CSS Маски с нуля | CSS Боль
CSS-маски — мощная и уже зрелая технология, которая в ближайшее время становится Widely Available. В этом выпуске разбираем их с самого нуля и без перегруза теорией. Канал в Телеграме → https://t.me/cssbol В новом выпуске разбираем, что такое маскирование и как оно работает, чем маски похожи на background и как использовать градиенты, PNG и SVG в качестве маски. Рассмотрим принцип «прозрачное под прозрачным, непрозрачное под непрозрачным» и ключевые свойства: mask-image, mask-repeat, mask-size и mask-position. В конце — практический пример: аккуратный fade-out длинного текста без резкой обрезки. Плюс интерактивная демка, с которой можно поиграться самостоятельно. Если работаете с UI, карточками, списками, медиаконтентом — маски пригодятся почти гарантированно. Это первая часть разбора CSS Masking Module Level 1. Дальше — глубже в спецификацию. Таймкоды: - 00:00 — Введение - 00:47 — Что такое маскирование? - 01:32 — Особенности применения масок - 02:44 — Свойства масок в CSS - 04:34 — Эксперименты с источниками масок - 06:11 — Режимы повторения и размеры масок - 07:42 — Расположение масок - 08:46 — Пример использования масок - 10:36 — Заключение Ссылки: - Спецификация → https://www.w3.org/TR/css-masking-1/ - Канал в Телеграме → https://t.me/cssbol Подписывайтесь на канал, чтобы не пропустить новые выпуски CSS Боли! #css #frontend #mask #masking #developer
открыть бот

