• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Украшение оттенка с подчеркнутыми ссылками (Использование текста-украшения-цвета и красивого шрифта)
Украшение оттенка с подчеркнутыми ссылками
Kosten
Дата: Четверг, 2020-01-16, 20:49 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25966
Награды: 59


Частью любого веб-дизайна является стилизация ссылок, так, чтоб сделать красивое оформление при наведении клика. Одна из целей станет хороший уровень доступности, где как правило, рекомендуется иметь подчеркивания, потому что это облегчает поиск ссылок. Задействуем стандарты, где не будет каких-либо хитрости CSS, как border или box-shadow, чтобы подчеркнуть стиль.

Есть два свойства CSS, которые вы можете использовать:

1. ext-decoration-color
2. text-decoration-skip

Где при помощи text-decoration-color можно изменить цвет подчеркивания.
А также text-decoration-skip определяет как отображаются подчеркивания.

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

Ниже приведен пример CSS, который вы можете использовать для подчеркивания и очистки другого цвета. Где префикс -webkit требуется для браузера Safari.

Код
a {
  color: #475a8a;
  text-decoration: underline;
  -webkit-text-decoration-color: #9bb7b1;
  text-decoration-color: #9bb7b1;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
}
a:hover {
  -webkit-text-decoration-color: #475a8a;
  text-decoration-color: #475a8a;
}

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

Демонстрация

Если различия в браузере неприемлемы, вы можете использовать box-shadow и text-shadow для создания более согласованного вида. Но имейте в виду, что CSS text-shadow может снизить производительность.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Украшение оттенка с подчеркнутыми ссылками (Использование текста-украшения-цвета и красивого шрифта)
  • Страница 1 из 1
  • 1
Поиск: