Главная > CSS/Style Sheets > Урок CSS3: Выдвижная панель поиска с помощью CSS3
Урок CSS3: Выдвижная панель поиска с помощью CSS313 мая 2014, 15:00. Разместил: d1sapp3ar |
Вы наверное часто встречали на сайтах выдвижную панель поиска. Т.е. вы кликаете по полю поиска и она увеличиваться в ширине (выдвигается). Сегодня мы будем делать такую панель поиска. Демо | Исходники Для этого урока нам опять понадобится свойство CSS3 transition. Что-то я заметил, что это свойство последнее время везде встречается. Нужно делать уроки с использованием других свойств. Итак, начнем. Шаг 1. HTML-разметка Как обычно, сначала, мы сделаем html-разметку. Для этого мы пишем такой код:
Разметка очень простая. Простая форма и поле для поиска. Шаг 2. Создаем стили В этом шаге мы создадим стили для нашей формы и для нашего поискового поля. Для этого напишем такой код:
Тут тоже все просто. Мы установили фоновое изображение и указали фоновый цвет нашего поля. Установили ширину 120px и конечно же написали наше любимое свойство transition. Если мы сейчас все сохраним и посмотрим результат, то мы увидим вот такую картину: И даже, если мы кликнем по полю поиска, то ничего не произойдет. Для этого нам нужно написать стили для псевдокласса :focus. Шаг 3. Псевдокласс :focus В этом шаге мы напишем стили для псевдокласса :focus. Но, прежде чем писать для него стили узнаем что это такое: Псевдокласс :focus Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор. Давайте теперь напишем для него стили. Для этого напишем вот такой код:
Тут тоже ничего сложного нет. Мы просто написали, что если кликнуть по полю, то оно изменит свою ширину со 120px до 660px, и просто его немного украсили. Если теперь мы посмотрим наш результат, то увидим, что, когда мы кликаем по полю с поиском, то оно меняет свою ширину: На этом все. Данный урок окончен. Спасибо за внимание! Автор урока: Артур Хабиров Урок для Вас подготовлен командой сайта www.red-star.pro. Вернуться назад |