Как изменить дизайн ссылки


Blog-Links by susse collection.

Основные положения из статьи "Even links can look good" на сайте Pro blog design:

Изменение стиля ссылок, вероятно, самое простое изменение, которое можно внести в дизайн вашего блога. Это займет всего несколько минут. Вот несколько способов изменить внешний вид ссылки:

Цветной, подчеркнутый - Наиболее распространенный стиль для выделения ссылки в интернете. Цвет выделяет текст, а благодаря сочетанию с подчеркиванием пользователи сразу могут понять, что это ссылка.

CSS -  color: #0000ff; text-decoration:underline;

Цветной, неподчеркнутый - Подчеркивание не всегда обязательно. Редко в тексте цветом выделяют что-нибудь кроме ссылок.

CSS - color:#0000ff; text-decoration:none;

Жирный, подчеркнуый - Для приверженцев минимализма: применяется, например, если дизайн выдержан только в черно-белых тонах. Жирный подчеркнутый шрифт обязательно привлечет внимание к ссылке.

CSS - font-weight:bold; text-decoration:underline;

Заглавный, подчеркнутый - слова, напечатанные прописным шрифтом не всегда примечательны в тексте. Используйте подчеркивание, чтобы идентифицировать их как ссылку.

CSS - font-variant:small-caps; text-decoration:underline;

Подчеркивание пунктиром - обычно ссылка подчеркнута сплошной линией. Подчеркивание пунктиром придаст ссылке уникальный стиль.

CSS - border-bottom: #000000 1px dashed; text-decoration:none;

Цветной фон - выделение цветным фоном менее распространено, чем выделение цветным шрифтом, поэтому такой эффект непременно привлечет внимание пользователя и заметно обновит дизайн.

CSS - background:#e0f6ff; border-bottom:#99c4d5 1px solid; text-decoration:none;

Эффекты при наведении на ссылку:

Удалить / Добавить подчеркивание - самый распространенный способ указать на то, что ссылка активна.

Изменение цвета - цвета должны быть котрастными, разница должна быть заметна мгновенно.

Изменение  жирности и наклона текста - это заманчиво, потому что изменения в формате всегда очень заметны. Однако это может изменить ширину текста, он может начать "прыгать".

Фото:susse collection

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru
Теги: , , , ,

Если вам понравился пост, вы можете оставить комментарий или подписаться на RSS и получать каждый новый пост из этого блога.

  • http://iskariot.ru Сергей М.

    Ужасная статья. Непонятно для кого она - специалисты знают, а новички не поймут, где и как использовать. Нет описания синтаксиса :hover.

    К тому же, подчеркивание пунктиром желательно использовать как обычную ссылку только максимум в навигации, т.к. основная функция такого выделения - ссылки элементов без перезагрузки страницы (ajax, подсказки)

  • Евгений З.

    Сергей М. полностью вас поддерживаю!