Часть 3. Верстаем арт кнопку к макету, разбираем варианты. ReactJS + TypeScript + NextJS

В текущем видео поработаем с кнопками и реализуем их. ❤️🥷

Также telegram и чат:

[whteback]

Давно не заходил на видосы, но новые крутые обложки прям бросаются в глаза. Раньше были попроще, а сейчас прям круто!

[КириллСтольников-ыц]

Давно не видел такой милой внешности, как у вас :3

[mostbest]

Елена, здравствуйте. С удовольствием всегда смотрю ваши видео. Чувствую как с каждым новым просмотром растут мои навыки. Интересно буквально всё. И обучающие видео, и истории из жизни. Пожалуйста, не останавливайтесь! Огромное Вам спасибо.

[the-tata]

Спасибо за новое видео. Двойное спасибо, что они стали выходить так часто(вот что значит отпуск у человека)).
На канал по алгоритмам подписалась - пусть не сейчас, но пригодится точно.

[Влад-мьп]

Какой классный макет, было бы круто когда-нибудь увидеть у вас подобные притягательные работы с использованием технологии three js. В любом случае, спасибо за уроки и интересный контент

[michaelkamko]

Через clip можно делать матовое стекло (глассмоофизм). Через состыкованные svg - нет. Градиентом можно полностью залить блок, не обязательно привязывать к каждой точке.
Состыкованные рамки svg могут бывиваться, если увеличивать и уменьшать страницу в браузере (даже если они пиксель в пиксель).
В clip можно сделать и рамку. Некоторые внутренние координаты рамки могут быть иррациональными (смотря какие углы). Их можно посмотреть через иллюстратор - нарисовать там все рамки и посмотреть координаты точек.
Все эти градиентные бордеры можно сделать

[HeadMad]

Можно сделать с двумя clip-path. Один - рамка (с вырезом внутренней части), второй - такой же по контуру. Он будет подложкой, которая будет исчезать при наведении. Проблема заключается в скошенных углах, если мы хотим сделать адаптивную кнопку, в зависимости от контента. Если в случае левого скошенного угла можно использовать фиксированные единицы измерения, и это спасёт ситуацию, то с правой - так не выйдет, потому что мы не знаем ширину кнопки. Таким образом, при изменении ширины кнопи, наклон косой черты будет меняться и её толщина, соответственно - тоже.
Вариант пофиксить это - составные рамка и подложка. Но при этом добиться градиентного плавного перехода - будет сложно, хотя и возможно.

[ДенисКуликов-мо]

Интересное видео по теме Youtube: Верстать как в 2020, или Трюки на SVG: маски, трансформации и calc

[igoril]

Нужно просто использовать два блока с клип патч. Один вложенный в другой, меньше на ширину рамки. Первый блок весь оптом заливается градиентом

[soinproduction]

Рассмотрите еще вариант border-image-source и положить туда base64 рамки

[druf]

Елена (или знатоки в коментах), во сколько примерно оцениваете стоимость создания такого сайта с версткой по готовому дизайну?)

[ОляГостева-си]

Елена скажите пожалуйста с чего начинать обучение программированию ребёнку?

[ДенисКуликов-мо]

Вы видели обсуждение актуальности использование rem в последнем подкасте Web Standarts. Что думаете по этому поводу?

[АлександрСкиталец-цр]

Я тоже попробовал. Но лучше css clip-path использывать. Очень просто выходит кнопка

[druf]

Что бы устроиться джуном разрабом это нужно уметь делать?

[alexanderlakaev]

Не уловил, в чем сложность с clip path и множеством кусков полигонов.
Разве не достаточно нарисовать один полигон пошире (включающий бордер)
второй поуже (без бордера)
накинуть соответствующий цвет градиента на каждый бекграунд, и тот, что без границы, сделать полупрозрачным ?

[КонстантинХ-уф]

Удачи каналу, про ноду можно, хотя кто ее использует из фронтов...

[АлександрЗверев-гс]

Как у человека только начинающего возникает вопрос- А можно ли учить React не изучая JS, а идти от React к изучению JS?

[qmfvbyz]

можно и бефор и афтер и бекграунд у кнопки делать...

[igormajrov]

Куча видосов по верстке в Youtube. И хоть бы одно было про интеграцию meta для соц сетей и schema.