Создание выдвигающейся формы поиска
4 июня 2015 | Опубликовано в css | 2 Комментариев »
В этом уроке мы покажем, как создать выдвигающуюся форму поиска, похожую на форму поиска, которая раньше была на сайте Github. Эта форма поиска отличается тем, что вначале ее ширина небольшая, а когда пользователь нажимает на нее, чтобы ввести поисковый запрос, она изменяют свою ширину с помощью переходов CSS.
Это делается довольно просто с помощью базовых переходов CSS, но в результате получается очень интересный эффект.
Начнем с создания формы поиска, эта форма довольно простая, у нее даже нет кнопки для поиска:
<div class="search_form"> <form action="" method="post"> <input type="text" name="search_box" id="search_box" placeholder="Search or type command" /> </form> </div>
Код выше создаст простую форму с текстовым блоком внутри. Кнопка поиска не нужна, так как поиск начнется после нажатия кнопки ввод.
Код CSS для блока поиска
Сначала задаем блоку поиска серую рамку с закругленными углами. После этого добавляем небольшую тень в текстовый блок, используя свойство тени блока с параметром inset. Форма поиска появится небольшой и увеличится в размере, когда пользователь нажмет на текстовый блок, так что задаем изначальную ширину текстового блока 200px. Правый внутренний отступ блока поиска задается больше, чтобы всегда оставалось свободное мечто после набранного поискового запроса. Теперь добавляем переход, который изменит все указанные свойства CSS и займет 0,2 секунды:
.search_form input[type=text] { border: 1px solid #ccc; border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); width:200px; min-height: 28px; padding: 4px 20px 4px 8px; font-size: 12px; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear; }
Событие получения фокуса блоком поиска
Можно задать стили текстового блока, которые применятся после нажатия на блок поиска, с помощью псевдокласса :focus. После нажатия на блок поиска его ширина увеличится и изменится цвет рамки:
.search_form input[type=text]:focus { width: 400px; border-color: #51a7e8; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5); outline: none; }
Блок поиска
Вот результат вышеописанного кода CSS, создающего выдвигающуюся форму поиска. Надеемся, такая форма поиска пригодится Вам при создании веб-сайтов.
Автор урока Paul Underwood
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- Футуризм в иллюстрации
192
13 марта 2021 в 7:36
ipSjta rzaspvxchspy, [url=http://mfaplglsiiiz.com/]mfaplglsiiiz[/url], [link=http://gecpsixayxkg.com/]gecpsixayxkg[/link], wzwscxrnzxnm.com
Ответить