Плавный переход в overflow hidden на прозрачном фоне
Задача в том, чтобы overflow:hidden не резко обрезал контент, а был плавный переход, учитывая что фон может быть разного цвета (before, after с line-gradient не прокатит). Как можно реализовать такую идею?
Ответы (1 шт):
Задача в именно вашей постановке нерешаема в принципе. Свойство Overflow задает способ как должно отображаться содержимое элемента когда оно не умещается в его границы. Visible показывает, scroll/auto прокручивает, hidden прячет. Тут вся суть в границе элемента, которая не имеет толщины и, соответственно, не имеет никаких возможностей по управлению отображением. Overflow:hidden - это обрезка контента, она либо есть, либо нет, иначе нельзя, как нельзя быть немножко беременной.
Ну а то, что вам надо реализуется полупрозрачными градиентами. Или псевдоэлементы :before/:after (непонятно, почему не прокатит, директор запретил?), или наложение другого элемента с градиентом, полупрозрачной картинкой или box-shadow.