8 способов изменить дизайн ссылок, чтобы выделить их

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

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

Большая проблема, которую я вижу на многих блогах — ссылки не выглядят как ссылки. Читатель узнает о них только при наведении на них курсора. Это неприемлемо.

Выделите ссылки! В данной статье я расскажу о 8 эффективных методах изменения стиля ссылок.

1.Добавьте цвет

Один из лучших методов стилизации ссылок состоит в том, чтобы добавить цвет!! Когда большая часть текста черного цвета, добавьте иные цвета, чтобы сделать ссылки заметнее.

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

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

Мэрайя c Femtrepreneur использует интересный красный цвет, чтобы выделить ваши ссылки:

8 методов настроить дизайн ссылок, чтобы выделить их

Чтобы настроить цвет ссылок на веб-сайте, взгляните на таблицу стилей темы и найдите следующее:

a { color: #000000;}

Измените значение рядом с color. Это оно!

Небольшой совет — если вы поменяете значение цвета, и ничего не изменится, вполне вероятно, что ссылки в записях контролируются иным элементом. Прокрутите таблицу стилей и найдите строку .content a или .entry a. Вот где необходимо настроить значение цвета.

Нужна помощь в выборе цвета? Воспользуйтесь одним из популярных инструментов:

  • 0to255;
  • Adobe Kuler.

2.Сделайте жирнее

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

Чтобы сделать CSS подчеркивание ссылки полужирным, добавьте следующий код:

a { font-weight: bold;}

Или используйте шрифт, который поддерживает разные значения насыщенности(толщины):

a { font-weight: 700;}

Например, шрифт Open Sans имеет в себя толщину 300, 400, 600, 700 и 800. Если толщина текста 400, то хорошим выбором для ссылок будет использование толщины 600, 700 или 800.

3.Добавьте подчеркивание

По умолчанию все ссылки оформлены подчеркиванием, а это означает, что если бы вы удалили CSS с веб-сайта, каждая ссылка содержала бы подчеркивание. Это довольно распространенное предположение, что любой подчеркнутый текст будет ссылкой. Так какой метод лучше использовать для выделения ссылок?

Чтобы осуществить подчеркивание ссылки CSS, используйте этот код:

a { text-decoration: underline;}

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

В блоге KORY автор использует нижнюю границу для ссылок. Обратили внимание на большой разрыв между текстом и подчеркиванием? Это можно реализовать при помощи изменения внутреннего отступа ссылки:

8 методов настроить дизайн ссылок, чтобы выделить их Программный код для добавления границы ссылкам:

a { border-bottom: 1px solid #000; padding-bottom: 2px;}

Небольшой совет: Не обязательно придерживаться сплошной границы. Можно попробовать один из приведенных ниже вариантов:

  • CSS подчеркивание пунктиром(dotted);
  • Точечный(dashed);
  • Двойной(double).

4.Стиль курсивом

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

8 методов настроить дизайн ссылок, чтобы выделить их Вот как можно без проблем добиться этого:

a {     font-style: italic;}

5.Сделайте все буквы заглавными

Если вы посмотрите на записи в этом блоге, то заметите, что ссылки оформлены таким образом. Вот как можно оформить ссылки заглавными буквами:

a {   text-transform: uppercase;}

6.Используйте другой шрифт

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

Выберите шрифт, который запросто читается. Шрифт, используемый в теге body, скорее всего, меньше. Необычные шрифты при таком небольшом размере не будут запросто читаться. Так что используйте шрифты семейства serif или sans-serif для достижения лучшей читабельности.

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

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

7.Добавьте фоновый цвет

Один из моих любимых методов выделить ссылку(после подчеркивания точками CSS) — добавить фоновый цвет. Посмотрите на следующий пример:

8 методов настроить дизайн ссылок, чтобы выделить их
Вы ни в коем случае это не пропустите.

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

a {     background-color: #37fcf8;     color: #000;     padding: 1px;  }

8.Комбинируйте!

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *