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