CSS Clipping & Masking (свойства clip-path и mask-image)
ฝัง
- เผยแพร่เมื่อ 5 ก.ย. 2024
- В этом обзоре я рассмотрел очередные прогрессивные CSS-технологии (свойства clip-path и mask-image), которые пока поддерживаются далеко не во всех браузерах: CSS Clipping & Masking. Используются для создания векторных обрезок элемента и растровых масок с прозрачностью.
Подробнее на блоге: uwebdesign.ru/c...
Полезные ссылки:
• Clipping in CSS and SVG: wordpress.org/...
• CSS Masking Module Level 1: www.w3.org/TR/c...
• CSS Masking - HTML5 Rocks: www.html5rocks....
• Can I use... CSS clip-path: caniuse.com/#fe...
• Can I use... CSS Masks: caniuse.com/#fe...
Сегодняшняя музыка - Never Say Die Vol. 68. Все права принадлежат не нам.
Мы на твиттере:
• Александр Гончаров: / websanya
• Никита Тарасов: / justelementar
uWebDesign это:
• Сайт: uwebdesign.ru
• Подкаст в iTunes: itunes.apple.c...
• Паблик на ВК: uwebdesign
• Лента в Twitter: / uwebdesgn
• Канал на TH-cam: / uwebdesign
• Страница на Facebook: / uwebdesgn
![ตีสิบเดย์ [FULL] | ตัวตึง! ปากกล้า! ท้ารบ! "ทนายไพศาล เรืองฤทธิ์"](http://i.ytimg.com/vi/pU3dXTsaBVc/mqdefault.jpg)
В каждом видео доставляет заключительное "но... да!". Без сарказма. (;
Как всегда было очень интересно слушать. Спасибо большое!
Тебе спасибо за мнение! =)
Спасибо за видео!Очень интересно вас смотреть, не пропускаю ни одного видео!
Спасибо, продолжим радовать! =)
Спасибо, за видео, помогли в решении задачи. На самом деле иногда дизайнеры выдают такое макеты, что без svg трудно было бы.
Это правда. Хорошо хоть из фигмы легко вытащить СВГ.
Чувак, ты крут!) Ты единственный кто делает обзор креативных свойств по css) Кстати как это у тебя получается так быстро комментарии вставлять и убирать уже с написанного свойства? А то я о таком не слышал))
Адылбек Жороев спасибо! Горячая клавиша Cmd (на винде Ctrl) + / (слеш).
Молодцы ребята все как обычно супер. Каждый ролик смотрю.
P. S. Привет из Армении.
Воу, воу, а у нас на ютюбе новый видос лежит уже, вас дожидается! Называется CSS Clipping & CSS Masking, в котором мы рассказываем как обрезать изображения и другие HTML-элементы с помощью векторных фигур и путей и накладывать растровые маски с прозрачностью. Прямо в браузере.
Ссылка: uwebdesign.ru/css-clipping-masking/
Ссылка на видео: th-cam.com/video/2pra1DLA_aQ/w-d-xo.html
Очень понятно рассказал. Голос крутейший)
Всё разжёвано и по порядку. Классно!
Спасибо!
Очень помогло, спаисбо!
Всегда рады!
Смутно представляю где это применимо, хотя на дворе уже 2019 год. Ощущение, что в современном css 3/4 свойств добавлено по принципу "лишь бы было", а не потому, что реально нужно. Как результат - это приводит лишь к писькомеренью между верстальщиками - "Смотри как я могу, а ты так можешь!?" - нежели добавлению чего-то продуктивного в проекты. В любом случае интересно было послушать.
Ну это да, почти всегда так.
Спасибо за видео, помогло!
А можно плейст с видео? Очень уж понравился
Как обрезать на треугольник изображение
Это кажется, что применить мало, где можно. Когда начинаешь сложную анимацию делать, к примеру, то все инструменты в бой идут и эти будут не исключение.
+Дмитрий «campusboy» Кобяков ну, главное, чтобы браузеры поддерживали.
Саня, для окон используй spectacle, будет сильно удобней размещать все это дело)
а для livereload советую gulp-livereload с watch по необходимым файлам ;))
Zamaraw да у меня коудкит вроде итак там лайврелоадит все. За spectacle - спасибо, посмотрю.
Привет!
Прошу прощения за вопросы не по теме, но:
Подскажи пожалуйста каким редактором пользуешься?
И еще видел что у тебя Dock разбит на группы как это сделать?
Заранее благодарю)
Добавлю еще вопрос не по теме, что у вас за значки в верхнем правом меню баре, чем пишите видео? Спасибл
пацаны вообще ребята!
второй раз получается так что несколько дней курю новую тему, а как сделаю все что мне требуется - выходит ваш ролик c детальным описанием фичи)
Где нибудь есть примерный план выхода роликов с темами?)
Только у меня в голове и в трелло, расшарить не получится, хехе. =)
Очень важно связать положение маски относительно всех положений во всех объектах, во всех девайсах (в любом браузере). Чего оно так скачет, куда это применять, текст только красить, как в примере.
Есть ли точность на данный момент по этому вопросу в видео или информации?
Пробовал пример текста поверх картинки, работает только в firefox, да и то, только если стили прописывать непосредственно в индексе, между тегами style. Через подключенный css файл не работает (префиксы для вебкита писал). Как у вас так получилось, что и в хроме пашет и через файл со стилями ? Хром у меня стоит последний на данный момент.
Валера Жачек какое именно свойство? На какой минуте?
Да я уже разобрался, просто у меня какой то конфликт был между сеткой построенной на флексбоксе и этим свойством, вот и не хотело показывать в хроме. Переделал на новой разметке и стало все ок.
Нет ссылки на примеры с html5rocks.com
Точно, забыл, спасибо! Добавил.
I can not understand Russian language, and I'm craving to understand what you are saying.... Is there something subtitle in English????? :> hehe.....
yes. just turn on the subtitles in TH-cam itself and choose the desired language
работает только на веб-китовских?
Mackay Bravo грубо говоря - да. В описании есть ссылки на Can I Use, там расшифровано.
когда на всех браузерах будет работать?
Это уже не к нам вопрос =)
12:16