Хабр Курсы для фронтендеров
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Поток Фронтенд доступен 24/7 благодаря поддержке друзей Хабра
Комментарии 25
Вот бы еще был способ делать такие сложные закругления при которых корректно отрабатывали внешние и внутренние тени для блоков
Внешние тени решаются обёрткой со свойством filter: drop-shadow(...) Не помню только, поддерживает ли этот фильтр внутренние тени
В том то и дело, что это свойство работает с реальным контуром элемента, и сложные зкаругления, вроде того, что есть в статье он будет бесполезен. В таких случаях обычно приходится играться с псевдоэлементами и масками, ну либо использовать магией svg, что бы совсем уж без заморочек
Посмотрите на скриншот ниже. С внешней тенью отлично справляется. С внутренней — нет.
Но смысл статьи не в этом. Раньше для простых вырезов нужно было делать сложную реализацию, и для сложных вырезов тоже нужно было делать сложную реализацию.
А сейчас для простых вырезов у нас есть простейшее решение в одну строчку. А для сложных вырезов остаются сложные решения, никуда не деться. Но как минимум появляется возможность искать компромисс с дизайнером "упрощаем дизайн и делаем блок за 5 минут" или "оставляем сложный дизайн и убиваем на реализацию день"
вот быстрый пример. специально сделал красную тень
Тьфу. Прочитал заголовок, подумал, что речь про декольте, заинтересовался. А оказался CSS какой-то.
Огонь, даже не подозревал что так можно. А что с поддержкой браузеров, в статье не уточнили?
отличная поддержка, в статье отдельный заголовок под это отведён. widely avaliable уже через пару месяцев будет
Только чтобы нормально пользоваться – надо не "Wildely available", а чтобы "даже у последнего владельца нокии 3310" правильно отображалось.
Т.е. придётся всю кухню со сложным методом всё равно делать и включать для легаси браузеров. Ну или просто отключить на них вырез (в душе не понимаю, правда, почему не сделать то же самое для всех платформ: мне, как посетителю сайта, он нафиг не нужен).
:-) Да уж.... Вот такие "вырезы" современный веб и "тормозят"....
Такие вырезы лучше делать через clip-path, а не через маски с градиентами. Уверен, это на порядки производительнее чем маски с градиентами.
А можете прислать пример реализации такого же выреза на clip-path?
И если под рукой завалялась спека или какая-то другая техническая статья про производительность двух методов, буду благодарен, хочу покопать этот вопрос
https://codesandbox.io/p/sandbox/s6wlgy
Вот накидал варианты c clip-path с svg (потому что просто через path не масштабируется) и вариант через shape (с последним пока нет поддержки в firefox). Кривоватенько, но суть понятна.
По производительности тесты не проводил, думаю это будет хорошей основой для новой статьи.
Спасибо, поигрался с вашими вариантами. Честно говоря, убедился что для таких простых задач маски намного лучше, чем clip-path
С точки зрения поддержки вариант с SVG сопоставим с масками. Но он требует тащить в проект отдельное свг-изображение. Само это изображение надо предварительно где-то отрисовать. И вот вопрос — а зачем мне тащить в реализацию свг, если я справляюсь одним свойством без SVG
Вариант на shape плохо поддерживается, синтаксис намного сложнее, да и форма выреза получилась не круглой, а какой-то овальной.
Единственный аргумент за усложнение своей жизни с clip-path — это производительность. Но у меня огромные сомнения, что маски по производительности отличаются от клип-пасов. Может быть есть ссылки на статьи, где этот вопрос разбирается? Я где-то слышал (но сам не проверял), что маски рендерятся на GPU, и если это так, то с производительностью там должно быть всё отлично.
В перчую очередь пришла на ум маска, но я знал, что она работает с картинками, про градиенты не задумывался. Подумал было, что речь пойдёт про какое-то новое свойство, типа corder-shape. Но тоже пригодится. Хорошо, что мне обычно таких вещей верстать не приходится.
К слову, в варианте с тремя блоками я бы сделал не дивы сверху и снизу, а after и before.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Революция вырезов