Об`ємна форма пошуку на css3

Кожен елемент на сайті повинен бути особливим і підкреслювати дизайн сайту. А в цьому уроці ми створимо об`ємну форму пошуку за допомогою CSS3. Оскільки ця технологія містить безліч нововведень, то ми без праці створимо красиву форму пошуку. Вона буде складатися з поля для введення і кнопки пошуку. Звичайно це не flat стиль, але теж дуже непогано виглядає!

Схожі уроки на цю теми:

Форма пошуку на CSS3
Випадає горизонтальне меню з пошуком на CSS3 і HTML5

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

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

HTML частина

Весь HTML каркас буде на HTML5:

123456789

id="Wrapper"gt;lt;h1gt; CSS3 форма пошукуlt;/h1gt;lt;div id="Main"gt;lt;formgt;lt;input type="Text" id="Search"gt;lt;input type="Submit" class="Solid" value="Пошук"gt;lt;/formgt;lt;/divgt;lt;/sectiongt;

CSS частина

Форма пошуку знаходиться в блоці, який також виглядає об`ємно. Це з ідентифікатором main:

123456789101112131415

#main {width: 400px-height: 50px-background: # f2f2f2-padding: 6px 10px-border: 1px solid # b5b5b5--moz-border-radius: 5px--webkit-border-radius: 5px-border-radius: 5px--moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede--webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede-}

Отже, у нас є контейнер, де знаходяться поле для введення і кнопка пошуку.

Спочатку задамо стилі поля для введення:

12345678910111213141516

input[type="Text"] {float: left-width: 230px-padding: 15px 5px 5px 5px-margin-top: 5px-margin-left: 3px-border: 1px solid # 999999--moz-border-radius: 5px--webkit-border-radius: 5px-border-radius: 5px--moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede--webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede-}

А потім для кнопки пошуку:

123456789101112131415161718192021222324

input[type="Submit"].solid {float: left-cursor: pointer-width: 130px-padding: 8px 6px-margin-left: 20px-background-color: # f8b838-color: rgba(134, 79, 11, 0.8)-text-transform: uppercase-font-weight: bold-border: 1px solid # 99631d--moz-border-radius: 5px--webkit-border-radius: 5px-border-radius: 5px-text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9)--moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc--webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc--webkit-transition: background 0.2s ease-out-}

Але так як у кнопки є кілька станів, та й взагалі, щоб кнопка вела себе більш природно, задамо для кожного стану певні стилі:

123456789101112131415161718

input[type="Submit"].solid: hover, input[type="Submit"].solid: focus {background: # ffd842--moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc--webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc-}input[type="Submit"].solid: active	{background: # f6a000-position: relative-top: 5px-border: 1px solid # 702d00--moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc--webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc-}