Неоновая рамка и голограмма карточек в Tilda

Светящаяся рамка помогает выделить карточку под курсором. Голографический перелив даёт другое ощущение: поверхность словно меняет оттенок при движении мыши. Оба приёма могут работать аккуратно, если не мешают читать содержимое.

В конструкторе выбирается один из этих режимов. Разберём, как подобрать силу света, сохранить читаемость фотографий и не обрезать свечение границами блока.

Неоновый режим проявляет обводку при наведении. Градиент вращается, а после ухода курсора рамка скрывается и движение останавливается. Это подходит для акцента вокруг уже оформленной карточки.

Голограмма добавляет радужный блеск и наклон, зависящие от положения мыши. Здесь меняется ощущение всей поверхности, поэтому эффект сильнее влияет на фотографию и текст. Выберите один вариант и сравните его с обычным состоянием. Не устанавливайте второй мод семейства на ту же карточку, чтобы усилить впечатление: лучше сначала настроить один согласованный эффект.

В «Где применять» выберите нужные блоки, затем соберите список карточек. Проверьте, что итоговые селекторы не захватывают другие элементы страницы. Например, подсветка в секции проектов не должна неожиданно появляться у карточек тарифов ниже.

Начните с нескольких обложек разной светлоты. На тёмном изображении свечение будет заметнее, на белом — часть оттенков может почти исчезнуть. Именно поэтому настройки стоит примерять к реальному содержимому, а не только к нейтральной карточке из демонстрации. Убедитесь, что посетитель по-прежнему различает границы и подписи.

Для неоновой рамки настройте три цвета, толщину, свечение и время оборота. Если обводка стала главным содержимым карточки, уменьшите её толщину и силу света. Цвета должны сочетаться не только между собой, но и с фоном секции.

Оставьте достаточно места вокруг карточек. Сильное свечение может визуально объединить соседние элементы или упереться в обрезку родительского блока. Проверьте первый и последний элементы ряда. Не стоит маскировать обрезанный свет ещё более яркой рамкой — сначала разберитесь с размером области и настройками контейнера.

В режиме голограммы подберите яркость, наклон и сдвиг оттенка. Проведите курсором по углам и центру карточки. Текст и важные части изображения должны оставаться понятными во всём диапазоне движения.

Если хочется сохранить блеск без сильной геометрии, уменьшите наклон. Не обязательно доводить каждый параметр до заметного максимума. Проверьте длинную подпись и светлую фотографию: переливы, которые красиво выглядят на пустом фоне, могут закрывать детали настоящего проекта. Сравнивайте эффект с исходной карточкой и оставляйте только то, что помогает её рассмотреть.

Настройте длительность появления и ухода эффекта. Несколько раз быстро перейдите курсором между соседними карточками. Свет и наклон должны возвращаться в нормальное состояние, не оставляя странных слоёв поверх других элементов.

Добавьте код в T123 после блоков и опубликуйте страницу. Нажмите на каждую карточку и проверьте обычный переход. Если включён режим только для мыши, на сенсорном экране останется базовый вид. Он тоже должен ясно показывать, что элемент можно открыть, без неоновой подсказки и дополнительных жестов.

Отойдите от отдельного превью и оцените ряд целиком. Одновременно видимые элементы, яркий фон и соседняя анимация могут сделать эффект намного шумнее, чем в конструкторе.

• Рамка появляется и скрывается в нужный момент.
• Свечение не обрезается у края блока.
• Голограмма не закрывает текст и детали фотографии.
• Карточки сохраняют кликабельность.
• Телефонная версия понятна без наведения.

Если внимание постоянно уходит от работ к переливам, уменьшите яркость или оставьте эффект только в одной секции.

Читайте также: 3D-карточки в Tilda: наклон за курсором и переворот · Анимация скругления карточек в Tilda: меняем форму при наведении.