Урок CSS3: Выдвижная панель поиска с помощью CSS3

search-panelДобрый день пользователи и посетители проекта red-star.pro. Вы наверное часто встречали на сайтах выдвижную панель поиска. Т.е. вы кликаете по полю поиска и она увеличиваться в ширине (выдвигается). Сегодня мы будем делать такую панель поиска.

Для этого урока нам опять понадобится свойство CSS3 transition. Что-то я заметил, что это свойство последнее время везде встречается. Нужно делать уроки с использованием других свойств.

Итак, начнем.

Шаг 1. HTML-разметка
Как обычно, сначала, мы сделаем html-разметку. Для этого мы пишем такой код:

Разметка очень простая. Простая форма и поле для поиска.

Шаг 2. Создаем стили
В этом шаге мы создадим стили для нашей формы и для нашего поискового поля. Для этого напишем такой код:

input[type=search] {
    background: #e5e5e5 url(images/icon.png) no-repeat 9px center;
    border: solid 6px #ccc;
    padding: 9px 10px 9px 30px;
    width: 120px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

Тут тоже все просто. Мы установили фоновое изображение и указали фоновый цвет нашего поля. Установили ширину 120px и конечно же написали наше любимое свойство transition.

Если мы сейчас все сохраним и посмотрим результат, то мы увидим вот такую картину:

sp-1

И даже, если мы кликнем по полю поиска, то ничего не произойдет. Для этого нам нужно написать стили для псевдокласса :focus.

Шаг 3. Псевдокласс :focus
В этом шаге мы напишем стили для псевдокласса :focus. Но, прежде чем писать для него стили узнаем что это такое:

Псевдокласс :focus
Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.

Давайте теперь напишем для него стили. Для этого напишем вот такой код:

input[type=search]:focus {
    width: 660px;
    border: 6px solid #ffb500;
    background-color: #ffffff;
    outline: none;
}

Тут тоже ничего сложного нет. Мы просто написали, что если кликнуть по полю, то оно изменит свою ширину со 120px до 660px, и просто его немного украсили. Если теперь мы посмотрим наш результат, то увидим, что, когда мы кликаем по полю с поиском, то оно меняет свою ширину:

sp-2

На этом все. Данный урок окончен. Спасибо за внимание!

Автор урока: Артур Хабиров
Урок для Вас подготовлен командой сайта www.red-star.pro.