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

16-06-2010

Вы знали что можно сделать круг с помощью css3 закругленных краев (border-radius) и сделать для него внутреннюю тень с помощью box-shadow? Сечйас попробуем создать форму поиска используя css3 эффекты закругления углов и внутренней тени. Можете посмотреть демо уже здесь. Но сперва я покажу как отдельно делать круг и внутреннюю тень.

Круг

Круг получается при придание очень большого значения скругленности углов. В следующем примере закругленность углов равна 100px что достаточно так как сам класс имеет размер всего 100х100

.circle {
	width: 100px;
	height: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
}


Эффкт внутренней тени
Этот эффект делается следующим образом. Нужно также отметить что это свойство на данный момент поддерживают только Chrome 4+ и Firefox 3.5+.

.inset {
   -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
   -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
   box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}

Форма поиска

Ну а теперь попробуем создать красивую форму поиска также будем использовать такую CSS3 примочку как градиент. Для начала сделаем на Html простенькую форму:

<form class="searchform">
	<input class="searchfield" type="text" value="Искать..." onfocus="if (this.value == 'Искать...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Искать...';}" />
	<input class="searchbutton" type="button" value="Go" />
</form>

Теперь можем писать для формы стили:

.searchform {
	display: inline-block;
	zoom: 1; /* ie7 hack for display:inline-block */
	*display: inline;
	border: solid 1px #009980;
	padding: 3px 5px;	
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
	-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
	box-shadow: 0 1px 0px rgba(0,0,0,.1);
	background: #f1f1f1;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
	-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
	font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
	background: #fff;
	padding: 6px 6px 6px 8px;
	width: 202px;
	border: solid 1px #009980;
	outline: none;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
	box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
	color: #fff;
	border: solid 1px #009933;
	font-size: 11px;
	height: 27px;
	width: 27px;
	text-shadow: 0 1px 1px rgba(0,0,0,.6);
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	background: #5f5f5f;
	background: -webkit-gradient(linear, left top, left bottom, from(#00CC00), to(#66CC00));
	background: -moz-linear-gradient(top,  #00CC00,  #66CC00);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC00', endColorstr='#66CC00'); /* ie7 */
	-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC00', endColorstr='#66CC00'); /* ie8 */
}


Эще это форма будет хороша тем что не очень уродливо отоброжается в брузерах без поддержки CSS3

Alloder7.16.2010 11:07
А как тас сделать чтоб кружок был внутри текстового поля справа? Или нпример сделать его с одной стороны круглым, а с другой нет…
Константин10.5.2010 05:10
Спасибо. Очень интересная и полезная статья. Век живи - век учись :)
Александр2.23.2011 09:02
border-radius.htc так называется библиотека которая делает отображение закругления кросбраузерным. Подключается вот так: behavior: url(border-radius.htc); В свободном доступе в сети PS http://prismotrel.com/ мое детище
    admin2.24.2011 01:02
    ну да есть много способов сделать эот все кроссбраузерным... pie еще есть
Александр3.14.2011 07:03
Полезный ресурс но, хотелось бы увидеть видеокус по WP, в сети есть много разных видеоуроков по WP но в них рассказывается в основном о html тегах и css, с этим я достаточно хорошо знаком, а вот с тегами WP довольно плоховато еще, если у Вас будет время хотелось бы увидеть видео по созданию шаблона с упором на теги, именно теги интересуют и как их лучше применять. Повторюсь: по html и css много видео информации, по тегам практически нет. Почему именно видео Вы спросите - потомучто это наиболее просто усваиваемый материал. Я уверен в том что многие будут Вам очень благодарны, буду благодарен если после создания такого материала напишете на почту которая у меня указана ЗЫ спасибо ,)
Сергей5.2.2011 01:05
Немогу понять, почему поиск не работает...
Михаил4.20.2012 01:04
Спасибо!
Олег4.25.2013 05:04
Спасибо большое, очень пригодилось.
ОСТАВИТЬ КОММЕНТАРИЙ