Красивые ссылки в Тильде, часть 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 обеспечат красивое затухание цвета при проносе курсора. Если не нужно, удалите эти строки.
Результат с цветами из примеров смотрите на моем сайте:
Спасибо, но как исключить смену цвета на кнопках?
Исключение смены цвета на кнопках
div[data-elem-type=«text»] a:hover {
тут код
}
Исключение смены цвета на кнопках этот код не работает!
div[data-elem-type=«text»] a:hover {
}
Подскажите как это исправить?
Не отвечу сам, никто не ответит))
Вячеслав, код Яны не работает из-за кавычек. Должны быть «кавычки-лапки», вместо «кавычек-ёлочек»
Возможно движок этого сайта автоматически заменил в комменте правильные кавычки — для веб-разметки, на другие правильные кавычки — для чтения.
Очень полезная статья, но что-то непонятно как исключить кнопки из кода. Вообще если фронт тут какой-то появится, напишите в комментаж плз, как этот код:
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;
}
применить к определённому классу. Вот есть у меня блок на сайте, называю я его footer например, и хочу, чтобы вся эта дико няшная история с ховером на ссылках только там применялась. Как это сделать?