Красива форма пошуку на css3

Одним з обов`язкових елементів на сайті є форма пошуку. Якщо у вас її раптом немає, то для того щоб відвідувачам сайту було легше знаходити потрібний матеріал, рекомендую її додати. А в цьому уроці ми створимо красиву форму пошуку на CSS3.

Приклад форми пошуку можна побачити тут:

Подивитися прімерСкачать

HTML частина

Спершу необхідно створити каркас форми. Зазвичай проста форма пошуку складається із поля вводу і кнопки «Пошук» або «Шукати»:

lt;form class="Form-wrapper"gt;lt;input id="Search" placeholder="Пошук для CSS3, HTML5, jQuery ..." required="" type="Text"gt;lt;input value="Пошук" id="Submit" type="Submit"gt;lt;/formgt;

Ми використовуємо деякі атрибути з HTML5:

Відео: Курс HTML і CSS - Форма пошуку в сайдбарі [Урок 18]

1) placeholder - текст на тлі.

2) required - означає, що поле є обов`язковим.

CSS частина

Задаємо загальний вигляд форми. Додаємо тінь, кордон і створюється ефект обсягу:

12345678910111213141516171819202122

.form-wrapper {width: 450px-padding: 8px-margin: 100px auto-overflow: hidden-border-width: 1px-border-style: solid-border-color: #dedede #bababa #aaa #bababa--moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px # 444--webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px # 444-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px # 444--moz-border-radius: 10px--webkit-border-radius: 10px-border-radius: 10px-background-color: # f6f6f6-background-image: -webkit-gradient(linear, left top, left bottom, from(# f6f6f6), to(# eae8e8))-background-image: -webkit-linear-gradient(top, # f6f6f6, # eae8e8)-background-image: -moz-linear-gradient(top, # f6f6f6, # eae8e8)-background-image: -ms-linear-gradient(top, # f6f6f6, # eae8e8)-background-image: -o-linear-gradient(top, # f6f6f6, # eae8e8)-background-image: linear-gradient(top, # f6f6f6, # eae8e8)-}

Відео: Відео урок 5 - html верстка форми пошуку в меню сайту navbar bootstrap

Далі задаємо стилів для поля введення коли вона неактивно, і коли воно в фокусі, тобто коли ми набираємо текст:

12345678910111213141516171819202122

.form-wrapper #search {width: 330px-height: 20px-padding: 10px 5px-float: left-font: bold 16px `Lucida sans`, `Trebuchet MS`, `Tahoma`-border: 1px solid #ccc--moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff--webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff--moz-border-radius: 3px--webkit-border-radius: 3px-border-radius: 3px-}.form-wrapper #search: focus {outline: 0-border-color: #aaa--moz-box-shadow: 0 1px 1px #bbb inset--webkit-box-shadow: 0 1px 1px #bbb inset-box-shadow: 0 1px 1px #bbb inset-}

Далі прописуємо стилі для тексту, який знаходиться на тлі:

1234567891011121314

.form-wrapper #search:: -webkit-input-placeholder {color: # 999-font-weight: normal-}.form-wrapper #search: -moz-placeholder {color: # 999-font-weight: normal-}.form-wrapper #search: -ms-input-placeholder {color: # 999-font-weight: normal-}

І останнім кроком додаємо стилі кнопці пошуку:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647

.form-wrapper #submit {float: right-border: 1px solid # 00748f-height: 42px-width: 100px-padding: 0-cursor: pointer-font: bold 15px Arial, Helvetica-color: #fafafa-text-transform: uppercase-background-color: # 0483a0-background-image: -webkit-gradient(linear, left top, left bottom, from(# 31b2c3), to(# 0483a0))-background-image: -webkit-linear-gradient(top, # 31b2c3, # 0483a0)-background-image: -moz-linear-gradient(top, # 31b2c3, # 0483a0)-background-image: -ms-linear-gradient(top, # 31b2c3, # 0483a0)-background-image: -o-linear-gradient(top, # 31b2c3, # 0483a0)-background-image: linear-gradient(top, # 31b2c3, # 0483a0)--moz-border-radius: 3px--webkit-border-radius: 3px-border-radius: 3px-text-shadow: 0 1px 0 rgba(0, 0 ,0, .3)--moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff--webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff-}.form-wrapper #submit: hover,.form-wrapper #submit: focus {background-color: # 31b2c3-background-image: -webkit-gradient(linear, left top, left bottom, from(# 0483a0), to(# 31b2c3))-background-image: -webkit-linear-gradient(top, # 0483a0, # 31b2c3)-background-image: -moz-linear-gradient(top, # 0483a0, # 31b2c3)-background-image: -ms-linear-gradient(top, # 0483a0, # 31b2c3)-background-image: -o-linear-gradient(top, # 0483a0, # 31b2c3)-background-image: linear-gradient(top, # 0483a0, # 31b2c3)-}.form-wrapper #submit: active {outline: 0--moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset--webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset-}.form-wrapper #submit:: -moz-focus-inner {border: 0-}