наверх





Форма поиска на сайте является одним из главных элементов сайта. А чтобы её было не стыдно показать, то стоит её красиво оформить...


В этом примере я покажу, как создать красивый и удобный вид поиска для вашего сайта. Приспособить его можно будет где угодно, так как HTML разметка у него очень простая.

HTML


<form>
<input type="text" name="search" class="search" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}">
<input type="submit" name="buttonsearch" class="buttonsearch" value="Искать!">
</form>


Как видите, за основу был взят тег <form>, а в нем два тега <input> - поисковая строка и кнопка "Искать!", у обоих по своему классу.

Начнем с оформления <form>.

CSS



Саму форму было решено делать градиентную, в светло-синих тонах:

form {
background: rgb(217,229,244);
background: -moz-linear-gradient(top,  rgba(217,229,244,1) 1%, rgba(160,195,247,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(217,229,244,1)), color-stop(100%,rgba(160,195,247,1)));
background: -webkit-linear-gradient(top,  rgba(217,229,244,1) 1%,rgba(160,195,247,1) 100%);
background: -o-linear-gradient(top,  rgba(217,229,244,1) 1%,rgba(160,195,247,1) 100%);
background: -ms-linear-gradient(top,  rgba(217,229,244,1) 1%,rgba(160,195,247,1) 100%);
background: linear-gradient(top,  rgba(217,229,244,1) 1%,rgba(160,195,247,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9e5f4', endColorstr='#a0c3f7',GradientType=0 );
}


Градиент готов. Теперь нужно сделать отступы и округление уголков слева, что бы выглядел не так однообразно. Так же, стоит задать фиксированную ширину.

form {
...

padding:8px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
width:450px;
}


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

form {
...

border:1px solid #CCDDF5;
-moz-box-shadow: 0px 2px 4px #a2c4f7;
-webkit-box-shadow: 0px 2px 4px #a2c4f7;
box-shadow: 0px 2px 4px #a2c4f7;
}


Наша форма-основа готова, если хотите, то можете добавить что-то от себя или изменить.



Теперь перейдем к созданию самой поисковой строки. Для начала, можно ей так же задать скругление углов по левой стороне и внутренние отступы с шириной:

.search {
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
padding:5px;
}


Дальше, давайте украсим нашу форму, добавив фон, изменим шрифт и определимся с высотой, шириной:

.search {
...

height:20px;
width:350px;
background-color:#E7EEF8;
color:#77787B;
font:10pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
}


Уже что-то есть. Выглядит неплохо, но можно сделать еще лучше. Теперь можно добавить внутреннюю тень и обводку:

.search {
...

-moz-box-shadow:inset 2px 2px 4px #d3e0f1;
-webkit-box-shadow:inset 2px 2px 4px #d3e0f1;
box-shadow:inset 2px 2px 4px #d3e0f1;
border:1px solid #E0E9F5;
}


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

.search:focus {
outline:0;
background-color:white;
-moz-box-shadow:inset 0px 0px 0px #F3F8FE;
-webkit-box-shadow:inset 0px 0px 0px #F3F8FE;
box-shadow:inset 0px 0px 0px #F3F8FE;
}


Теперь, при клике на форму не будет желтой обводки, которая задается браузером, далее измениться внутренняя тень и фон. Вот сейчас поисковая строка почти готова. Осталось лишь сделать переход в фокус плавным, добавив к селектору свойство transition:

.search {
...

-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}


Поисковая строка готова.



Теперь перейдем к созданию кнопки. Здесь можно нечего не мудрить и сделать её простенькой. В основе кнопке будут присутствовать градиент и внутренняя тень:

.buttonsearch {
background: rgb(116,170,252);
background: -moz-linear-gradient(top,  rgba(116,170,252,1) 0%, rgba(144,186,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(116,170,252,1)), color-stop(100%,rgba(144,186,249,1)));
background: -webkit-linear-gradient(top,  rgba(116,170,252,1) 0%,rgba(144,186,249,1) 100%);
background: -o-linear-gradient(top,  rgba(116,170,252,1) 0%,rgba(144,186,249,1) 100%);
background: -ms-linear-gradient(top,  rgba(116,170,252,1) 0%,rgba(144,186,249,1) 100%);
background: linear-gradient(top,  rgba(116,170,252,1) 0%,rgba(144,186,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#74aafc', endColorstr='#90baf9',GradientType=0 );
-moz-box-shadow:inset 2px 2px 1px #95befd;
-webkit-box-shadow:inset 2px 2px 1px #95befd;
box-shadow:inset 2px 2px 1px #95befd;
}


Дальше, что бы текст находился в нужном месте, добавим внутренние отступы, высоту и ширину:

.buttonsearch {
...

height:35px;
padding:5px;
width:70px;
}


Добавим обводки и изменим цвет и курсор мышки при наведении на кнопку:

.buttonsearch {
...

color:white;
border:1px solid #B5D1FD;
cursor:pointer;
}


Основа кнопки создана. Теперь нужно, что бы при наведении изменился градиент. Здесь же будет использовать не псевдокласс :focus, а :hover.

.buttonsearch:hover {
background: rgb(129,177,249);
background: -moz-linear-gradient(top,  rgba(129,177,249,1) 0%, rgba(155,192,247,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(129,177,249,1)), color-stop(100%,rgba(155,192,247,1)));
background: -webkit-linear-gradient(top,  rgba(129,177,249,1) 0%,rgba(155,192,247,1) 100%);
background: -o-linear-gradient(top,  rgba(129,177,249,1) 0%,rgba(155,192,247,1) 100%);
background: -ms-linear-gradient(top,  rgba(129,177,249,1) 0%,rgba(155,192,247,1) 100%);
background: linear-gradient(top,  rgba(129,177,249,1) 0%,rgba(155,192,247,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81b1f9', endColorstr='#9bc0f7',GradientType=0 );
}


Вот и все, красивый вид поиска для вашего сайта готов. Осталось лишь его адаптировать.




Просмотр демо-варианта


Поделиться
Text-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный text-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.