А можете прислать пример реализации такого же выреза на clip-path?
И если под рукой завалялась спека или какая-то другая техническая статья про производительность двух методов, буду благодарен, хочу покопать этот вопрос
Посмотрите на скриншот ниже. С внешней тенью отлично справляется. С внутренней — нет.
Но смысл статьи не в этом. Раньше для простых вырезов нужно было делать сложную реализацию, и для сложных вырезов тоже нужно было делать сложную реализацию.
А сейчас для простых вырезов у нас есть простейшее решение в одну строчку. А для сложных вырезов остаются сложные решения, никуда не деться. Но как минимум появляется возможность искать компромисс с дизайнером "упрощаем дизайн и делаем блок за 5 минут" или "оставляем сложный дизайн и убиваем на реализацию день"
Большинство интерактивных учебников программирования плохо сочетаются с мобильными версиями. Дело в том, что никто по-серьёзному на мобилке не программирует. А в таких учебниках самое важное — это набор больших объёмов кода. Это как делать полноценныый вёрд или эксель для мобилок — толку мало
Что называется, не разобравшись делать выводы =) Конечно, CSS-библиотека — звучит солидно и объёмно. Но это по факту небольшой сниппет чистого CSS. Просто с кастомизацией
По поводу scss у меня мысли следующие. Они дают возможность написать генератор, но генератор выдаст статичный код, без возможности изменять что-то в рантайме. А вот использование нативный css-переменных даёт возможнось кастомизации в рантайме. То есть можно менять параметры угла при наведении или при адаптиве.
А я не пишу, что ваше решение мне непонятно. Там всё понятно. Проблема в другом. Это трудоёмкая штука, которая вручную не делается. Подозреваю, что сначала надо в каком-то редакторе нарисовать нужную форму, потом её экспортировать, загнать в генератор клип-пасов и только потом вставлять в стили.
Первый комментарий был как раз ваш про клип-пас. Ну собственно разобрались, что клип-пас — это ваш стандартный инструментарий. Ок, нужная штука. Просто эта библиотека написана не на нём.
И ещё важный момент, который повторю специально. Ваше решение по сути универсальное, но оно не подразумевает удобной кастомизации. Библиотека из статьи очень узкая, зато с удобной кастомизацией
если что-то непонятно вам, то это не значит, что решение плохое или неэффективное. для конечного пользователя всё определяется простотой и скоростью использования.
в случае впуклого угла ты подключаешь стили, накидываешь класс, подбираешь параметры и готово
в целом, вам никто не мешает сделать похожий css-сниппет для вогнутых углов, внутри которого вместо масок и градиентов будет использоваться клип-пас. но главное, подготовить удобные css-переменные ручки для настроек
ну по сути это сниппет css-кода, в который уже вшита кастомизация с помощью css-переменных и calc
я бы напротив сомнительным назвал решение для простой типовой задачи тащить в проект адскую сгенерированную кашу на клип-пасе. банально из-за вопросов дальнейшей поддержки. такой код будет очень сложно кому-то передать на поддержку/модификацию и так далее
если говорить про сложные произвольные формы, то видимо без клип-паса никуда. это статья про решение для конкретного интерфейсного паттерна. вы скорее всего привыкли везде использовать клип-пас, у вас есть для этого инструменты и навыки.
но не все так могут. поэтому им проще подключить уже готовую библитечку
В случае с вырезами пользователи старых браузеров отлично обойдутся и без них
Это камень в огород дизайнеров или тех, кому приходится их задумки реализовывать? =)
А можете прислать пример реализации такого же выреза на clip-path?
И если под рукой завалялась спека или какая-то другая техническая статья про производительность двух методов, буду благодарен, хочу покопать этот вопрос
Ну не у всех же сервисы на миллионы юзеров. Для огромного количества сегментов вайдли авайлаболь и даже ньюли авайлаболь уже достаточно
отличная поддержка, в статье отдельный заголовок под это отведён. widely avaliable уже через пару месяцев будет
Посмотрите на скриншот ниже. С внешней тенью отлично справляется. С внутренней — нет.
Но смысл статьи не в этом. Раньше для простых вырезов нужно было делать сложную реализацию, и для сложных вырезов тоже нужно было делать сложную реализацию.
А сейчас для простых вырезов у нас есть простейшее решение в одну строчку. А для сложных вырезов остаются сложные решения, никуда не деться. Но как минимум появляется возможность искать компромисс с дизайнером "упрощаем дизайн и делаем блок за 5 минут" или "оставляем сложный дизайн и убиваем на реализацию день"
Приятно видеть ценителя вырезов =)
вот быстрый пример. специально сделал красную тень
Внешние тени решаются обёрткой со свойством
filter: drop-shadow(...)Не помню только, поддерживает ли этот фильтр внутренние тениБольшинство интерактивных учебников программирования плохо сочетаются с мобильными версиями. Дело в том, что никто по-серьёзному на мобилке не программирует. А в таких учебниках самое важное — это набор больших объёмов кода. Это как делать полноценныый вёрд или эксель для мобилок — толку мало
всё-таки, он даёт другую форму
не делайте интерактивные элементы с такими вырезами, тогда проблемы не возникнет.
А что если мужик просто сделал фейковую ИИ-фотку и сорвал хайп-куш?
Что называется, не разобравшись делать выводы =)
Конечно, CSS-библиотека — звучит солидно и объёмно. Но это по факту небольшой сниппет чистого CSS. Просто с кастомизацией
Это да, за гибкость расплачиваемся размером.
По поводу scss у меня мысли следующие. Они дают возможность написать генератор, но генератор выдаст статичный код, без возможности изменять что-то в рантайме. А вот использование нативный css-переменных даёт возможнось кастомизации в рантайме. То есть можно менять параметры угла при наведении или при адаптиве.
Вот тут в самом конце показано, как можно адаптивно перемещать вырез в разные углы https://htmlacademy.ru/demos/197
Короче, нативные css-переменные дают дикую гибкость, причём в рантайме
Насчёт кликов не понял. А что с ними за минусы?
А я не пишу, что ваше решение мне непонятно. Там всё понятно. Проблема в другом. Это трудоёмкая штука, которая вручную не делается. Подозреваю, что сначала надо в каком-то редакторе нарисовать нужную форму, потом её экспортировать, загнать в генератор клип-пасов и только потом вставлять в стили.
Первый комментарий был как раз ваш про клип-пас. Ну собственно разобрались, что клип-пас — это ваш стандартный инструментарий. Ок, нужная штука. Просто эта библиотека написана не на нём.
И ещё важный момент, который повторю специально. Ваше решение по сути универсальное, но оно не подразумевает удобной кастомизации. Библиотека из статьи очень узкая, зато с удобной кастомизацией
если что-то непонятно вам, то это не значит, что решение плохое или неэффективное. для конечного пользователя всё определяется простотой и скоростью использования.
в случае впуклого угла ты подключаешь стили, накидываешь класс, подбираешь параметры и готово
в целом, вам никто не мешает сделать похожий css-сниппет для вогнутых углов, внутри которого вместо масок и градиентов будет использоваться клип-пас. но главное, подготовить удобные css-переменные ручки для настроек
статья описывает возможности мини-библиотеки для решения одной конкретной задачи. как вы думаете, заточена ли она под другие задачи =)
ну по сути это сниппет css-кода, в который уже вшита кастомизация с помощью css-переменных и calc
я бы напротив сомнительным назвал решение для простой типовой задачи тащить в проект адскую сгенерированную кашу на клип-пасе. банально из-за вопросов дальнейшей поддержки. такой код будет очень сложно кому-то передать на поддержку/модификацию и так далее
если говорить про сложные произвольные формы, то видимо без клип-паса никуда. это статья про решение для конкретного интерфейсного паттерна. вы скорее всего привыкли везде использовать клип-пас, у вас есть для этого инструменты и навыки.
но не все так могут. поэтому им проще подключить уже готовую библитечку