Красивые ссылки в Тильде, часть 2

Тильда — любимый мною конструктор сайтов. Всем она хороша, кроме стиля ссылок по-умолчанию: они не подчеркнуты. Поправим это в три простых шага, а бонусом сделаем плавную смену цвета.

(Зачем вообще подчеркивать ссылки? Мнение Лебедева, дискуссия у Бирмана)

1. Задаем цвет текста ссылки

Например, #2599e6. Для этого создадим блок Т193 «Модификатор: стиль ссылок» из раздела блоков «Другое», зайдем в настройки блока и вставим нужный цвет в поле «Цвет текста».

Чтобы блок работал для всего сайта, создайте его на специальной странице «Шапка сайта».

2. Задаем цвет подчеркивания

Например, #b5e1ff. В том же блоке ставим нужный цвет в поле «Цвет линии».

В идеальном мире линия того же цвета, что и ссылка, но полупрозрачная. В Тильде прозрачность линии не поменять, но эффект можно имитировать более светлым тоном и минимальной толщиной (1px в поле «Размер линии»).

3. Задаем цвет текста при наведении

Например, #ba0095. Заходим в «Настройки сайта», переходим в нижний раздел «Еще», нажимаем «Редактировать CSS». Вставляем код и сохраняем:

a, a:visited {
-webkit-transition: 0.5s ease;
transition: 0.5s ease; 
}

a:hover, a:visited:hover {
color: #ba0095 !important;
-webkit-transition: 0s ease;
transition: 0s ease; 
}

Переменные webkit-transition и transition обеспечат красивое затухание цвета при проносе курсора. Если не нужно, удалите эти строки.

Результат с цветами из примеров смотрите на моем сайте:

Подписаться на блог
Поделиться
Отправить
Запинить
 37   3 мес  
Популярное