Сдам Сам

ПОЛЕЗНОЕ


КАТЕГОРИИ







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





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

Рис. 32.15.

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

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

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

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

body { background: #fff; color: #000; font-size: 2em;} a { text-decoration: none;} a:link{ color: #00c; border-bottom: 1px solid #00c;} a:visited{ color: #6D006D; border-bottom: 1px solid #6D006D;} a:focus{ color: #c00; border-bottom: 1px solid #c00;} a:hover{ color: #c00; border-bottom: 1px solid #c00;} a:active{ color: #c00; border-bottom: 1px solid #c00; font-style: italic;}

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

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

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

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

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

body { background: #fff; color: #000; font-size: 2em;} a { text-decoration: none;} a:link{ color: #00c; border-bottom: 1px solid #00c;} a:visited{ color: #6D006D; border-bottom: 1px dotted #6D006D;} a:focus{ color: #c00; border-bottom: 1px dashed #c00;} a:hover{ color: #c00; border-bottom: 1px dashed #c00;} a:active{ color: #c00; border-bottom: 1px solid #c00; font-style: italic;}

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

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

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

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

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

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

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


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

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

<a href="http://example.com/" class="external">external link</a>

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

a.external { background: #fff url("icon-external.gif") center right no-repeat; padding-right: 30px;}

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

a.external:link{ background: #fff url("icon-external.gif") center right no-repeat; padding-right: 30px;}

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







Конфликты в семейной жизни. Как это изменить? Редкий брак и взаимоотношения существуют без конфликтов и напряженности. Через это проходят все...

ЧТО ТАКОЕ УВЕРЕННОЕ ПОВЕДЕНИЕ В МЕЖЛИЧНОСТНЫХ ОТНОШЕНИЯХ? Исторически существует три основных модели различий, существующих между...

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

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





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


©2015- 2024 zdamsam.ru Размещенные материалы защищены законодательством РФ.