Стильная раздвигающаяся форма поиска на CSS3
Для реализации элемента будет использоваться только CSS - никакого JavaScript.
Что означает CSS3. Это означает, что форма во всей своей красе будет работать только в современных браузерах. В старых браузерах функционал не действует по причине отсутствия поддержки псевдо-класса :focus
Разметка html.
В данном виде построения кода у нас отсутствует кнопка поиска, запуск поиска осуществляется нажатием кнопки - Enter
В тему вашего стиля добавляем:
Цветовую гамму формы можно настроить по своему предпочтению, изменить цвета под стиль вашего форума/сайта.
Давайте разберёмся какая часть кода за что отвечает.
Цвет окружности нашей лупы. Градиент, поэтому состоит из двух цветов #dbf6ff - верхняя его часть и #b9ecfe - нижняя.
Цвет тени.
Цвет тени при наведении мыши на форму.
Цвет палочки.
Цвет тени палочки при наведении мыши на форму.
Для реализации элемента будет использоваться только 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 -->
В тему вашего стиля добавляем:
Код: Выделить всё
#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: ...;
Код: Выделить всё
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
- Сообщения: 5
- Зарегистрирован: 07 авг 2012, 15:37
- Пол: Муж
можно ли на phpbb3 поставить такой форум? Если да то как?
- dragon
- Сообщения: 5
- Зарегистрирован: 07 авг 2012, 15:37
- Пол: Муж
Извините я неправильно высказался как можно на phpbb3 поставить такой поиск как на демо?
В точности так, как описано в инструкции.
Находите в overall_header.html:
И меняете на то, что в инструкции. Далее открываете тему вашего стиля и в конец добавляете css.
Находите в 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 -->
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- dragon
- Сообщения: 5
- Зарегистрирован: 07 авг 2012, 15:37
- Пол: Муж
А страничка где установлено демо это статические страницы?
именно ониdragon писал(а):А страничка где установлено демо это статические страницы?
- dragon
- Сообщения: 5
- Зарегистрирован: 07 авг 2012, 15:37
- Пол: Муж
А как вы делаете что в статических старницах это работает?