Вы наверное часто встречали на сайтах выдвижную панель поиска. Т.е. вы кликаете по полю поиска и она увеличиваться в ширине (выдвигается). Сегодня мы будем делать такую панель поиска.
Демо | Исходники
Для этого урока нам опять понадобится свойство 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.
Если мы сейчас все сохраним и посмотрим результат, то мы увидим вот такую картину:
И даже, если мы кликнем по полю поиска, то ничего не произойдет. Для этого нам нужно написать стили для псевдокласса :focus.
Шаг 3. Псевдокласс :focus
В этом шаге мы напишем стили для псевдокласса :focus. Но, прежде чем писать для него стили узнаем что это такое:
Псевдокласс :focus
Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.
Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.
Давайте теперь напишем для него стили. Для этого напишем вот такой код:
input[type=search]:focus {
width: 660px;
border: 6px solid #ffb500;
background-color: #ffffff;
outline: none;
}Тут тоже ничего сложного нет. Мы просто написали, что если кликнуть по полю, то оно изменит свою ширину со 120px до 660px, и просто его немного украсили. Если теперь мы посмотрим наш результат, то увидим, что, когда мы кликаем по полю с поиском, то оно меняет свою ширину:
На этом все. Данный урок окончен. Спасибо за внимание!
Автор урока: Артур Хабиров
Урок для Вас подготовлен командой сайта www.red-star.pro.
