Перед тем как изменять внешний вид ссылок нужно понимать, что у пользователей сложились определённые стереотипы о том, как должна выглядеть ссылка:
1. цвет ссылки должен быть синим
2. при наведении на ссылку курсор должен превращаться в pointer (указательный палец)
3. текст ссылки должен быть подчеркнутым
4. текст ссылки может быть жирнее обычного текста
Именно от этих стереотипов следует отталкиваться при проектировании стиля гиперссылок.
Для удобства пользователей следует оставить хотя бы 2 пункта (лучше 3).
Например так:
Наравне с блочными текстовыми ссылками существуют ссылки-изображения:
В блочной ссылке можно разместить любую информацию, верстку, изображения и д.р.
Главное при оформлении ссылок необходимо помнить, что пользователь должен интуитивно понимать интерфейс. Это очень важный момент, при разработке дизайна сайта.
Если Ваш элемент дизайна - ссылка, то пользователь должен понимать как она будет работать до клика, выделения и т.п.
Спасибо за внимание.
1 2 3 4 5 6 7 8 9 10 11 | <style>a.my_link{ color:black; text-decoration:underline; cursor:pointer;}a.my_link:hover{ color:#00f;}</style><a class="my_link">Ссылка</a> в начале предложения, которое её описывает. |
Ссылка в начале предложения, которое её описывает.
1 2 3 4 5 6 7 8 | <style>a.my_link2{ color:#00f; cursor:pointer; font-weight:bold;}</style>Интересный текст, описывающий <a class="my_link2">ссылку</a>. |
Интересный текст, описывающий ссылку.
Также не стоит забывать о блочных ссылках - тренде flat design.
Цвет фона такой ссылки должен быть ярким, а текст должен выглядеть контрастно c большими отступами.
Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <style>a.my_link3{ color:#fff; cursor:pointer; font-weight:bold; padding: 10px 20px; display:inline-block; background:#f33;}a.my_link3:hover{ background:#f00;}</style><a class="my_link3">Ссылка</a>. |
1 2 3 4 5 6 7 8 9 | <style>a.my_link4{ cursor:pointer; display:inline-block; width:100px; height:100px;}</style><a class="my_link4"><img src="/images/news/88--14-11-29--17-19-00.jpg" /></a> |