10 фрагментов CSS для создания потрясающих анимированных эффектов подчеркивания текста

Подчеркивание CSS по умолчанию отлично работает. Кто мог ненавидеть это?

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

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

1. Чередующееся подчеркивание

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

Не только это, но и динамическое перемещение по навигации, чтобы создать иллюзию, что это один единственный блок. Довольно круто, верно?

Вы можете сделать все это самостоятельно с помощью CSS, добавив подчеркнутый блок в элемент HTML. Удивительно просто, учитывая, как мало кода вам нужно (около 60 строк CSS).

2. Объединение нескольких строк

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

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

Кроме того, все это использует собственный градиент CSS3 для фона, что чертовски круто.

3. Скользящее подчеркивание

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

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

4. Лучшее подчеркивание текста

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

В лучшем подчеркивании текста Лукаса Хорака вы заметите, что полоса под текстом лучше вписывается в нисходящие элементы. При этом учитываются такие формы букв, как «g» и «p», где строки опускаются ниже обычной высоты строки.

Кроме того, само подчеркивание немного опускается ниже текста, поэтому оно приобретает новый вид по сравнению с браузером по умолчанию.

5. Стили анимации

Это уникальное перо содержит несколько пользовательских эффектов подчеркивания, созданных с помощью чистого CSS разработчиком Мэтью Скоттом.

Он может похвастаться четырьмя очень специфическими стилями подчеркивания, основанными на некоторых общих переходах CSS:

• Справа налево
• Слева направо
• Анимация наружу
• Анимация внутрь

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

Определенно есть несколько крутых эффектов, и их довольно легко портировать в ваши собственные проекты.

6. Больше стилей анимации

Вот еще один набор пользовательских анимаций подчеркивания, созданных разработчиком Kseso.

Они идут немного более экстремально со стилями подчеркивания, использующими тени CSS3 для светящихся эффектов. Возможно, вы можете использовать это как шаблон для создания классного дизайна светового меча из «Звездных войн», если у вас есть время (или вы просто любите «Звездные войны»).

7. Просто загляните

Я видел этот эффект на нескольких веб-сайтах, и, вероятно, это один из моих любимых. Раскрывающееся подчеркивание использует чистый CSS и анимирует строку с эффектом перехода.

С этой анимацией вы по-прежнему чувствуете, что каждая подчеркнутая «граница» соединяется с каждой ссылкой. Мне это нравится больше, чем линии, которые скользят между ссылками, потому что этот эффект кажется более быстрым и прямым.

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

8. Расширение анимации

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

Обратите внимание, что он использует функцию cube-bezier() для создания уникальной анимации при наведении.

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

9. Пользовательские подчеркивания CSS

Вот еще один стиль, который действительно может работать на любом веб-сайте. Разработчик Тристан Уилсон создал эти простые подчеркивания, которые обрамляют строку на несколько пикселей ниже текста.

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

Если вы хотите, чтобы ваши подчеркивания действительно выделялись из всего стада, этот набор — отличное место для начала.

10. Установка между спусковыми устройствами

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

Весь эффект зависит от пары свойств CSS3: если быть точным, box-shadow и text-shadow .

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

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

11. Пользовательские градиенты

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

Градиент проходит через CSS3, поэтому вы можете изменить цвета на все, что захотите. И если вы можете в это поверить, для работы этой штуки не требуется никакого дополнительного HTML . Просто выберите нужные якорные ссылки и скопируйте/вставьте коды CSS, чтобы получить свои собственные градиентные подчеркивания.

Я, конечно, надеюсь, что из всех этих дизайнов есть один приятный эффект, который вы можете почерпнуть из этой коллекции.

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