Подчёркивание или заливка появляются от той точки, где курсор вошёл в элемент, и сворачиваются в сторону, куда он ушёл. Работает на любом элементе Zero-блока — тексте, ссылке, кнопке, фигуре, — цвет задаётся сплошной или градиентом.
Модификация добавляет элементу дополнительный слой, который растёт от точки входа курсора: подчёркивание — по горизонтали, заливка — во все стороны. Когда курсор уходит, слой сворачивается в ту сторону, куда вы его увели. Класс задаётся элементу в настройках Zero-блока, поэтому эффект можно повесить на текст, ссылку, кнопку или фигуру.
Точка входа считается от границ самого элемента и записывается в процентах, а не в пикселях. Это принципиально: на ширинах меньше 1200 Тильда масштабирует элементы Zero-блока через zoom, и пиксели экрана перестают совпадать с внутренними координатами элемента. Ближе десяти пикселей к краю точка округляется до края — иначе эффект стартует «почти от угла» и это читается как рывок.
Заливка кладётся прямо на фигуру и наследует её скругление: у квадратного шейпа она квадратная, у пилюли — со скруглением пилюли, у круга — круглая. Задавать это отдельной настройкой не нужно и нельзя — иначе форма эффекта разошлась бы с формой элемента.
Войдите в аккаунт, чтобы увидеть код и настройки этой модификации
Некодим