Красивая форма поиска для сайта с эффектом растяжения средствами CSS

2013-04-26

Здравствуйте! Меня зовут Лилла и я приветствую вас на своем новом сайте Веб Проделки!

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

И начну я сегодня с небольшого рассказа-урока о том, как сделать симпатичную форму поиска для сайта.

Для появления на странице формы поиска  по сайту необходим следующий код.

Он должен быть вставлен в то место странички, где мы желаем видеть саму форму поиска. После этого появится стандартное прямоугольное окошечко и кнопка. Однако вам, скорее всего, хотелось бы лицезреть на своем сайте нечто более симпатичное, не правда ли? Например, такое.

Растягивающаяся форма поиска для сайта

Что ж, все в наших руках! Для придания форме поиска презентабельного и понятного вида воспользуемся средствами задания стилей с помощью CSS.

Этот код должен быть внедрен на сайт либо внутри тегов <style></style>, а лучше всего вынесен (добавлен) в отдельный файл стилей style.css. И конечно же, чтобы все работало как следует, надо не забыть поместить в папку с картинками изображение лупы “zoom.png” и правильно прописать путь к нему.

После этого наша форма поиска становится гораздо симпатичнее. Кнопку “Искать” можно удалить, поскольку и само окно и без нее теперь достаточно информативно и понятно. Для этого из кода страницы нужно удалить строку:

Думаю, большинство пользователей, как и я, после набора в форме поискового запроса, чаще всего нажимают не кнопку, а клавишу Enter. Если же вам все равно хочется иметь кнопку поиска, можете подобрать и прописать стили для “searchsubmit” самостоятельно.

Еще можно добавить к нашей форме поиска эффект растяжения, то есть, сделать так, чтобы при установке курсора текстовое поле расширялось и ввод текста поискового запроса был более наглядным. Для этого в файле стилей или внутри тегов <style></style>, если вы использовали этот вариант, необходимо добавить еще один кусочек кода:

Отлично, теперь наша форма поиска стала более дружелюбной и живенькой, не так ли?

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

Метки: , ,

Статья пригодилась? Буду признательна, если поделитесь в соцсетях:

Комментарии


Комментариев пока нет, будьте первым.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">