Совет: Как исправить проблему с font-weight в состоянии hover

Как исправить проблему с font-weight в состоянии hover

От автора: вы когда-нибудь пробовали изменить значение font-weight у ссылки в разных состояниях? Если да, то вы должны были заметить, что текст немного сдвигается. В этой статье мы сначала узнаем, что вызывает этот сдвиг, а затем рассмотрим два возможных решения данной проблемы.

Определяем проблему

Сначала давайте определим проблему на простом примере. Рассмотрим рисунок ниже:

Пункты меню – ссылки, т.е. в CSS будет что-то типа:

a:hover {
  font-weight: bold;
}

Зачастую пунктам меню не задается фиксированная ширина, а это значит, что при наведении курсора мыши, текст немного сдвинется. Это происходит из-за того, что ширина ссылки при наведении на нее увеличивается. Чтобы продемонстрировать это, добавим класс active к первой ссылке со следующими стилями:

.active {
  font-weight: bold;
}

Мы также изменили текст второго пункта на первый, чтобы они были равны:

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

Надо сказать, что делать элемент жирным при наведении мыши не принято, но иногда может пригодиться.

Решение №1: задать всем пунктам ширину

Как говорилось выше, самый очевидный способ это задать всем пунктам меню ширину. В нашем примере мы задали ширину всех пунктов меню в 24%. Результат:

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

Решение №2: Text Shadow

Используя text-shadow, можно сымитировать эффект font-weight. Сделать это можно, правильно подобрав значение blur-radius.

В зависимости от используемых шрифтов в проекте можно скомбинировать свойства text-shadow и letter-spacing и создать красивые эффекты для текста. Чтобы продемонстрировать данный эффект, мы добавили пару строк CSS кода к нашим ссылкам:

a {
  letter-spacing: .1em;
  transition: text-shadow .3s;
}

a:hover {
  text-shadow: 0 0 .65px #333, 0 0 .65px #333;
  /* раскомментируйте строку ниже, если нужен более сильный эффект */
  /* text-shadow: 0 0 .9px #333, 0 0 .9px #333, 0 0 .9px #333; */
}

Таким образом мы решили проблему со сдвигом текста, и нам не пришлось добавлять какую-либо ширину к элементам. И, как видите, данное решение намного лучше, чем font-weight, так как размер текста не изменяется вообще. Глазу намного приятнее.

Заключение

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

Автор: George Martsoukos

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree