Выдвигающаяся форма поиска для сайта на CSS3
Опубликовано: 01.09.2018
Возможно, вашему сайту это пригодиться: я подготовил классный эффект для формы поиска, написанный на чистом CSS3 без использования javascript. Что же это за эффект? Это выдвигающаяся форма поиска. При клике на форму поиска, форма увеличится до указанной ширины. Увеличение формы по ширине будет происходить плавно, анимировано и красиво!
[ посмотреть демонстрацию ]
В HTML вставьте вот такой код:
<div class="search_form"> <form action="" method="post"> <input type="search" results="5" name="s" id="search_box" placeholder=""> </form> </div>А в CSS вот этот код:
/* поиск */ .search_form input[type=search] { border: 1px solid #ccc; border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); width:50px; margin-top: 10px; 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; } .search_form input[type=search]:focus { width: 250px; 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; }Строка №7 – можете указать ширину начального поиска.
Строка №17 – можно указать ширину поиска при нажатии на форму. Строки №12-№14 – здесь можно задать секунды, насколько быстро должен быть выполнен фокус.Вот такой вот полезный эффект вы сможете быстро, а главное не сложно, установить на сайте для формы поиска. Кстати, дополнительный материал по этой же теме можете посмотреть тут.
Удачи! Спасибо, что вы подписаны на обновление моего блога. Я думаю, вы не пожалеете!Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: css , Вебмастеру , для сайта , поиск , эффекты для сайта