Главная > CSS/Style Sheets > Урок CSS3: Выдвижная панель поиска с помощью CSS3

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


13 мая 2014, 15:00. Разместил: d1sapp3ar
Урок CSS3: Выдвижная панель поиска с помощью CSS3

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

Демо | Исходники

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

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

Шаг 1. HTML-разметка

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


<form>
<input placeholder="Поиск" type="search">
</form>

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

Шаг 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.

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

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

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

Шаг 3. Псевдокласс :focus

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

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

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


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

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

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

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

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