—»     —»   Урок CSS3: Выдвижная панель поиска с помощью CSS3
  Раздел: CSS/Style Sheets   Комментариев: 2  

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



Урок 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.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, отправные формы
Опубликовал d1sapp3ar   Прочитано (раз): 5563   |   Оставлено комментариев: 2
Распечатать
Другие статьи и новости по теме:
Комментарий #1: 16 мая 2014 @ 15:41
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Спасибо! Данное решение только что пригодилось :)
Комментарий #2: 19 мая 2014 @ 11:07
Написал: d1sapp3ar — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Цитата: Design FactoRy
Спасибо! Данное решение только что пригодилось :)


Всегда пожалуйста. Рад, что пригодился урок =).
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31