BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про CSS » Выдвигающаяся форма поиска для сайта на CSS3

Выдвигающаяся форма поиска для сайта на CSS3

2016-05-26 / Вр:00:36 / просмотров: 4175

Выдвигающаяся форма поиска для сайта на CSS3

Возможно, вашему сайту это пригодиться: я подготовил классный эффект для формы поиска, написанный на чистом 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 – здесь можно задать секунды, насколько быстро должен быть выполнен фокус.

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Выдвигающаяся форма поиска для сайта на CSS3

  1. Привет Степан.Прикольно, нужная порой штука :idea:

    А вот еще кому интересно, может кто то попрактикуется,
    тоже типа выдвижной

    /* Сброс стилей для поля ввода в браузерах webkit */
    input {
    outline: none;}
    input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;}
    input::-webkit-search-decoration,
    input::-webkit-search-cancel-button {
    display: none; /* Удаляем иконку поиска и сброса */
    }
    input[type=image] {
    margin: 13px 0 0 0;
    }
    /* Поле ввода строки поиска */
    input[type=search] {
    background: #f4fafb;
    border: solid 2px #028bb8;
    padding: 9px 10px 9px 20px;
    width: 170px;
    margin: 13px 0 10px 3px;
    -moz-border-radius: 5px 5px 5px 5px;	
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;	
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    }
    input[type=search]:focus {
    width: 220px;
    background-color: #fff;
    border-color: #ffd906;	
    -webkit-box-shadow: 0 0 5px rgba(249,217,4,.5);
    -moz-box-shadow: 0 0 5px rgba(249,217,4,.5);
    box-shadow: 0 0 5px rgba(249,217,4,.5);
    }
    /* Заполнитель */
    input:-moz-placeholder {
    color: #999;
    }
    input::-webkit-input-placeholder {
    color: #999;
    }

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

    У меня на блоге такая форма поиска стоит

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Привет, Саша! Форма красивая, я пробовал.
    Спасибо за полезный комет и код.

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , , , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 750
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4136