Оформляем гиперссылку, советы по оформлению ссылок

Гиперссылка — базовый, основополагающий элемент не только любого сайта, но и Интернета в целом (без ссылок Интернет был бы чем-то иным). Гиперссылки окружают нас везде, наверное, поэтому веб-мастера начали относиться к оформлению ссылок халатно, а ведь гиперссылка — важнейшая, требующая к себе внимания вещь. В данной статье я решил подготовить для вас ряд советов и рекомендаций по оформлению ссылок (на основании оригинальной заметки про Designing Hyperlinks.

Но, вначале немного справочной информации:

Базовые «состояния» гиперссылки

Элемент <a> может принимать несколько «состояний», определяемых псевдо-классами CSS:

  • a:link — нормальное состояние ссылки;
  • a:visited — ссылка была посещена ранее;
  • a:hover — на ссылку наведен курсор (есть статья про CSS hover эффекты);
  • a:active — активная ссылка (при нажатии на нее);
  • a:focus — пользователь использует клавишу TAB для навигации.

Один из классических примеров:

оформление гиперссылки

Распространенные свойства CSS для оформления ссылок

  • color – цвет гиперссылки;
  • text-decoration – применяемый к тексту оформительский прием (в блоге есть детальная статья как сделать подчеркивание ссылок в CSS);
  • background-color – цвет фона (может, например, меняться если на ссылку наведен курсор (a:hover);
  • font-weight – хороший способ подчеркнуть ссылку, сделав ее жирным шрифтом Bold.
  • border – рамка;

Возможно, вам также будет интересно почитать как в HTML сделать ссылку на почту mailto чтобы сразу создавать письма при клике.

Общие рекомендации по оформлению ссылок

Иногда веб-мастера используют довольно экзотические стили, что редко упрощает жизнь пользователю. Ссылка должна обязательно отличаться от остального текста, причем отличие это должно быть очевидным. Не обязательно делать это ярким «кричащих» образом, иногда просто достаточно выделить ссылку другим цветом. В целом новому пользователю должно быть сразу понятно, что это именно ссылка.

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

Кстати, по этой же причине не используйте стили предназначенные для гиперссылок к другим элементам, это так же породит путаницу. Если вы сильно отходите от классических схем, делайте это с толком (см. примеры ниже).

В обязательном порядке следует определять все псевдо-классы, хотя ссылки вполне будут работать если стили псевдо-классов не определены, поэтому веб-мастера часто их игнорируют.  Не стоит забывать так же что, большое количество людей не используют мышь, поэтому даже о таком “ерундовом” состоянии как a:focus, забывать нельзя. В идеале желательно определить стиль для каждого из состояний. К тому же следует помнить, что по умолчанию разные браузеры имеют разное оформление для псевдо-клссов. Так, например, в Firefox :active и :focus выделяются с помощью серой рамки, в то время как в Google Chrome ссылки с :active идут без стиля, а :focus имеет рамку желтого цвета.

Ну и напоследок, несколько хороших примеров для подражания:

G4Tv

ссылки на сайте

Как вы видите цветовая гамма далека от классической (оранжевые ссылки и заголовки на черном фоне) но очень контрастна. При наведении мыши (a:hover) появляется оранжевый фон. На внутренних страницах сайта стили меняются (сине-голубые ссылки), но это мало мешает навигации по сайту.

Made My Day

оформление ссылок на сайте

Демонстрирует массу «ссылочных» эффектов, гулять по сайту просто интересно!

Сarsonified

Очень четкие состояния a:hover. Пример для подражания!

Надеюсь, эти несколько примеров вдохновили вас на серьезное оформление ссылок! Главное в этом деле — не забывать о деталях (мелочах). Можно не создавать отдельные оригинальные эффекты для состояния наведения на ссылку (hover), а просто хотя бы изменить цвет. Не обязательно делать ссылки  яркими и привлекающими внимание, достаточно просто «отделить их от текста». Ну и, конечно, проверяйте работу ссылок во всех браузерах.

P.S. Постовой. Вот, например, как раз по теме — интернет магазин парфюмерии Vanilla имеет очень красивый дизайн и продуманное оформление ссылок.
Чтобы сайт радовал посетителей дизайном и стабильно работал закажите хостинг у надежной хостинговой компании с хорошими ценами.

11 комментариев к статье “Оформляем гиперссылку, советы по оформлению ссылок”
  1. Очень полезная статья. Казалось бы — такая простая вещь как ссылка, но сколько всего зависит от неё и её правильного оформления.

  2. сложновато…надо мне ещё разок прочитать…)

  3. Tod

    anna, а еще лучше попробовать на практике.

  4. Привет Сань. Я все же предпочитаю ссылку картинкой выделять — тобишь например подчеркивание в виде картинки делать(Без сомнения знаешь такую фишку). Потому как стандартное подчеркивание уже приелось, а точками например если через border делать — не во всех браузерах рентабельно отображается! ИМХО

  5. Tod

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

  6. Тодушка. а рассказал бы ты, как ссылки картинками выделять, а? Какие там параметры нужны? Скажем, наводишь на ссылку, а она мало того что подчёркивается (или, наоборот, подчёркивание убирается), так в правом/левом верхнем углу ещё и махонькая картинка всплывает..
    Я где-то читала о таком способе, но забыла напрочь, где. И найти не могу :(

  7. Tod

    Allpa, сделаем:) Вообще для этого используется свойство background, куда вешается картинка.

  8. Угу, но вот как прописать его параметры, чтобы бекграунд был чётко в определённом углу, я не зналь :(
    Жду с нетерпением мануала :)

  9. Sniper762

    Отлично! Что учат как правильно ссылки оформлять… А то уж надоело однообразие…

  10. Полезная статья, автору спасибо!

  11. Рустем

    Можно еще поставить тень при наведении, еще когда темный фон, а тень яркого цвета, то как будто текст подсвечивается

Оставить комментарий

Внимание! Если вы комментируете впервые, текст будет отправлен на модерацию.
Ваш e-mail не публикуется. Обязательные поля помечены *