Хабр Курсы для фронтендеров
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Поток Фронтенд доступен 24/7 благодаря поддержке друзей Хабра
Комментарии 68
Это конечно, здорово! А как можно сделать так, чтобы при наведении курсора на блок с вырезом у него появлялся бордер синего цвета и плавно переходил в бордер красного цвета?
Если вас дизайнер заставляет делать такое, то искренне сочувствую =)
Вообще, есть задумка, как и такое реализовать, надо будет поиграться. Если получится — покажу
@Ankhena у меня куда-то пропал ваш комментарий. но по сути да, нужна обложка, потом её масштабировать. и затем подгонять маску обложки. про это буду на митапе питерджиес рассказывать на следующей неделе как раз
Почему-то комментарий был отклонён.
Суть в том, что маске псевдика задаем inherit, чтобы не играть в примешивание стилей из библиотеки. Корректируем кастомками размеры скруглений и размеров вырезов. Можно через calc. И абсолютим.
Это может быть я по невнимательности промахнулся. Хабр автору статьи отдаёт на модерацию =)
Ну вот, наверное, что-то такое придётся делать в случае с этой библиотекой. Я то надеялся просто добавить на подложку маску с такими же параметрами, а потом подложку масштабировать трансформ-скейлом. Но чую, что будут проблемы с радиусами. Хотя на достаточно тонких "рамках" должно смотреться нормально
А, понятно ))
Тогда восстановлю с куском кода, вдруг кому пригодится.
&::before {
content: "";
position: absolute;
inset: 10px;
mask: inherit;
background: deeppink;
}Что-нибудь в таком духе. Но потребуется обертка для внутреннего контента. Либо наоборот, делаем внешнюю обертку, ей классы nebo, а внутренней mask: inherit и т.д.
Но суть одна, нужно что-то (другой блок, обертка, псевдик) для второй маски и так, чтобы маленькая маска не обрезала большую.
Вот, кстати, подробная демка, где разбирается следующий шаг — подгонка масок
https://htmlacademy.ru/demos/247
А разве свойств clip-path или mask-image недостаточно?
Однако одна простая библиотека всяко проще, если нужно сделать что-то подобное на скорость.
А библиотека и построена на mask-image
Весь вопрос в том, как сделать удобную кастомизацию с помощью нескольких понятных переменных. Ведь не будешь каждый раз готовить отдельную картинку для маски, когда надо такой типой паттерн реализовать.
clip-path пока не везде достаточно. Нужную форму адаптивно можно сделать только с shape(), которой еще нет в Фоксе и старых Сафарях, а более распространенная path() понимает только фиксированный размер в пикселях.
А еще можно только с polygon который задает точки в процентах и прекрасно адаптируется и работает у меня в фоксе почему-то...
Там внизу попытались сделать аналогичное решение на clip-path
Я его тестирую, но как-то оно не очень работает. Видимо не так прост клип-пас
https://habr.com/ru/articles/987944/comments/#comment_29425270
-
Не думали скруглять углы как Apple?
а как это выглядит?
Называетса квадрокруг, квадратокруг или сквиркл:
Есть же corner-shape
https://habr.com/ru/articles/938886/?ysclid=mkqds7o6px813303863
Для этой штуки есть нативная фича (но достаточно свежая), выше ссылку дали. Плюс что-то такое можно обычным border попытаться имитировать.
Проблема в том, что приём выглядит просто, но нативного способа сделать такой угол в CSS нет.
Интересно как, а clip-path это для вас шутка какая-то?) Всё скрины что вы показали делаются буквально за пару минут.
Ещё и 29 лайков на инструмент который заменяется чтением mdn спеки...
Clip-path умеет скруглять именно полигоны?
У него есть метод polygon
А можете прислать пример кода?
Вот вам пример кода сразу с результатом из документации)) Там не то что закруглить как-то можно, можно все что угодно)
Спасибо за SVG! Особенно, когда речь идёт о том, чтобы избавиться от SVG и добиться лёгкой кастомизации.
Мне почему-то показалось, что вы хотели за пару минут воспроизвести на clip-path такой же впуклый угол, как в статье. А вы случайные примеры присылаете
А за HTML не спасибо? Документацию открыли бы хоть...
Мде, я если честно не знаю что у вас за претензия к svg, но clip-path принимает результат в виде basic-shape, легко может через функцию path и svg формат употребить, если это вам что-то дает...
Отличные минусы в карму, за ваше нежелание почитать документацию))
Я подозреваю потому, что вы написали "Всё скрины что вы показали делаются буквально за пару минут." а в итоге у вас невнятный и не очень релевантный пример из документации
Извините, вы меня путаете с чатомГПТ который по вашему велению выдает код. Все относительно, если документацию почитаете, то пара минут. Если нет, ну нет.
Оно реально и делается за 5 минут.
Кастомизировать можно через переменные/классы и это будет праильно, нативно и без костылей. Человек выше все праавильно написал.
И чтобы не быдь голословным и чтобы отстали от человека выше:) вот тотже шейп, что и в статье (правда абсолютно непонятно, где такую всрат..ю форму можно применить):
clip-path: path( "m14.065 2.4e-4c-7.7921 0-14.065 6.2732-14.065 14.065v27.491c0 7.7921 6.2735 13.997 14.065 14.065l62.031 0.54156c18.869 0.15509-1.4926-18.141 22.957-17.76 19.856 0.3092 19.105-4.2759 19.002-9.8528l0.18552-14.485c0.0998-7.7914-6.2732-14.065-14.065-14.065z" );
Чтобы получить заготовку, можно, например, в Inkscape (бесплатно) отрисовать любую форму или заготовки форм, материлизовать все трансформации и сохранить как "Optimized SVG", затем открываете SVG текстовым редактором и то что в path переносите в cli-path: path( "вот сюда" ), используя CSS-пременные, можно сделать любой конструктор.
Это следование стандартам, лучшая оптимизация и не изобретение своего велосипеда. Читать документацию иногда реально полезно.
Круто, красиво, правда!
Но! Какая-же все-таки дичайшая дичь все эти ваши «дизайнерские» изыски поверх html + css. Оставьте уже в покое версию моего браузера и батарейку. Да, и оперативу теперь тоже оставьте вдвойне.
Иногда кажется, что дизайнеры придумывают интерфейсные паттерны, чтобы поиздеваться над разработчиками. Впуклый угол — один из них.
почему вы называете вогнутый угол впуклым?
звучит выразительнее =) ну и устоявшегося термина нет.
когда делал доклад для фронтендконфа перебирали разные варианты, и этот зашёл больше всех. вот его и в статье решил придерживаться
Почему нет? Я тоже так называю.
Эх молодежь)
Если честно, страшно смотреть. И вот вопрос чем это решение лучше и проще решения на css-градиентах и css-масках?
И вдогонку. Как там сделать кастомизацию, чтобы как в статье можно было одной переменной радиусы скруглений настроить?
Это решение лучше тем, что легко адаптивить, с маской не заадаптивить корректно, тем более не подогнать под разное количество контента, она просто будет сплющиваться. Если используешь переменные, то с clip-path меняются просто значения для определенного радиуса, которые устанавливаются в одну и ту же формулу. Я написал себе скрипт, который вычисляет значения для определенного радиуса, в него просто закидываешь svg. Также же есть онлайн-сервисы для конвертации
То есть для того, чтобы как-то поддерживать и модифицировать это решение нужны специальные скрипты и специальные генераторы? Выглядит очень дорогим, сложным и тяжеловесным. А ещё очень плохо передаваемым другим разработчикам, которым в наследство достанется этот код. Короче, clip-path тоже эту задачу решает, но не быстрее и точно не проще.
Что касается адаптивности, и сплющивания решения на масках. Почему вы так решили? Вы тестировали и не сработало? Покажете примеры скриншотами
Я не покажу сейчас примеры, т.к. я не храню такое по несколько лет, но ты можешь показать свой пример, где все ок с одной и той же маской? По поводу тяжеловесности сомнительно, т.к. скрипт сторонний, да даже онлайн-сервис какой-то, это скрипт не для проекта, а упрощения генерации таких вещей
если говорить про сложные произвольные формы, то видимо без клип-паса никуда. это статья про решение для конкретного интерфейсного паттерна. вы скорее всего привыкли везде использовать клип-пас, у вас есть для этого инструменты и навыки.
но не все так могут. поэтому им проще подключить уже готовую библитечку
Да, я глянул подробнее библиотеку, там решено все с адаптивом, но остаются минусы с кликами, и в целом размер решения больше, чем clip-path. У меня на скрине просто скомпилированный код из scss, на scss формулы с переменными максимально понятны, есть онлайн генератор адаптивных clip-path, загрузил обычный svg, настроил точки визуально, относительно которых высчитывать расстояния, скопировал clip-path и готово
Это да, за гибкость расплачиваемся размером.
По поводу scss у меня мысли следующие. Они дают возможность написать генератор, но генератор выдаст статичный код, без возможности изменять что-то в рантайме. А вот использование нативный css-переменных даёт возможнось кастомизации в рантайме. То есть можно менять параметры угла при наведении или при адаптиве.
Вот тут в самом конце показано, как можно адаптивно перемещать вырез в разные углы https://htmlacademy.ru/demos/197
Короче, нативные css-переменные дают дикую гибкость, причём в рантайме
Насчёт кликов не понял. А что с ними за минусы?
То есть, чтобы использовать маски, тебе нужны для каждого разрешения при адаптиве разные маски, и то, при изменении контента, его количества, все ломается. С помощью clip-path это максимально адптивно, ты просто в процентах указываешь на каком расстоянии от какого угла должен быть вырез, и все, пусть там хоть в 10 раз будет больше контента, ничего не сломается
Вы про css-маски вообще или конкретно про библиотеку из статьи? Она как раз тоже под это заточена
Вообще про css-маски. Тащить ради такого библиотеку сомнительное решение.
ну по сути это сниппет css-кода, в который уже вшита кастомизация с помощью css-переменных и calc
я бы напротив сомнительным назвал решение для простой типовой задачи тащить в проект адскую сгенерированную кашу на клип-пасе. банально из-за вопросов дальнейшей поддержки. такой код будет очень сложно кому-то передать на поддержку/модификацию и так далее
Не согласен, ты видел, что под капотом этого css? Гораздо более непонятная каша. Clip-path в моем примере полностью на формуле основано. Плюс нашел еще минус библиотеки, если нужно кликать по карточке, то клик по пустому пространству проходит, а не должен.
если что-то непонятно вам, то это не значит, что решение плохое или неэффективное. для конечного пользователя всё определяется простотой и скоростью использования.
в случае впуклого угла ты подключаешь стили, накидываешь класс, подбираешь параметры и готово
в целом, вам никто не мешает сделать похожий css-сниппет для вогнутых углов, внутри которого вместо масок и градиентов будет использоваться клип-пас. но главное, подготовить удобные css-переменные ручки для настроек
Я нигде и не говорил, что решение в целом плохое или неэффективное. Кому-то да, это решение эффективное и отличное, кому-то нет. Для меня лично неэффективное и раздувает css/html, а также не предусматривает возможность клика. Если все это неважно кому-то, ради бога) Я изначально лишь показал, как это делается короче, более гибко и конкретно мной за несколько минут. Ну и плюс, если конкретно тебе непонятно мое решение, это не значит, что оно плохое или неэффективное, а именно это ты и пытаешсья с первого комментария мне донести.
А я не пишу, что ваше решение мне непонятно. Там всё понятно. Проблема в другом. Это трудоёмкая штука, которая вручную не делается. Подозреваю, что сначала надо в каком-то редакторе нарисовать нужную форму, потом её экспортировать, загнать в генератор клип-пасов и только потом вставлять в стили.
Первый комментарий был как раз ваш про клип-пас. Ну собственно разобрались, что клип-пас — это ваш стандартный инструментарий. Ок, нужная штука. Просто эта библиотека написана не на нём.
И ещё важный момент, который повторю специально. Ваше решение по сути универсальное, но оно не подразумевает удобной кастомизации. Библиотека из статьи очень узкая, зато с удобной кастомизацией
Ах, ну и да, эта библиотека только для одного кейса, а если вырезы сложнее, и не один? Поможет ли данная библиотека?
Зачем это все если есть clip-path?
Как раз для того чтобы не мучаться c clip-path
Выше отличный пример решения, он даже страшнее чем SVG
Мучаться с clip-path?) Один раз понять и проблем не будет. Можно писать его по разному, человек просто полигон использовал а не rect.
а можно не надо?
https://habr.com/ru/articles/987944/comments/#comment_29427354
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
nebo.css — впуклые углы проще простого