8 способов украсить поле поиска с помощью CSS

8 способов украсить поле поиска с помощью CSS

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

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

Меняющаяся иконка

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

Просто наведите указатель мыши и ищите

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

Скроллерам тоже нужно искать

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

Экран Material

В наши дни Material Design используется довольно часто. Поэтому вполне естественно, что язык дизайна также применяется для поиска. Также приятно, что после щелчка это поле поиска занимает весь экран. Это позволяет пользователям сосредоточиться исключительно на их поиске, и, с небольшой работой, дизайнеры могут потенциально добавить на дисплей другую связанную информацию.

Простой пользовательский поиск

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

Контекстная анимация

Предоставление визуального контекста во время поиска помогает гарантировать пользователям, что они находятся на правильном пути. Этот фрагмент использует AJAX для изменения цвета фона и добавления текстовой информации, когда пользователь выполняет поиск.

Прозрачность

Как создать область поиска, которая выделяется, а не торчит, как больной палец? Прозрачность — один из способов сделать это. Здесь у нас есть полупрозрачное поле поиска, которое находится поверх полноэкранного изображения. Тем не менее, белая рамка сильная, и это создает приятный визуальный эффект, не обгоняя страницу.

Мульти-поиск

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

Конечный результат

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

Автор: Eric Karkovack

Источник: https://speckyboy.com/

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