форма поиска css примеры
8 способов украсить поле поиска с помощью CSS
Дата публикации: 2018-07-31
От автора: поле поиска — крайне утилитарная часть среднестатистического сайта. Но это не значит, что его следует игнорировать. Наоборот. Поиск предоставляет пользователям простой способ найти то, что они ищут, и может быть бесценным на контент-сайтах. Поэтому стоит потратить некоторое время, чтобы ваша область поиска была привлекательной, заметной и простой в использовании.
Имея это в виду, ниже представлена коллекция фрагментов, делают обычное поле поиска CSS немного красивее. Они варьируются от простых эстетических CSS улучшений вплоть до JS UI, которые помогают создать более захватывающий опыт.
Меняющаяся иконка
Морфинговая анимация — всегда удовольствие. Здесь у нас есть значок вездесущего увеличительного стекла, который при щелчке превращается в полную панель поиска. Нажатие на «X» превращает все обратно в квадрат. Это может быть хорошим решением для небольших экранов, поскольку вы можете просто убрать поле, когда оно не используется.
Просто наведите указатель мыши и ищите
В этом примере аналогичная функциональность, но с важным отличием. Вместо того, чтобы щелкнуть, чтобы открыть поле поиска, пользователю просто нужно навести курсор мыши на значок. Это может быть относительно небольшая вещь, но она может обеспечить толчок, когда дело доходит до удобства использования. Опять же, потенциально твердый выбор для тесных пространств.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Скроллерам тоже нужно искать
На мобильных устройствах пользователи могут работать с большим количеством скролов. Но если они не могут найти то, что ищут, это часто означает, что им нужно будет вернуться к заголовку сайта, чтобы выполнить поиск. Здесь у нас есть «липкая» панель поиска, которая будет прикрепляться к верхней части экрана при прокрутке страницы вниз. Эта удобная функция может сделать жизнь намного проще для пользователей.
Экран Material
В наши дни Material Design используется довольно часто. Поэтому вполне естественно, что язык дизайна также применяется для поиска. Также приятно, что после щелчка это поле поиска занимает весь экран. Это позволяет пользователям сосредоточиться исключительно на их поиске, и, с небольшой работой, дизайнеры могут потенциально добавить на дисплей другую связанную информацию.
Простой пользовательский поиск
Иногда пользователи могут искать только определенные области вашего сайта. Хотя пользовательский поиск не является совсем новой концепцией, он не всегда был визуально привлекательным. Вот что делает эту выборочную демонстрацию поле поиска настолько гладкой. В нем есть серия значков, каждая из которых представляет собой другую область, где можно выполнить поиск (плюс удобные подсказки). Пользователь просто щелкает, какую область они хотят искать — легко!
Контекстная анимация
Предоставление визуального контекста во время поиска помогает гарантировать пользователям, что они находятся на правильном пути. Этот фрагмент использует AJAX для изменения цвета фона и добавления текстовой информации, когда пользователь выполняет поиск.
Прозрачность
Как создать область поиска, которая выделяется, а не торчит, как больной палец? Прозрачность — один из способов сделать это. Здесь у нас есть полупрозрачное поле поиска, которое находится поверх полноэкранного изображения. Тем не менее, белая рамка сильная, и это создает приятный визуальный эффект, не обгоняя страницу.
Мульти-поиск
Для сайтов, которые позволяют пользователям выполнять поиск более одного набора данных, этот пример может быть весьма полезен. Он использует jQuery, чтобы позволить пользователю переключаться между разными полями поиска, тем самым помещая все функции поиска в одном месте.
Конечный результат
Поля поиска могут играть жизненно важную роль в поддержании пользователей на вашем веб-сайте. И приведенные выше примеры являются доказательством того, что вы можете предоставить некоторые полезные улучшения без больших усилий. Итак, если вы не обратили внимания на внешний вид и функциональность поиска вашего сайта, это отличное место для начала.
Автор: Eric Karkovack
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Форма поиска css примеры
Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».
Бесплатные уроки CSS для начинающих
Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.
Анимация фона при прокрутке страницы
Анимируем SVG фигуры при прокрутке страницы.
Пример 3D помещения выставки
Экспериментальная 3D проекция помещения галереи.
CSS эксперименты с формой поиска
Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)
В этом руководстве я хотела бы рассказать, как вы можете украсить вашу форму поиска. Мы не будем делать ничего супер-сложного. Вместо этого рассмотрим четыре способа, как вы можете украсить форму поиска с помощью CSS transitions
Ниже приведен код обычного бокса для поиска.
Все четыре примера будут иметь, естесственно, строку поиска и иконку поиска. Каждый из четырех примеров будет находиться в отдельном контейнере, чтобы мы могли изменять их независимо друг от друга. Наконец, блок div ответственный за то, чтобы держать наш контейнер по центру.
Добавление Font Awesome
Кусок кода выше показывает один из примеров, как можно включить иконку в вашу разметку. Однако, чтобы иконка заработала, вам так же необходимо указать ссылку на библиотеку Font Awesome, как написано ниже. Добавьте эту ссылку в head тэг вашего документа.
Начальные стили
Сейчас мы добавим немного стилей в отдельный файл (который вам так же придется добавить в head тэг вашего документа).
В приведенном выше фрагменте кода CSS мы добавили некоторые базовые стили для страницы. Стиль полей поиска будет окрашен в тёмно-синий цвет, поэтому фон body не должен быть абсолютно белым. Класс box также центрируется на странице урока.
Отделка Search Box
Этот урок посвящён изучению того, как отделать окна поиска. На первом примере я объясню происходящее более подробно; убедимся, что вы точно знаете, что происходит. В остальных трёх примерах я просто покажу вам варианты переходов.
#1. Осветление фона
Первый пример, который мы собираемся решить, это изменение фона ввода поиска при зависании. Мы будем добавлять переход, чтобы изменение не было резким.
Вы уже видели код HTML базовой разметки. Это будет один фрагмент на все примеры.
Чтобы назначить стиль, нам нужно определить стиль CSS самого окна поиска. Давайте добавим все правила CSS один за другим, чтобы вы точно знали, что происходит.
Input
Затем мы назначим стиль input. Все вышеизложенное является украшательством, поскольку радиус границы или цвет фона не влияют на функциональность input. Обратите внимание на свойства левого отступа. Это, чтобы освободить место для значка, чтобы он не находился буквально над текстом внутри input.
Ниже у нас четыре различных правила для цвета заполнителя текста нашего примера Search. К сожалению, правила должны быть отдельными для отдельных префиксов поставщиков и не могут быть объединены в сокращенное письменное правило. Это немного раздражает и будет повторяться в каждом примере!
Добавление эффектов Hover
Создание перехода
Стиль input теперь должен выглядеть, как код ниже.
Как работают переходы CSS?
Если вы ничего не знаете о CSS transitions, позвольте мне дать вам краткий обзор. Во-первых, для перехода свойство должно быть определено в состоянии default, а не при hover, или active или focus.
Переходы CSS позволяют постепенно изменять эффект и определить параметры контроля, такие как свойство, продолжительность перехода и вид перехода. Вы можете установить несколько переходов для одного элемента. Главное, вы всегда должны включать префиксы поставщиков для различных браузеров, поскольку поддержка этого свойства еще не является универсальной.
#2. Развернуть ввод при наведении
В этом примере поиск начнётся по иконке смотрового стекла. При наведении курсора на значок поиск развернётся, после чего вы можете ввести свой запрос. Большая часть кода в этом примере будет очень похожа на предыдущий.
Стиль ввода для этого перехода отличается. Вход значительно меньше, так что значок может оказаться за квадратом. Все остальные свойства, такие как фон или цвет шрифта, останутся, мы не хотим полностью изменить стиль поиска.
Как видите, я переопределила свойство перехода, чтобы влиять только на ширину. Я сохранила то же время, потому что это достаточно быстро, чтобы не раздражать пользователей, но и достаточно долго, чтобы создать приятный эффект.
Ниже приведен код для перекраски placeholder текста.
И снова у нас есть стиль CSS иконки. Он остался таким же, как в предыдущем примере.
Добавление эффектов Hover
Самым последним, что происходит в приведённом коде, является то, что при наведении значок меняет свой цвет. Это всего лишь деталь, чтобы быстро показать пользователю, что окно поиска активно, а не бездействует. Это изменение не реализовано для перехода.
#3. Увеличение размера значка при наведении
Из всех четырёх примеров этот является самым тонким, как с точки зрения кода, так и с визуальной. В этом случае значок смотрового окна будет слегка выплывать и увеличиваться в размере.
В стиле CSS для этого примера ничего особенного. По большей части в начале очень похоже на первые примеры, когда состояние default ничем не отличается. Ниже приведен код для контейнера и input. Обратите внимание, что на этот раз переход на input отсутствует.
Еще раз у нас есть правила placeholder.
По внешнему виду, значок для этого примера такой же. Та же позиция, тот же цвет и прочее. Однако, я добавила к нему переход. Эти переходы назначены всем свойствам, что более коротко, чем их индивидуальное изложение.
Добавление эффектов Hover
В приведенном выше коде есть несколько вещей. Во-первых, мы поменяли цвет значка при наведении и переместили немного выше, чтобы он центрировался по вертикали, когда увеличится. Во-вторых, мы добавили трансформацию иконке при наведении так, чтобы она становилась в 1,5 раза больше первоначального размера. Поскольку ранее определённый переход был настроен для воздействия на все свойства, кажется, что значок растёт при наведении.
Еще раз взглянем на CSS3 Transitions And Transforms From Scratch, чтобы узнать больше о трансформации.
#4. Кнопка при наведении
Этот HTML немного отличается. Вход всё ещё там, конечно, но значок теперь внутри элемента кнопки, который идёт после input. Важно, что button идёт после input, поскольку это связано с тем, как эффект ожидания будет создан в CSS.
Ниже input не имеет перехода, потому что теперь это больше не элемент.
Следующий фрагмент для изменения цвета placeholders.
Добавление эффектов Hover
Последнее правило изменяет фон button только при наведении курсора на кнопку. Хорошо дать знать пользователю, что кнопка активна и он может нажать на неё, чтобы отправить запрос; нет смысла иметь кнопку, если она кажется неактивной.
Заключение
Что ж, мы подошли к концу наших экспериментов CSS! Мы взяли основную форму input поиска и использовали небольшой набор эффектов, чтобы изменить её поведение. Как ещё можно было бы изменить input? Какие другие аспекты вы бы применили к CSS-переходам или трансформации? Дайте нам знать об этом в комментариях!
CSS эксперименты с полем и кнопкой поиска
Дата публикации: 2014-11-03
От автора: В этой обучающей статье я хотела бы рассказать о том, как можно украсить обычную форму поиска. Мы не будем делать чего-то необычного. Наоборот, мы рассмотрим четыре различных подхода к тому, как можно улучшить поле поиска с помощью CSS переходов.
У вас уже есть стандартный блок с поиском
Все четыре варианта будут иметь поле поиска и иконку в виде лупы. Каждый из четырех примеров будет помещен в контейнер, чтобы мы могли независимо управлять полем поиска. И наконец, блок div будет отвечать за центрирование контейнера.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Добавление шрифтов Font Awesome
Шрифты Font Awesome являются библиотекой иконок. Узнать подробнее об этом проекте вы можете на собственном сайте проекта Font Awesome.
Пример кода сверху – это один из примеров того, как вы можете вставить иконку внутрь разметки. Однако, для того чтобы иконка отображалась, вам необходимо прописать ссылку на библиотеку Font Awesome, как это показано в следующем примере. Вставьте данную ссылку внутрь элемента head.
Базовое оформление
Мы собираемся добавить некоторые стили в отдельной таблице стилей (которую вам также необходимо подключить внутри элемента head).
Украшение блока с поиском
Эта обучающая статья полностью посвящена тому, как научиться украшать блоки с поиском. В первом примере я буду объяснять все очень подробно; я хочу быть уверена в том, что вы точно понимаете, что и как происходит. В последующих трех примерах я просто покажу, как добиться различных переходов.
#1. Исчезновение фона
В первом примере мы приступим к изменению фона у тега input при наведении. Мы также добавим переход, чтобы изменение не было резким.
HTML
Вы уже видели вариант HTML-разметки. Во всех примерах она будет похожей.
Для того чтобы начать процесс оформления нам необходимо назначить CSS стили для самого блока с поиском. Давайте будем последовательно, правило за правилом, прописывать различные стили, чтобы вам точно было все понятно.
Input
Теперь нам нужно назначить стили для самого элемента input. Вышеприведенные стили носят чисто эстетический характер, т.к. свойство border-radius или background-color не влияют на функционирование самого элемента input. Обязательно обратите внимание на левый отступ. Он необходим для того, чтобы обеспечить свободное пространство для иконки, т.е. иконка не будет находиться буквально поверх элемента input.
Ниже приведены четыре разных правила для указания цвета текста атрибута placeholder (в нашем случае это Поиск). К сожалению, все правила должны прописываться отдельно с указанием вендорных префиксов и не могут быть прописаны в сокращенном виде. Это немного раздражает, и вы увидите этот повторяющийся код в каждом примере!
Иконка
Наконец, мы назначаем оформление для иконки. Наиболее важный момент – это позиционирование иконки поверх элемента input благодаря свойству position: absolute. Поля (margins) помогают спозиционировать иконку в дополнение к указанному верхнему значению свойства position равному 50%.
Добавление эффектов при наведении
Следующий набор правил, который нам необходимо создать, будет определять, что будет происходить с блоком с поиском при наведении. В этом примере мы только изменим цвет фона. Для того чтобы избавиться от желтого или голубого свечения вокруг элемента input (которое иногда добавляется браузерами), назначим свойство outline: none.
Из вышеприведенного отрывка кода видно, что мы добавили два дополнительных состояния – focus и active. Таким образом, эффект не будет исчезать, когда курсор мыши будет уводиться с элемента. Что еще важнее – эффект будет сохранен при взаимодействии с элементом.
Создание перехода
Мы задаем свойство transition в сокращенном виде, но мы можем также и прописать все три параметра по отдельности. Сначала мы говорим, что переход будет влиять только на свойство background. Затем мы говорим, что переход должен длиться чуть больше полсекунды. Наконец, мы определяем функцию смягчения для перехода. Функция ease не является единственно возможной для данного примера. Мы также можем использовать, например, функции linear или ease-in. Тогда просто сам переход будет смотреться немного по-другому. Попробуйте сами поменять значения и выбрать тот эффект, который вам больше понравится.
Стили для элемента input теперь выглядят следующим образом:
Как работают CSS переходы?
Если вы ничего не знаете о CSS переходах, давайте я сделаю для вас небольшой обзор. Сначала, чтобы переход был реализован, нужно определить свойство в его исходном состоянии (по умолчанию), но не в состояниях hover, active или focus.
CSS переходы позволяют постепенно изменять эффект. И вы можете задать определенные параметры для управления эффектом (например, к какому свойству переход будет применен, какова будет длительность перехода и какого он будет типа). Вы можете назначить несколько переходов для одного элемента. Но, что еще важнее, вам следует всегда добавлять вендорные префиксы, чтобы подстроиться под различные браузеры, поскольку поддержка данного свойства еще не является повсеместной.
Для получения дополнительной информации посмотрите статью CSS3 переходы и трансформации с нуля.
#2. Растягивание элемента input при наведении
В данном примере блок с поиском будет изначально представлен только иконкой в виде лупы. Когда вы наводите курсор мыши на иконку, блок с поиском будет растягиваться, чтобы вы могли ввести ваш запрос. Большая часть кода будет похожа на код из предыдущего примера.
Узнайте, как создать меню поиска для фильтрации ссылок с помощью JavaScript.
Поиск/Фильтр меню
Как искать ссылки в меню навигации:
Содержание страницы
Начните вводить определенную категорию/ссылку в строке поиска, чтобы «отфильтровать» параметры поиска.
Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..
Some other text..Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..Какой-то текст..
Создать меню поиска
Шаг 1) Добавить HTML:
Пример
Примечание: Мы используем href=»#» в этой демонстрации, поскольку у нас нет страницы, на которую можно было бы сделать ссылку. В реальной жизни это должен быть реальный URL-адрес конкретной страницы.
Шаг 2) Добавить CSS:
Стиль окна поиска и меню навигации:
Пример
/* Стиль окна поиска */
#mySearch <
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
>
/* Стиль меню навигации */
#myMenu <
list-style-type: none;
padding: 0;
margin: 0;
>
/* Стиль навигационных ссылок */
#myMenu li a <
padding: 12px;
text-decoration: none;
color: black;
display: block
>
#myMenu li a:hover <
background-color: #eee;
>
Шаг 3) Добавить JavaScript:
Пример
Совет: Удалите toUpperCase() если вы хотите выполнять поиск с учетом регистра.
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш
Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2022 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.