Від автора: ви коли-небудь пробували змінити значення 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, так як розмір тексту взагалі не змінюється. Оці набагато приємніше.
Висновок
Якби мені потрібно було вирішити таку проблему, я скористався б одним із двох представлених рішень. А ви знаєте які-небудь інші способи вирішення даної задачі? Пишіть про це в коментарях.