• Главная
• Статьи
• Учебники
• Шпаргалки
• Программы
• Контакты

	Категория: CSS
	Название: Красивая поисковая форма
	Дата добавления: 16-04-2012
	Раз просмотрено: 738
	Комментарии: 0
	Рейтинг: (0 голосов)

Красивая поисковая форма

Наверно, один из самых часто используемых элементов на сайте — это поисковая форма. Если вы хотите повысить юзабилити вашего сайта, то вам просто необходимо добавить на него поисковую форму, чтобы пользователи искали и находили необходимый им контент. В этом уроке вы узнаете как сделать при помощи CSS стильную поисковую форму.

HTML

Ниже вы найдете необходимую HTML разметку для вашей поисковой формы. Обратите внимание, что для создание этой поисковой формы мы используем HTML5. Мы будем применять HTML5 атрибуты placeholder и required:

<form class="form-wrapper">
	<input type="text" id="search" placeholder="Поиск по сайту" required>
	<input type="submit" value="Искать" id="submit">
</form>

CSS

Теперь добавляем CSS к нашей странице:

.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);
}

.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;
}

.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;
} 

.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;
}

В результате, мы получим такую стильную и красивую поисковую форму:

Красивая поисковая форма на CSS3

Поддержка браузерами

Эта поисковая форма отлично поддерживается такими браузерами как Firefox, Chrome, Safari, Opera и Internet Explorer 9. Хотя и в некоторых браузерах могут быть очень незначительные отличия в отображении.

Это интересно: «Типографика в веб-дизайне».

Ваш комментарий будет первым.