Что называется, не разобравшись делать выводы =) Конечно, CSS-библиотека — звучит солидно и объёмно. Но это по факту небольшой сниппет чистого CSS. Просто с кастомизацией
По поводу scss у меня мысли следующие. Они дают возможность написать генератор, но генератор выдаст статичный код, без возможности изменять что-то в рантайме. А вот использование нативный css-переменных даёт возможнось кастомизации в рантайме. То есть можно менять параметры угла при наведении или при адаптиве.
А я не пишу, что ваше решение мне непонятно. Там всё понятно. Проблема в другом. Это трудоёмкая штука, которая вручную не делается. Подозреваю, что сначала надо в каком-то редакторе нарисовать нужную форму, потом её экспортировать, загнать в генератор клип-пасов и только потом вставлять в стили.
Первый комментарий был как раз ваш про клип-пас. Ну собственно разобрались, что клип-пас — это ваш стандартный инструментарий. Ок, нужная штука. Просто эта библиотека написана не на нём.
И ещё важный момент, который повторю специально. Ваше решение по сути универсальное, но оно не подразумевает удобной кастомизации. Библиотека из статьи очень узкая, зато с удобной кастомизацией
если что-то непонятно вам, то это не значит, что решение плохое или неэффективное. для конечного пользователя всё определяется простотой и скоростью использования.
в случае впуклого угла ты подключаешь стили, накидываешь класс, подбираешь параметры и готово
в целом, вам никто не мешает сделать похожий css-сниппет для вогнутых углов, внутри которого вместо масок и градиентов будет использоваться клип-пас. но главное, подготовить удобные css-переменные ручки для настроек
ну по сути это сниппет css-кода, в который уже вшита кастомизация с помощью css-переменных и calc
я бы напротив сомнительным назвал решение для простой типовой задачи тащить в проект адскую сгенерированную кашу на клип-пасе. банально из-за вопросов дальнейшей поддержки. такой код будет очень сложно кому-то передать на поддержку/модификацию и так далее
если говорить про сложные произвольные формы, то видимо без клип-паса никуда. это статья про решение для конкретного интерфейсного паттерна. вы скорее всего привыкли везде использовать клип-пас, у вас есть для этого инструменты и навыки.
но не все так могут. поэтому им проще подключить уже готовую библитечку
То есть для того, чтобы как-то поддерживать и модифицировать это решение нужны специальные скрипты и специальные генераторы? Выглядит очень дорогим, сложным и тяжеловесным. А ещё очень плохо передаваемым другим разработчикам, которым в наследство достанется этот код. Короче, clip-path тоже эту задачу решает, но не быстрее и точно не проще.
Что касается адаптивности, и сплющивания решения на масках. Почему вы так решили? Вы тестировали и не сработало? Покажете примеры скриншотами
Спасибо! Хоть кто-то заморочился и постарался сделать пример на clip-path.
Но у меня возникла проблема при использовании. Я взял обычную карточку в потоке и применил к ней ваш код. Получилось не так, как в примерах из статьи. Скрины с кодом прикладываю
Спасибо за SVG! Особенно, когда речь идёт о том, чтобы избавиться от SVG и добиться лёгкой кастомизации.
Мне почему-то показалось, что вы хотели за пару минут воспроизвести на clip-path такой же впуклый угол, как в статье. А вы случайные примеры присылаете
всё-таки, он даёт другую форму
не делайте интерактивные элементы с такими вырезами, тогда проблемы не возникнет.
А что если мужик просто сделал фейковую ИИ-фотку и сорвал хайп-куш?
Что называется, не разобравшись делать выводы =)
Конечно, CSS-библиотека — звучит солидно и объёмно. Но это по факту небольшой сниппет чистого CSS. Просто с кастомизацией
Это да, за гибкость расплачиваемся размером.
По поводу scss у меня мысли следующие. Они дают возможность написать генератор, но генератор выдаст статичный код, без возможности изменять что-то в рантайме. А вот использование нативный css-переменных даёт возможнось кастомизации в рантайме. То есть можно менять параметры угла при наведении или при адаптиве.
Вот тут в самом конце показано, как можно адаптивно перемещать вырез в разные углы https://htmlacademy.ru/demos/197
Короче, нативные css-переменные дают дикую гибкость, причём в рантайме
Насчёт кликов не понял. А что с ними за минусы?
А я не пишу, что ваше решение мне непонятно. Там всё понятно. Проблема в другом. Это трудоёмкая штука, которая вручную не делается. Подозреваю, что сначала надо в каком-то редакторе нарисовать нужную форму, потом её экспортировать, загнать в генератор клип-пасов и только потом вставлять в стили.
Первый комментарий был как раз ваш про клип-пас. Ну собственно разобрались, что клип-пас — это ваш стандартный инструментарий. Ок, нужная штука. Просто эта библиотека написана не на нём.
И ещё важный момент, который повторю специально. Ваше решение по сути универсальное, но оно не подразумевает удобной кастомизации. Библиотека из статьи очень узкая, зато с удобной кастомизацией
если что-то непонятно вам, то это не значит, что решение плохое или неэффективное. для конечного пользователя всё определяется простотой и скоростью использования.
в случае впуклого угла ты подключаешь стили, накидываешь класс, подбираешь параметры и готово
в целом, вам никто не мешает сделать похожий css-сниппет для вогнутых углов, внутри которого вместо масок и градиентов будет использоваться клип-пас. но главное, подготовить удобные css-переменные ручки для настроек
статья описывает возможности мини-библиотеки для решения одной конкретной задачи. как вы думаете, заточена ли она под другие задачи =)
ну по сути это сниппет css-кода, в который уже вшита кастомизация с помощью css-переменных и calc
я бы напротив сомнительным назвал решение для простой типовой задачи тащить в проект адскую сгенерированную кашу на клип-пасе. банально из-за вопросов дальнейшей поддержки. такой код будет очень сложно кому-то передать на поддержку/модификацию и так далее
если говорить про сложные произвольные формы, то видимо без клип-паса никуда. это статья про решение для конкретного интерфейсного паттерна. вы скорее всего привыкли везде использовать клип-пас, у вас есть для этого инструменты и навыки.
но не все так могут. поэтому им проще подключить уже готовую библитечку
Вы про css-маски вообще или конкретно про библиотеку из статьи? Она как раз тоже под это заточена
То есть для того, чтобы как-то поддерживать и модифицировать это решение нужны специальные скрипты и специальные генераторы? Выглядит очень дорогим, сложным и тяжеловесным. А ещё очень плохо передаваемым другим разработчикам, которым в наследство достанется этот код. Короче, clip-path тоже эту задачу решает, но не быстрее и точно не проще.
Что касается адаптивности, и сплющивания решения на масках. Почему вы так решили? Вы тестировали и не сработало? Покажете примеры скриншотами
а можно не надо?
https://habr.com/ru/articles/987944/comments/#comment_29427354
Если честно, страшно смотреть. И вот вопрос чем это решение лучше и проще решения на css-градиентах и css-масках?
И вдогонку. Как там сделать кастомизацию, чтобы как в статье можно было одной переменной радиусы скруглений настроить?
Как раз для того чтобы не мучаться c
clip-pathВыше отличный пример решения, он даже страшнее чем SVG
Там внизу попытались сделать аналогичное решение на
clip-pathЯ его тестирую, но как-то оно не очень работает. Видимо не так прост клип-пас
https://habr.com/ru/articles/987944/comments/#comment_29425270
Спасибо! Хоть кто-то заморочился и постарался сделать пример на
clip-path.Но у меня возникла проблема при использовании. Я взял обычную карточку в потоке и применил к ней ваш код. Получилось не так, как в примерах из статьи. Скрины с кодом прикладываю
В англоязычной среде есть два более-менее устоявшихся, в русскоязычной не думаю, что что-то устоялось. Так что можно творить! =)
Спасибо за SVG! Особенно, когда речь идёт о том, чтобы избавиться от SVG и добиться лёгкой кастомизации.
Мне почему-то показалось, что вы хотели за пару минут воспроизвести на clip-path такой же впуклый угол, как в статье. А вы случайные примеры присылаете
Кстати, помучал чатгпт. Он термин "впуклый угол" даже не предлагает =)