Анимация скругления углов карточек в Tilda
Как задать разные углы в покое и при наведении, сохранив плавный переход.Подробнее о модеСвернуть описание
Анимация скругления углов карточек в Tilda
Как задать разные углы в покое и при наведении, сохранив плавный переход.Что умеет мод
- Меняет скругление выбранной карточки или контейнера при наведении.
- Позволяет задать один радиус для всех углов или четыре отдельных значения.
- Настраивает обычное состояние и состояние наведения независимо.
- Добавляет переход с выбранной длительностью на экранах от 1200 px.
Как подключить
Укажите элемент
Выберите стандартный блок и карточку или контейнер в нём. Проверьте итоговый селектор; значение .t774__wrapper по умолчанию подходит только соответствующей структуре блока.
Задайте форму
Выберите одинаковое скругление либо режим по углам. Укажите радиусы в пикселях для обычного состояния, затем для наведения. Учитывайте размеры самой карточки.
Настройте плавность
Задайте длительность перехода и выберите кривую движения. В превью несколько раз наведите курсор и уберите его, чтобы оценить обе стороны перехода.
Опубликуйте и проверьте
Скопируйте код в T123 после блока. На опубликованной странице проверьте ширину от 1200 px, узкий экран и края вложенных фотографий.
Что учитывать. Мод меняет border-radius выбранного элемента. Вложенная фотография может иметь собственное оформление — проверьте её углы отдельно. Если другой код уже задаёт скругление этому же элементу, согласуйте настройки, чтобы правила не перекрывали друг друга.
Вопросы и ограничения
Можно менять только два угла?
Да. В режиме по углам задайте нужные значения отдельно, а остальные оставьте одинаковыми в обоих состояниях.
Работает ли анимация на мобильном?
Сгенерированные правила действуют при ширине от 1200 px. На более узких экранах остаются исходные стили блока.
Будет ли меняться размер карточки?
Мод меняет скругление углов, а не ширину и высоту. Для увеличения всей карточки есть отдельный конструктор.
Почему фотография остаётся прямоугольной?
Проверьте, как устроена карточка: изображение может быть отдельным элементом со своими углами и обрезкой. Скругление внешнего контейнера не всегда меняет его автоматически.
Доступ к конструктору
Это бесплатная модификация. Войдите в аккаунт, чтобы настроить её и получить код.
