Лого www.SiteHere.ru

Объемная форма поиска на CSS3

Объемная форма поиска на CSS3

Каждый элемент на сайте должен быть особенным и подчеркивать дизайн сайта. А в этом уроке мы создадим объемную форму поиска с помощью CSS3. Так как эта технология содержит множество нововведений, то мы без труда создадим красивую форму поиска. Она будет состоять из поля для ввода и кнопки поиска. Конечно это не flat стиль, но тоже очень неплохо смотрится!

Похожие уроки на эту тему:

Пример можно увидеть здесь:

Посмотреть примерСкачать

HTML часть

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

1
2
3
4
5
6
7
8
9
<section id="wrapper">  
    <h1>CSS3 форма поиска</h1>  
    <div id="main">  
        <form>  
            <input type="text" id="search">  
            <input type="submit" class="solid" value="Поиск">  
        </form>  
    </div>
</section>

CSS часть

Форма поиска находится в блоке, который также выглядит объемно. Это <div> с идентификатором main:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#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;
}

Итак, у нас есть контейнер, где находятся поле для ввода и кнопка поиска.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;
}

А потом для кнопки поиска:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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;
}

Но так как у кнопки есть несколько состояний, да и вообще, чтобы кнопка вела себя более естественно, зададим для каждого состояния определенные стили:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
}

Вывод

Действительно красивая форма поиска. Пусть сейчас так популярен Flat дизайн, но мне всё равно нравятся «объемные» элементы на странице.

Успехов!

Источник: http://www.hongkiat.com/blog/css3-search-field/

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

1 комментарий к записи
  • Александр

    Поиск ничего не находит в сайте.

     

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

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