Стильная раздвигающаяся форма поиска на CSS3

Для реализации элемента будет использоваться только CSS - никакого JavaScript.
Что означает CSS3. Это означает, что форма во всей своей красе будет работать только в современных браузерах. В старых браузерах функционал не действует по причине отсутствия поддержки псевдо-класса :focus

Разметка html.

Код: Выделить всё

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
	<div id="s-box">
		<form action="{U_SEARCH}" method="post">
		<fieldset>
			<input name="keywords" id="input-field" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" /> 
		</fieldset>
		</form>
	</div>
<!-- ENDIF -->
В данном виде построения кода у нас отсутствует кнопка поиска, запуск поиска осуществляется нажатием кнопки - Enter

В тему вашего стиля добавляем:

Код: Выделить всё

#s-box { 
	z-index: 4; 
	position: relative; 
	padding: 5px; 
	line-height: 0; 
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	background: #b9ecfe; 
	background-image: -webkit-linear-gradient(#dbf6ff, #b9ecfe);
	background-image: -moz-linear-gradient(#dbf6ff, #b9ecfe);
	background-image: -o-linear-gradient(#dbf6ff, #b9ecfe);
	background-image: -ms-linear-gradient(#dbf6ff, #b9ecfe);
	background-image: linear-gradient(#dbf6ff, #b9ecfe);
	display: inline-block; 
	box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,100,150,.4);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,100,150,.4);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,100,150,.4); 
} 

#s-box:hover { 
	box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px 2px rgba(100,200,255,.5);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px 2px rgba(100,200,255,.5);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px 2px rgba(100,200,255,.5); 
} 

#s-box:after { 
	content: ''; 
	display: block; 
	position: absolute; 
	width: 5px; 
	height: 20px; 
	background-color: #b9ecfe; 
	bottom: -10px; 
	right: -3px; 
	border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	box-shadow: inset 0 -1px 0 rgbA(255,255,255,.6), -2px 2px 2px rgba(0,100,150,.4); 
	-moz-box-shadow: inset 0 -1px 0 rgbA(255,255,255,.6), -2px 2px 2px rgba(0,100,150,.4);
	-webkit-box-shadow: inset 0 -1px 0 rgbA(255,255,255,.6), -2px 2px 2px rgba(0,100,150,.4); 
} 

#s-box:hover:after { 
	box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), -2px 2px 2px 1px rgba(100,200,255,.5);
	-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), -2px 2px 2px 1px rgba(100,200,255,.5);
	-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), -2px 2px 2px 1px rgba(100,200,255,.5);  
}

#input-field { 
	-webkit-appearance: none; 
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
	width: 24px; 
	padding: 0 0px; 
	height: 24px; 
	font-size: 14px; 
	color: #666; 
	line-height: 24px; 
	border: 0; 
	border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	box-shadow: 0 0 0 1px rgba(0,150,200,.5), inset 0 2px 5px rgba(0,100,150,.3), 0 2px 0 rgba(255,255,255,.6);
	-moz-box-shadow: 0 0 0 1px rgba(0,150,200,.5), inset 0 2px 5px rgba(0,100,150,.3), 0 2px 0 rgba(255,255,255,.6);
	-webkit-box-shadow: 0 0 0 1px rgba(0,150,200,.5), inset 0 2px 5px rgba(0,100,150,.3), 0 2px 0 rgba(255,255,255,.6); 
	position: relative; 
	z-index: 5; 
	-webkit-transition: .3s ease; 
	-moz-transition: .3s ease; 
} 

#input-field:focus { 
	outline: none; 
	width: 180px;
	padding: 0 10px;
}
Цветовую гамму формы можно настроить по своему предпочтению, изменить цвета под стиль вашего форума/сайта.


Давайте разберёмся какая часть кода за что отвечает.

Код: Выделить всё

#s-box { 
...
background-image: ...;
Цвет окружности нашей лупы. Градиент, поэтому состоит из двух цветов #dbf6ff - верхняя его часть и #b9ecfe - нижняя.

Код: Выделить всё

	box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,100,150,.4);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,100,150,.4);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,100,150,.4); 
Цвет тени.

Код: Выделить всё

#s-box:hover { 
	box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px 2px rgba(100,200,255,.5);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px 2px rgba(100,200,255,.5);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px 2px rgba(100,200,255,.5); 
}
Цвет тени при наведении мыши на форму.

Код: Выделить всё

#s-box:after { 
...
	background-color: #b9ecfe; 
Цвет палочки.

Код: Выделить всё

#s-box:hover:after { 
	box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), -2px 2px 2px 1px rgba(100,200,255,.5);
	-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), -2px 2px 2px 1px rgba(100,200,255,.5);
	-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), -2px 2px 2px 1px rgba(100,200,255,.5);  
}
Цвет тени палочки при наведении мыши на форму.
Комментарии: 10

dragon 10 авг 2012, 14:23 Сообщение

можно ли на phpbb3 поставить такой форум? Если да то как?
  • 0

CabinetAdmin 10 авг 2012, 14:59 Сообщение

Какой? Поставить то, что в демо?
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

dragon 10 авг 2012, 16:37 Сообщение

Извините я неправильно высказался как можно на phpbb3 поставить такой поиск как на демо?
  • 0

CabinetAdmin 10 авг 2012, 17:18 Сообщение

В точности так, как описано в инструкции.

Находите в overall_header.html:

Код: Выделить всё

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->
И меняете на то, что в инструкции. Далее открываете тему вашего стиля и в конец добавляете css.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

dragon 10 авг 2012, 19:09 Сообщение

А страничка где установлено демо это статические страницы?
  • 0

GoDFaTHeR 10 авг 2012, 19:59 Сообщение

dragon писал(а):А страничка где установлено демо это статические страницы?
именно они
  • 0
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ

dragon 10 авг 2012, 22:02 Сообщение

А как вы делаете что в статических старницах это работает?
  • 0

CabinetAdmin 11 авг 2012, 06:47 Сообщение

dragon писал(а):А как вы делаете что в статических старницах это работает?
А как это относится к теме?
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 08 сен 2014, 17:17 Сообщение

Достала меня уже эта шапка. Как сменить позицию в шапке этого поиска ?
  • 0

CabinetAdmin 08 сен 2014, 18:08 Сообщение

Этого поиска? Задать float, padding, margin с нужным значением.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!