Способы оформления ссылок

16 июля 2008, Написано в CSS

Изменение внешнего вида ссылок — это возможно самый простой способ обновить дизайн сайта.

Если вы не уверены что знаете как это сделать, загляните на эту страницу.

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

  • Цветные и подчеркнутые — Наиболее распространенный способ оформления. Цвет выделяет слово среди остальных, а подчеркивание говорит пользователям о том, что это именно ссылка.
color:#0000ff;
text-decoration:underline

Какой-то текст и пример ссылки в каком-то тексте.

  • Цветные, без подчеркивания — Подчеркивание не всегда обязательно. А кроме ссылок цветом в тексте редко что-то обозначают. Несмотря на то что подчеркивание улучшает удобочитаемость, оно может вызвать некоторый беспорядок например в списках ссылок в боковой панели.
color:#0000ff

Какой-то текст и пример ссылки в каком-то тексте.

  • Жирные и подчеркнутые — В дизайне который отличается минимализмом и особенностью которого является сочетание белого и черного цветов, вы возможно не захотите выделять ссылки каким-либо цветом. В этом случае жирного начертания и подчеркивания вполне достаточно.
font-weight:bold;
text-decoration:underline

Какой-то текст и пример ссылки в каком-то тексте.

  • Маленькие заглавные и подчеркивание — Маленькие заглавные буквы это еще один замечательный способ выделить несколько слов. Отдельные заглавные не всегда выделяются в обычном тексте. Используйте подчеркивание, чтобы однозначно придать вид ссылок.
font-variant:small-caps;
text-decoration:underline

Какой-то текст и пример ссылки в каком-то тексте.

  • Пунктирное подчеркивание — По умолчанию ссылки подчеркиваются сплошной линией. Однако если вы уберете обычное подчеркивание и добавите ссылке нижнюю пунктирную рамку вы сделаете эффект подчеркивания более интересным.
border-bottom:dashed 1px #000

Какой-то текст и пример ссылки в каком-то тексте.

  • Цветной фон — Выделение цвета ссылки это один из наиболее распространенных вариантов, в то время как выделение фона ссылки встречается гораздо реже. В совокупности с подчеркиванием дает отличный эффект.
background:#e0f6ff;
border-bottom:solid 1px #99c4d5

Какой-то текст и пример ссылки в каком-то тексте.

Эффекты при наведении

  • Удаление / Добавление подчеркивания — Большинство ссылок имеют подчеркивание. Самый простой способ — убрать подчеркивание при наведении. Или же наоборот добавить, если оно отсутствует.

Какой-то текст и пример ссылки в каком-то тексте.

  • Изменение цвета — Изменение цвета следует использовать только в том случае, когда изменение сразу же становится заметным (даже если указатель закрывает часть слова). Этот способ можно использовать, когда цвет ссылки в обычном состоянии черный (например если вы используете жирное начертание или маленькие заглавные).

Какой-то текст и пример ссылки в каком-то тексте.

  • Не используйте при наведении жирное начертание, курсив или прописные буквы — Эти эффекты достаточно заманчивы, т.к. изменения сразу же становятся заметны. Однако они влияют на ширину ссылки, что может привести к неприятным последствиям в тексте.

Какой-то текст и пример ссылки в каком-то тексте.

Оригинал: Even Links Can Look Good

14 комментариев к статье «Способы оформления ссылок»:

  1. Илья:
    16 Июл 2008 в 15:01

    Спорная статья. Автор наверное хотел показать не лучший способ оформления ссылок, а вообще способы оформления ссылок. Разве может ссылка без подчеркивания, ссылка выделенная жирным шрифтом или заглавными буквами быть хорошей? В очень редких случаях, имхо.

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

    Алекс, ваше-то какое мнение?

    Ответить
  2. Alex:
    16 Июл 2008 в 15:13

    Я в основном использую первые 3 способа. Вариант с маленькими заглавными думаю, может быть вполне применим, если подобрать оптимальный шрифт. Ссылка подчеркнутая пунктирной линией у меня так же ассоциируется с каким-то скриптовым действием. Так же не вижу ничего плохого в использовании последнего примера.

    Ответить
  3. Интересное для веб-мастеров (25.07.2008) » Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров от школы создания с:
    25 Июл 2008 в 07:02

    [...] Способы оформления ссылок Изменение внешнего вида ссылок — это возможно самый простой способ обновить дизайн сайта. Вам потребуются всего несколько секунд, чтобы придать ссылкам новый вид. Ниже вы ознакомитесь с лучшими способами оформления ссылок, которые придадут ссылкам приятный вид и сделают их удобными в использовании. [...]

    Ответить
  4. Хостинг » Archives » Интересное для веб-мастеров (25.07.2008):
    3 Авг 2008 в 12:39

    [...] Способы оформления ссылок Изменение внешнего вида ссылок — это возможно самый простой способ обновить дизайн сайта. Вам потребуются всего несколько секунд, чтобы придать ссылкам новый вид. Ниже вы ознакомитесь с лучшими способами оформления ссылок, которые придадут ссылкам приятный вид и сделают их удобными в использовании. [...]

    Ответить
  5. Всё о том как создать свой сайт » Интересное для веб-мастеров (25.07.2008):
    6 Авг 2008 в 21:51

    [...] Способы оформления ссылок Изменение внешнего вида ссылок — это возможно самый простой способ обновить дизайн сайта. Вам потребуются всего несколько секунд, чтобы придать ссылкам новый вид. Ниже вы ознакомитесь с лучшими способами оформления ссылок, которые придадут ссылкам приятный вид и сделают их удобными в использовании. [...]

    Ответить
  6. itnewsonly:
    27 Мар 2009 в 20:16

    Alex, на счет последнего варианта оформления ссылки не совсем согласен. Динамически изменяемый шрифт, по-моему, это через чур. Может я слишком люблю минимализм?! Ссылки не должны отвлекать внимание от основного текста, разве что вебмастер ставит задачу перенаправить посетителей на другой ресурс, или повысить CTR тех же контекстных ссылок бегуна. В других случаях это недопустимо. Опять же это мое ИМХО…

    Ответить
  7. Alex:
    27 Мар 2009 в 20:24

    itnewsonly, последний пример приведён как раз, чтобы показать, как не надо делать. ;)

    Ответить
  8. Tane4ka:
    16 Апр 2009 в 13:24

    Здравствуйте! все конечно замечательно, но не могли бы вы рассказать о более сложных примерах? нужно чтобы при наведении у ссылки появлялся фон в виде картинки. Не в виде background-color, а именно в виде background: url(‘imgs/a-active.png’) no-repeat 0 0. Это свойство использую в навигации в хедере. Но вся сложность в том, что ширина этой картинки должна меняться. Н-р, для ссылки ФОТО и ссылки КАТАЛОГ ПРОДУКЦИИ, картинка то сужается, то расширяется. Как это организовать?
    заранее благодарю :-) и с нетерпением жду ответа!

    Ответить
  9. ss:
    15 Окт 2009 в 00:53

    яваскриптом

    Ответить
  10. Stargot:
    4 Июн 2010 в 05:12

    Спасибо, пригодилось для оформления. Отличная подборка.

    Ответить
  11. сергей:
    26 Июн 2010 в 20:45

    У меня другая проблема.
    Ссылка находится внутри блока, но почему-то border-bottom подчеркивает не текст ссылки, а всю ширину блока.
    Подскажите, как подчеркнуть только текст сылки.

    Ответить
  12. переезд:
    20 Июл 2010 в 13:36

    А как сделать ссылку размером в 2-3 пт?

    Ответить

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