Ложное подчеркивание с помощью border-bottom

Многие дизайнеры заметили, что подчеркивание является немного толстоватым и пересекает нижние выносные элементы строчных букв - то есть линия проходит через нижнюю часть букв g, j, p, q и y. Это показано на рис. 32.15:

Рис. 32.15.

Рисунок 25:Подчеркивание пересекает выносные элементы строчных букв.

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

Рис. 32.26. Использование границы вместо подчеркивания создает более аккуратный результат

Прежде всего, отключаем подчеркивание всех состояний ссылок, а затем задаем border-bottom в соответствии с цветом ссылки для каждого состояния:

В результате будет получено что-то похожее на рис. 32.27:

Рис. 32.27. Ложное подчеркивание в действии

При использовании метода ложной границы необходимо следить за тем, чтобы было задано достаточно большое значение line-height, чтобы избежать наложения подчеркивания на следующую строку текста.

Оформление, которое не полагается на цвет

Так как пример до сих пор полагался полностью на цвет для различения четырех из пяти состояний ссылок, мы должны сделать следующий шаг и изменить нижнюю границу для visited, focus и hover. Давайте зададим для посещенной ссылки (visited) точечную границу, а для hover и focus штриховую, active оставим без изменений.а для hover и active штриховую.

В результате будет получено что-то похожее на рис. 32.28:

Рис. 32.28. Изменение стиля границы для каждого состояния ссылки

Принимая focus и hover как эквивалентно оформленные состояния, этот метод означает, что состояния ссылок различаются не только цветами. Даже если вы видите эти ссылки черно-белыми, вы сможете определить различные состояния ссылок, как показано на рис. 32.29:

Рис. 32.29. Состояния ссылок теперь различаются даже в черно-белом представлении

Иконки на ссылках

Некоторые сайты используют иконки и символы для добавления информации о своих ссылках. Например, некоторые сайты используют стрелку для указания, что ссылка указывает на внешний сайт; или используют символ "галочки", чтобы показать, что ссылка была посещена.

Такие эффекты легко создаются с помощью фоновых изображений, как показано на рис. 32.30:

Рис. 32.30. Пример ссылок с различными иконками

Чтобы добавить иконку стрелки к внешним ссылкам, можно добавить класс "external" в тег ссылки:

Затем в таблице стилей задается фоновое изображение для этого класса - не забывая добавить заполнение для размещения этого изображения:

Этот пример будет применять иконку для всех экземпляров внешних ссылок во всех состояниях. Если требуется ограничить иконки только непосещенными внешними ссылками, можно объединить классы и псевдо-классы состояний ссылок в селекторе:

Объединение классов и состояний открывает широкие творческие возможности для ссылок. Не забудьте проверить свои цвета, вашим единственным ограничением с этой точки зрения является только воображение.

Что способствует осуществлению желаний? Стопроцентная, непоколебимая уверенность в своем...

Система охраняемых территорий в США Изучение особо охраняемых природных территорий(ООПТ) США представляет особый интерес по многим причинам...

Что будет с Землей, если ось ее сместится на 6666 км? Что будет с Землей? - задался я вопросом...

Что делает отдел по эксплуатации и сопровождению ИС? Отвечает за сохранность данных (расписания копирования, копирование и пр.)...

Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте: